티스토리 블로그를 하다보면 본문이나 사이드바에 여백을 주고싶을때가 있는데요. 특히나 제가 사용하고있는 마크쿼리 스파이더웹 (Markquery Spider's Web) 스킨을 사용할 경우 여백이 너무 없어서 다소 복잡해보일때가 있습니다. 사이드바 또한 여백이 없어서 본문과 사이드바가 겹쳐보이기도 하는데요. 오늘은 여백을 설정하는 html태그에 대해 알려드리겠습니다.
여백을 만들수있는 태그로는 패딩(padding)과 마진(margin) 태그가 있는데요. padding과 margin 태그의 차이점은 아래 그림으로 이해할 수 있습니다.
margin은 바깥쪽 여백을 말하며, padding은 안쪽 여백을 말하는것인데요. 깊게들어가면 미묘한 차이가 있긴하지만, 티스토리 본문이나 사이드바 부분에 적용해보니 큰 차이를 느끼긴 어렵습니다. 그럼 padding tag부터 알아보겠습니다.
■ 패딩 태그(padding tag)
일반적으로 패딩 태그를 적용하는 방법은 두가지가 있습니다.
1. 상하좌우 여백을 동일한 값으로 설정하는 방법
예시 : <div style="padding:5px;">
위의 예시대로 태그를 삽입하면 상하좌우 여백이 5px씩 만들어 집니다.
2, 상하좌우 서로 다른 여백으로 설정하는 방법
예시 : <div style="padding: 1px 2px 3px 4px;">
위와 같이 태그를 삽입할 경우 상단 1px, 우측 2px, 하단 3px, 좌측 4px의 여백이 생깁니다. 즉 상▷우▷하▷좌 순서대로 px값을 삽입하면 됩니다.
여기서 주의점은 패딩태그를 삽입할 경우 마지막부분에 </div>값을 지정해줘야 한다는 것인데요. <div ~로 시작되는 태그를 삽입할 경우 뒷부분에 끝내는 태그를 삽입해줘야합니다. 예를들면 다음과 같습니다.
<div style="padding:5px;">
애드센스 삽입코드 혹은 콘텐츠
</div>
제 블로그의 사이드바에 있는 구글의 일치하는 컨텐츠 광고를 위 패딩 코드를 사용하여 삽입했는데요. 아래 그림을 참고해 적용해보시기 바랍니다.
■ 마진 태그(margin tag)
margin 태그도 padding 태그와 동일하게 사용하면 됩니다.
예시 : <div style="margin: 1px 2px 3px 4px;">
margin-left나 margin-right, margin-top, margin-bottom처럼 구분해서 사용해도 됩니다. 티스토리 블로그 본문에 여백을 주기위해 관리자모드의 [HTML/CSS 편집]에서 수정하면 되는데요. 저는 HTML이 아닌 CSS에서 적용해줬습니다. 그 이유는 블로그 하단에 타불라 광고가 있는데 모바일에서 너무 크게 나오더라고요. 그래서 포스팅본문 뿐만아니라 타불라광고까지 여백을 주기위해 CSS에서 적용했습니다.
방법은 위 그림과 같이 CSS편집모드에 들어가서 상단부분을 보면, body{margin}부분이 있는데요. 이부분을 수정하면 포스팅본문을 뜻하는 article뿐만 아니라 footer, header, main 모두 적용할 수 있습니다. 그래서 기존 body{margin:0}부분을 5px만큼 여백을 주는것으로 변경했습니다.
이렇게 본문부분과 사이드바에 각각 여백을 줬더니 PC화면은 물론 모바일 환경까지 개선되어 더욱 가독성이 좋아보이더라고요. 위 내용을 참고하셔서, 보다 예쁜 블로그 만들어보시기 바랍니다.
