[02. CSS] 003. 텍스트

요소 내부의 텍스트에 스타일을 적용하는 방법을 알아보자. 텍스트의 서체를 바꾸거나 글자 크기를 바꾸는 등 다양한 스타일을 적용할 수 있다.

 

p {
    font-family: Georgia, Times, serif;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: underline;
    line-height: 1.4em;
    letter-spacing: 1em;
    word-spacing: 1em;
    text-align: left;
    text-indent: 20px;
    text-shadow: 1px 1px 2px #111111;
}

 

font-family는 텍스트에 사용할 서체를 지정한다. 여러 서체를 지정해 놓으면 첫 번째로 지정한 서체가 없을 경우, 순서대로 두 번째, 세 번째 순으로 불러온다.

 

font-size는 말 그대로 글자의 크기를 설정한다. 단위는 px, %, em이 있다. px은 픽셀을 뜻하고 퍼센트는 기본 글자 크기의 상대적인 크기로, em도 기본 글자 크기의 상대적인 크기로 글자 크기를 조절한다.

 

font-weight는 글자의 굵기를 조절할 수 있다. normal은 일반 스타일을 나타내며, bold는 굵은 글씨를 나타낸다.

 

font-style은 글자의 기울임을 표현할 수 있다. normal, italic, oblique 값을 지정할 수 있다.

 

text-transform은 대문자, 소문자를 지정하는 프로퍼티이다. 대문자는 uppercase, 소문자는lowercase, 첫 글자만 대문자는 capitalize로 설정할 수 있다.

 

text-decoration은 글자에 밑줄 또는 취소선을 지정한다. 효과를 제거하기 위해선 none, 밑줄은underline, 윗줄은 overline, 가운데 줄은 line-through, 깜박이는 텍스트는 blink로 설정할 수 있다.

 

line-height는 텍스트 행간을 조절, letter-spacing은 문자 사이의 간격, word-spacing은 단어 사이의 간격을 조절하는 프로퍼티이다.

 

text-align은 텍스트의 정렬에 사용된다. 왼쪽 정렬은 left, 오른쪽 정렬은 right, 가운데 정렬은center, 단락에서 마지막 줄을 제외하고 양쪽으로 정렬하는 것은 justify를 입력하면 된다.

 

text-indent는 들여쓰기에, text-shadow은 글자에 그림자 효과를 주는데 사용된다. text-shadow의 첫 번째 값은 그림자의 가로, 두 번째 값은 세로, 세 번째 값은 번짐, 네 번째 값은 그림자의 색상을 의미한다.

 

td {
    vertical-align: baseline;
}

 

vertical-align은 테이블에서 세로 정렬에 사용된다. <p>와 <div>같은 블록요소의 텍스트를 세로 정렬하기 위한 용도는 아니다. 값으로 baseline, sub, super, top, text-top, middle, bottom, text-bottom을 가질 수 있다.

 

p:first-letter {
    font-size: 20px;
}

p:first-line {
    font-weight: bold;
}

 

첫 번째 문자 또는 줄에 다른 스타일을 지정하고 싶으면 first-letter, first-line을 사용하면 된다. 이는 프로퍼티가 아니라 유사 요소(pseudo-element)라고 한다.

 

a:link {
    color: red;
}

a:visited {
    color: blue;
}

a:hover {
    color: yellow;
}

a:focus {
    color: purple;
}

a:active {
    background-color: black;
}

 

브라우저는 기본적으로 링크를 밑줄이 있는 파란색으로 나타낸다. 그리고 방문한 링크의 경우 색상을 변경해 사용자에게 방문한 링크라는 사실을 알려준다. CSS로 이러한 방문하기 전의 링크와 방문한 후의 링크의 스타일을 변경할 수 있다. 방문하기 전의 링크는 :link로 방문한 후의 링크는 :visited로 스타일을 변경할 수 있다. 이를 유사 클래스라고 한다. 그리고 몇 가지 유사 클래스가 더 있다. 마우스를 올려놓을 때 작동하는 :hover, 요소에 포커스가 있을 때 나타나는 :focus, 요소를 실행할 때 적용되는 :active가 있다.

 

마지막으로 특정한 속성 값과 일치하는 요소에 적용되는 규칙을 만들 수 있는 속성 선택자는 다음과 같다.

 

선택자	의미	예시
존재	[ ] 속성이 있는 경우	p[class]
동일	[=] 속성 값이 일치하는 경우	p[class=”abc”]
공백	[~=] 공백으로 구분된 속성 값이 일치하는 경우	p[class~=”abc”]
접두사	[^=] 속성 값이 특정 문자로 시작하는 경우	p[attr^=”a”]
포함	[*=] 속성 값이 일부 일치하는 경우	p[attr*=”bc”]
접미사	[$=] 속성 값이 특정 문자로 끝나는 경우	p[attr$=”c”]
[표 2.2] 속성 선택자의 종류