어쨌든, 삶은 아름답다
티스토리 반응형 스킨 #2 좌우 여백 넣는 법 본문
반응형 스킨 #2는 깔끔하고 예쁘다. 다만 스마트폰 액정을 꽉 채우는 본문은 조금 갑갑한 감이 있다.
마침 구글 서치 콘솔 팀에서 메일도 왔다. 모바일 사용 편의성을 지적하는 내용이었다. 콘텐츠 폭이 화면 폭보다 넓다고.
아무래도 좌우 여백을 띄워줘야겠다.
그런데 문제가 있다. 좌우 여백을 띄우는 방법을 도통 못 찾겠다는 것이다.
구글에서 '티스토리 좌우 여백' 치면 관련 글이 주르륵 나오는데 반응형 스킨 #2에 해당하는 글이 보이지 않는다. 이상하다. 반응형 스킨 #2를 쓰는 사람이 별로 없나보다. 내 눈엔 반응형 스킨 #2 티스토리 기본 제공 스킨 중에 제일 깔끔하고 예쁜 것 같은데.
구글링으로 얻어낸 건 margin이나 padding값을 건들면 된다는 것.
두 차례 정도 시도하다 포기했다. css에서 body에 직접 margin값 넣었더니 블로그 본문은 물론이고 메뉴 부분까지 통째로 떼지길래 (._. ... p에 넣어봐도 씨알도 안 먹히고.
css를 나름 샅샅이 뒤졌는데- 아니, 대체 어디를 건들어야 하는 거람. 그냥 모바일 사용 편의성 계속 지적하라지.
-라고 포기했다가 <div>의 class명을 찾아내 형광펜 효과를 성공적으로 적용시킨 후 자신감이 뿜뿜한 상태로 다시 도전했다.
답은 html에 있었다.
스킨 편집에서 css를 뜯어고치는 게 아니었다.
아, 반응형 스킨 #2 용 좌우 여백 띄우는 법을 친절하게 설명한 글을 찾은 것은 아니다. 웬 html 설명 블로그에서 답을 찾아냈다. 뿌듯뿌듯. 이런 맛에 프로그래밍하나 싶고. 물론 스킨 수정을 할 때 css만 만지작거려서 html쪽을 만지는 건 많이 쫄렸지만 스킨 저장이 있으니까!
스킨 편집 - html편집에 들어가자.
그 다음, css로 들어가지 말고 html에 머무르자. 그러면 아래와 같이 <!doctype html> 로 시작하는 화면을 볼 수 있을 것이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>티스토리 반응형 스킨 #2 좌우 여백 넣는 법</title>
<link rel="alternate" type="application/rss+xml" title="어쨌든, 삶은 아름답다" href="https://limen.tistory.com/rss" />
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./images/font.css">
<style>
/* 좌우 여백 넣기 */
div.contents_style {padding:10px}
<s_if_var_cover-image>
.wrap_sub {
background-image: url('');
}
</s_if_var_cover-image>
</style>
이렇게 밑줄 친 부분을 넣으면 끝!
padding대신에 padding-left나 padding-right를 넣어서
div.contents_style {padding-left:10px, padding-right:10px}
이렇게 만들면 위, 아래를 제외하고 좌, 우에만 여백을 줄 수 있다. 나는 여백을 많이 주지 않아서 굳이 좌, 우 값만 지정할 필욘 없었다.
여백 값을 조절하려면 10px의 숫자를 조절하길. 숫자가 커질수록 여백도 커진다.
padding 대신 margin을 넣어도 여백이 생기긴 한다. 둘의 차이점은 이해했는데 padding을 넣나 margin을 넣나 똑같이 떨어져보여서 그냥 padding으로 했다. (코드 문외한이라 대충 함...)
만일 이렇게 고쳐도 안 된다면?
...저는 코드 문외한이라 왜 안 되는지 몰라여ㅎ
'팁글 > 티스토리' 카테고리의 다른 글
| 티스토리 반응형 스킨 #2 이미지 가로에 꽉 차게 나오게 하는 방법 (0) | 2021.10.24 |
|---|---|
| 티스토리 반응형 스킨 #2 이미지 쏠림 현상 해결 및 가운데 정렬하는 법 (1) | 2021.10.24 |
| 티스토리 반응형 스킨 #2 인용구 스타일 각각 폰트 변경 및 꾸미는 방법 (1) | 2021.10.11 |
| 이 방문자수로 애드센스 승인이 난다고...? (0) | 2021.09.25 |
| 티스토리 반응형 스킨 #2 형광펜 효과 넣는 법 (인용문 포함) (7) | 2021.09.19 |
