1.2.7.3 CSS 템플릿 활용하기 - 본문 내어쓰기

3. 본문 내어쓰기

워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다.

들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다. 

 CSS : Style.css 

p.outdent {

text-indent : -2em;

padding : 0 0 0 3em;

}

 HTML : ch001.html 

<p class="outdent">워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다. 들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다. </p>

여백은 margin이 아니라 padding을 사용한다. margin과 padding의 차이는 http://epubguide.net/43 여기서 확인하기 바란다. 

margin이 아닌 padding으로 여백을 주는 이유는 글자가 테두리 안에 들어오는게 제대로 된 편집이기 때문이다. margin으로 내어쓰기의 여백을 설정하면, 눈에는 보이지 않아도 글상자 밖으로 글자가 나가게 된다. 

 CSS : Style.css 

p.outdent_padding {

text-indent : -2em;

padding : 0 0 0 2em;

border : dotted 1px red;

}

p.outdent_margin {

text-indent : -2em;

padding : 0 0 0 2em;

border : dotted 1px red;

}

 HTML : ch001.html 

<p class="outdent_padding">워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다. 들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다. </p>

<p class="outdent_padding">워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다. 들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다. </p>

위에서 작성한 코드의 결과를 보면 이렇게 나온다. padding을 여백으로 설정하면 글상자 안에 글자가 들어가는데 margin으로 여백을 설정하면 글상자 밖으로 글자가 나온다. 테두리가 없으면 똑같이 보이지만 테두리가 보이면 차이를 알아볼 수 있다. 

▶ outdent-padding을 적용한 결과

워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다. 들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다.

▶ outdent-margin을 적용한 결과

워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다. 들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다.