1-4. 글자 스타일
■ 글자 스타일
font-weight, font-style, text-decoration 등의 속성을 이용하면 글자를 다양한 스타일로 변경할 수 있습니다.
< h2> 글 제목 1< /h2>
< h2 style=" font-weight: normal;" > 글 제목 2< /h2>
< p>
< span style=" font-weight: bold;" > 글자(볼드체)< /span> < br>
< span style=" font-style: italic;" > 글자(이탤릭체)< /span> < br>
< span style=" text-decoration: underline;" > 글자(밑줄)< /span> < br>
< /p>
ex1-7.html의 실행 결과
새 창에서 보기
■ 글자 정렬
text-align 속성을 이용하면 글자를 왼쪽, 중앙, 오른쪽에 정렬할 수 있습니다.
< h3> 글자 정렬< /h3>
< h3 style=" text-align: left;" > 글자 정렬< /h3>
< h3 style=" text-align: center;" > 글자 정렬< /h3>
< h3 style=" text-align: right;" > 글자 정렬< /h3>
ex1-8.html의 실행 결과
새 창에서 보기
■ 줄 간격
line-height 속성은 글자들의 줄 간격을 설정하는 데 사용됩니다.
< h3> 줄 간격 설정< /h3>
< p> 재즈 음악은 아프리카음악의 감각과 미국 흑인 특유의 음악감각에서
< /p>
< p style=" line-height:100%;" > 재즈 음악은 아프리카음악의 감각과 미국 흑인 특유의 음악감각에서
< /p>
< p style=" line-height:150%;" > 재즈 음악은 아프리카음악의 감각과 미국 흑인 특유의 음악감각에서
< /p>
< p style=" line-height:200%;" > 재즈 음악은 아프리카음악의 감각과 미국 흑인 특유의 음악감각에서
< /p>
ex1-9.html의 실행 결과
새 창에서 보기
■ 글자 그림자
text-shadow 속성을 이용하면 글자에 그림자를 넣을 수 있습니다.
< style>
{
}
< /style>
< body>
< h1> 어쿠스틱 기타란?< /h1>
< /body>
ex1-10.html의 실행 결과
새 창에서 보기
text-shadow 속성에서 사용되는 네 가지 속성 값을 살펴보면 다음과 같습니다.
■ 링크 글자
링크 글자를 꾸미는 데 사용되는 CSS 속성은 a:link, a:visited, a:hover, a:active가 있습니다.
< style>
{ color: grey; text-decoration: none; }
{ color: grey; text-decoration: none; }
{ color: orange; text-decoration: underline; }
{ color: grey; text-decoration: none; }
< /style>
< body>
< h3> 기타의 종류< /h3>
< ul>
< li> < a href=" #" > 클래식 기타< /a> < /li>
< li> < a href=" #" > 어쿠스틱 기타< /a> < /li>
< li> < a href=" #" > 일렉 기타< /a> < /li>
< /ul>
< /body>
ex1-11.html의 실행 결과
새 창에서 보기
글자 스타일 관련 속성을 표로 정리하면 다음과 같습니다.
