CSS / Reference / text-indent
개요
- 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다.
- 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다.
- 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다.
문법
text-indent: length | initial | inherit
- length : px, em, rem 등으로 크기를 정합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
- 첫 번째 문단은 들여쓰기를 한 것입니다.
- 두 번째 문단은 내어쓰기를 한 것입니다. 내어쓰기한 부분이 영역을 벗어납니다.
- 세 번째 문단은 내어쓰기를 하고 왼쪽에 여백을 준 것입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p {
font-size: 20px;
}
.a {
text-indent: 2em;
}
.b {
text-indent: -2em;
}
.c {
text-indent: -2em;
margin-left: 2em;
}
</style>
</head>
<body>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</p>
</body>
</html>
CSS / Reference / list-style-type
목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.
CSS / Reference / border-width
border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-width border-right-width border-bottom-width border-left-width
CSS / Reference / backface-visibility
backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3
content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다. 기본값 : normal 상속 : No 애니메이션 : No 버전 : CSS Level 2
font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1
CSS / Reference / text-decoration
text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1
CSS / Reference / letter-spacing, word-spacing
글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.
CSS / Reference / background-repeat
background-repeat는 배경 이미지의 반복 여부와 반복 방향을 정하는 속성입니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1
font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2