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>
text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow 속성을 사용합니다.
CSS / Reference / text-decoration
text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1
opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3
clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2
CSS / Reference / list-style-position
list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1
quotes는 q 태그로 만든 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 속성입니다. 기본값 : 큰따옴표 상속 : Yes 애니메이션 : No 버전 : CSS Level 2
calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 다음은 는 글자 크기를 20px로 설정합니다. font-size: calc( 10px + 10px );
CSS / Reference / aspect-ratio
aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다.
font-weight 속성은 CSS에서 글꼴의 굵기를 지정하는 데 사용됩니다. 텍스트의 가독성을 높이거나 디자인의 강조점을 표현할 때 유용합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1