7.6 text-indent 속성을 이용한 들여쓰기
text-indent
속성은 단락(paragraph)이나 이와 유사한 형태의
요소들에 들여쓰기를 적용하거나 텍스트의 첫 줄에 들여쓰기를 사용할 수 있도록 하는 속성으로 다음과 같은 형식으로 사용할 수 있습니다.
selector { text-indent: 속성값 }
속성값에는 px, em 같은 길이의 단위가 올 수 있고 % 형태로 사용이 가능하며
둘 중 하나를 명시하면 기본적으로 첫 줄에 들여쓰기가 적용됩니다.
메모장을 열어 HTML5의 기본적인 코드를 작성하고 다음과 같이 해당 부분을 작성합니다.
<!DOCTYPE
HTML>
…
<style>
p{text-indent:0px;
width:400px; color:red;
background-color:yellow;
}
</style>
</head>
<body>
<p>대한민국은 민주공화국이다. 대한민국의 주권은 국민에게
있고, 모든 권력은 국민으로부
터 나온다.-헌법 1조</p>
<p>We give advice, but we we
cannot give conduct. When money speaks, the truth keeps
silent.</p>
</body>
</html>
위와 같이 현재 2개의 단락(paragraph)을
p 요소를 이용하여 body 블록에 작성하고 이에 대해서 들여쓰기가 전혀 없는 상태 “text-indent:0px” 형태로 설정하고 “text-indentEx.html”로
저장합니다.
IE9나 Firefox를 이용하여 보면 다음과 같이 나타납니다.
이제 text-indent 속성값을 각각 “text-indent:10px;”, “text-indent:-10px;”
첫 번째의 결과는
첫 줄을 10px 들여쓰기된 결과입니다. 재미있는 것은 음수
형태로 설정해주면 두 번째 결과에서 보는 것처럼 들여쓰기가 아닌 내어쓰기처럼 동작한다는 점입니다.
마지막으로 여러 줄에 걸쳐 들여쓰기를 하려면 길이 단위나 % 형태와 함께 “hanging” 속성값을 설정해서 처리할 수 있도록 실험적으로 “hanging”
속성값이 논의 중이지만 현재는 대부분의 브라우저에서 지원하지 않습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 8. 배경(Background)과 경계(Border), 여백 (0) | 2013.08.04 |
|---|---|
| 7.7 Text Decoration (0) | 2013.08.04 |
| 7.5 문장 내 간격(Spacing) 처리하기 (0) | 2013.08.04 |
| 7.4 텍스트 정렬(Alignment)과 맞추기(Justification) (0) | 2013.08.04 |
| 7.3 줄 바꿈(Line Breaking)과 단어 내 줄 바꿈(Word Boundaries) (0) | 2013.08.04 |
