#9. 티스토리 본문 크기 제한 / 좌우 여백 주는 방법

이번 포스팅에서는 본문이 위치하는 부분에, padding 이라는 코드를 넣어서 상하좌우로 여백을 주는 방법에 대해서 알아보고자 한다. 참고로, CSS padding만 검색해도 margin, padding 등에 대한 정보가 무수히 많이 쏟아지니, 개념에 대해서는 굳이 언급할 필요가 없을 것 같다.

티스토리 본문 중앙에 배치시키기

지난 포스팅까지 완료했던 스킨의 대략적인 모습은 다음과 같다.

보다시피, 본문이 너무 옆으로 딱 붙어있기 때문에 가독성이 떨어진다. 특히 모바일 화면의 경우, 저렇게 좌우로 딱 붙게되면 엣지있는 모델의 경우에는 제대로 읽을 수가 없다. 고로 어느정도 좌우로 여백을 두고 본문을 배치시킬 필요가 있는 것이다. 또한, 본문이 배치되는 가로 길이, 즉 Width도 적당히 조절하고 싶다. 요즘 반응형 웹이 대세인 만큼, 고정된 가로 길이보다는 가변형으로 집어넣고 싶은데, 과연 어떻게 할 수 있을까?

다행히, Bootstrap에서 grid라는 개념으로, 배치코드를 다양한 방식으로 제공하고 있다. 다음은 부트스트랩 홈페이지에서 배치 관련 코드의 일부를 발췌해온 것이다.

Extra small 부터 , Extra large까지 다양한 크기의 grid 형식을 제공해주고 있는 모습이다. 여기서 grid는, 쉽게 얘기하면 그냥 표라고 생각하면 된다. 하단에 있는 px크기만큼 표를 만들건데, 표의 크기 제한을 둬서 반응형 웹을 구현하는 방식이다.

필자가 생각하는 이상적인 본문 배치는 다음과 같다.

본문의 크기는 최대 960px로 제한하고, 좌우로는 그냥 여백을 두는 것이다. 본문을 너무 넓게 사용할 경우, 가독성이 떨어지기 때문이다. 그렇다면 만약 사용자가 브라우저 화면을 축소시키거나, 모바일에서 접속하여 960px보다 작은 화면으로 보면 어떻게 해야할까?

본문의 크기는 줄어들어야 할 것이고, 위에서 언급했듯이 좌우로 어느정도의 여백이 있어야하겠다.

본문의 크기를 제한하는 방법

일단 bootstrap에서 기본적으로 제공하는 grid 코드를 사용해서 최대 960px크기로 제한하는 코드는 다음과 같다.

<div class="container">
  <div class="row">
    <div class="col-lg-">
      [본문영역]
    </div>
  </div>
</div>

필자도 정확한 css나 bootstrap에 대한 지식이 없기 때문에, 실제로 위처럼 class를 많이 사용해야하는지는 잘 모르겠지만, 일단 홈페이지에서 그대로 퍼온 코드이다. 여기서 눈여겨볼 점은, 가장 하위에 위치한 col-lg- 클래스이다. 이 부분 안에 본문을 선언해줘야(치환자들) 본문의 크기가 960px로 제한이 되는 것이다.

이제, 해당 부분을 넣고 코드를 실행해보자.

보다시피 어느정도 큰 화면에서는, 화면을 가득채우지 않고 960px 만큼만 본문이 퍼진 모습을 보여준다. 그런데 이 때 만약 웹을 축소시키면 어떻게될까?

보는것 처럼, 여백 없이 본문의 내용이 좌우로 꽉 차게 되어버린다. 즉, 가독성이 떨어지는 문제가 발생하는 것이다. 그래서 필요한 것이, 바로 margin과 padding이다.

padding으로 본문에 여백주기

padding을 주는 방법은 간단하다. 일단 아래 그림을 보도록 하자.

margin, border, padding의 구조를 그림으로 표현한 것이다. 우리는 가장 안에 있는 padding을 통해서 여백을 주고자 한다. 쉽게 보면, 저 파란 네모안에 본문이 있고, 그걸 덮고 있는게 padding, 그걸 덮는게 border, 그걸 덮는게 margin이 된다. 즉, 현재 필자의 목표는 파란 본문의 좌우에, 여백을 주는 것이기 때문에 padding을 줘보고자 하는 것이다.

보다시피, 여백은 상하좌우로 각각 줄 수 있다. 어떻게?

padding-top: 15px

padding-right: 15px

padding-left: 15px

padding-bottom: 15px

즉, 상하좌우를 각각 개별적으로 다르게 부여할 수 있고, 이 코드는 css에 스타일로 지정해주는 것이 좋다. 필자는 다음과 같이 코드를 짰다. 밑줄 친 부분이 지난 코드에서 달라진 부분이다.

html

<div class="main_content">

<div class="col-lg-">

<s_article_rep>

</center>

</div>

티스토리 본문 중앙에 배치시키기

지난 포스팅까지 완료했던 스킨의 대략적인 모습은 다음과 같다.

필자가 생각하는 이상적인 본문 배치는 다음과 같다.

본문의 크기는 줄어들어야 할 것이고, 위에서 언급했듯이 좌우로 어느정도의 여백이 있어야하겠다.

본문의 크기를 제한하는 방법

일단 bootstrap에서 기본적으로 제공하는 grid 코드를 사용해서 최대 960px크기로 제한하는 코드는 다음과 같다.

<div class="container">
  <div class="row">
    <div class="col-lg-">
      [본문영역]
    </div>
  </div>
</div>

이제, 해당 부분을 넣고 코드를 실행해보자.

padding으로 본문에 여백주기

padding을 주는 방법은 간단하다. 일단 아래 그림을 보도록 하자.

보다시피, 여백은 상하좌우로 각각 줄 수 있다. 어떻게?

padding-top: 15px

padding-right: 15px

padding-left: 15px

padding-bottom: 15px

html

<div class="main_content">

<div class="col-lg-">

<s_article_rep>

</center>

</div>

</div>

</s_article_rep>

</div>

css

/* 본문 영역 */

.entry_title {

font-size: 30px;

color: #46B884;

}

.entry_date {

font-size: 15px;

color: #BDBDBD;

}

.article {

font-size: 15px;

color: #5D5D5D;

padding-top: 30px;

}

.main_content {

padding: 15px;

}

HTML에서 본문과 글 제목 등을 main_content라는 클래스 아래 넣고, 해당 클래스에 padding:15px 를 부여하였다. 이것은, 상하좌우 전체 다 여백을 15px만큼 주라는 것이다. 이렇게 코드를 넣고 실행해보면 다음과 같이 바뀐 것을 볼 수 있다.

보다시피, 좌우에 각각 15px만큼의 여백이 들어간 것을 볼 수 있다. (물론, 상하에도 들어가 있고, css에서 보면 .article에도 padding-top. 즉 윗방향에 대한 여백을 줬기 때문에, 본문과 글 제목에도 여백이 생겼다.)

이렇게 본문을 가운데 배치시키면서 크기를 제한하고, 또 상하좌우로 본문에 여백을 주는 방법에 대해서 알아보았다. 다음 포스팅에서는 현재 Doony's Workshop 이라고 이미지로 대체한 네비게이션 바 부분을 좀 더 섬세하게 다듬어보자.

[IT & IT] - #8. 티스토리 본문 글자 크기 / 글씨체 바꾸는 방법

[IT & IT/티스토리 스킨 제작] - #7. 티스토리 스킨 업로드하는 방법

[IT & IT/티스토리 스킨 제작] - #6. 티스토리 스킨만들기::: 글제목, 글내용을 배치해보자.

[IT & IT/티스토리 스킨 제작] - #5. Bootstrap을 이용해서 블로그 상단바를 만들어보자.

[IT & IT/티스토리 스킨 제작] - #4. 티스토리 스킨 제작을 위한 HTML/CSS의 기본

[IT & IT/티스토리 스킨 제작] - #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치

[IT & IT/티스토리 스킨 제작] - #1. 티스토리 스킨 제작기

</div>

</s_article_rep>

</div>

css

/* 본문 영역 */

.entry_title {

font-size: 30px;

color: #46B884;

}

.entry_date {

font-size: 15px;

color: #BDBDBD;

}

.article {

font-size: 15px;

color: #5D5D5D;

padding-top: 30px;

}

.main_content {

padding: 15px;

}

[IT & IT] - #8. 티스토리 본문 글자 크기 / 글씨체 바꾸는 방법

[IT & IT/티스토리 스킨 제작] - #7. 티스토리 스킨 업로드하는 방법

[IT & IT/티스토리 스킨 제작] - #6. 티스토리 스킨만들기::: 글제목, 글내용을 배치해보자.

[IT & IT/티스토리 스킨 제작] - #5. Bootstrap을 이용해서 블로그 상단바를 만들어보자.

[IT & IT/티스토리 스킨 제작] - #4. 티스토리 스킨 제작을 위한 HTML/CSS의 기본

[IT & IT/티스토리 스킨 제작] - #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치

[IT & IT/티스토리 스킨 제작] - #1. 티스토리 스킨 제작기

저작자표시 비영리 변경금지

'Developer > 티스토리 스킨 제작' 카테고리의 다른 글

#11. 티스토리 스킨 상단바 만들기 2탄 (238)	2018.04.11
#10. 티스토리 상단바를 창 크기에 따라 조절하기 (246)	2018.04.10
#8. 티스토리 본문 글자 크기 / 글씨체 바꾸는 방법 (597)	2018.04.01
#7. 티스토리 스킨 업로드하는 방법 (598)	2018.03.30
#6. 티스토리 스킨만들기::: 글제목, 글내용을 배치해보자. (757)	2018.03.29

Doony Garage
게러지를 꿈꾸는 개발자

게러지를 꿈꾸는 개발자

#9. 티스토리 본문 크기 제한 / 좌우 여백 주는 방법

'Developer > 티스토리 스킨 제작' 카테고리의 다른 글

댓글

티스토리툴바

#9. 티스토리 본문 크기 제한 / 좌우 여백 주는 방법

'Developer > 티스토리 스킨 제작' 카테고리의 다른 글

관련글

댓글

티스토리툴바