글자 속성
HTML 페이지는 대학교에서 원격으로 논문을 제출하고 확인하려는 용도로 만들었습니다. 따라서 CSS에도 글자 속성이 굉장히 많습니다. 이 절에서는 글자 속성을 살펴봅니다.
5.1 font-size 속성
font-size는 글자 크기를 지정하는 속성입니다. font-size 속성에는 크기 단윈아 [그림 6-20]의 키워드를 입력할 수 있습니다.
[그림 6-20]
font-size: inherit, initial, lare, larger,, medium, small, smaller, x-large, x-small
5.2 font-fmaily 속성
font-family는 글꼴을 지정하는 속성입니다. font-family 속성의 스타일 값에는 [그림 6-21] 처럼 사용자 컴ㅇ퓨터에 설치된 글꼴을 입력할 수 있습니다.
[그림 6-21]
font-family: Adobe, Arbic, Adobe Casion Pro, Adobe, Fan Heiti Std, Adboe Fangsong Std, Adobe Garamond Pro, Adboe, Gothic Std, Adobe, Hebrew, Adboe Heiti Std, Adboe Kaiti Std
개발에 사용하는 컴퓨터에는 글꼴이 설치되어 있지만, 개발한 웹 페이지를 접속하는 사용자의 컴퓨터에는 글꼴이 없을 수도 있습니다. 이때를 대비해 font-family 속성을 여러 개 입력합니다. 그러면 웹 브라우저가 지정된 여러 글꼴 중에서 사용자의 컴퓨터에 설치된 글꼴을 찾아 출력합니다.
그런데 다국적 사용자를 대상으로 웹 페이지를 제공할 때는 사용자에게 무슨 글꼴이 있는지 일일이 확인할 수가 없습니다. 이러한 문제를 해결하고자 font-family 속성의 가장 마지막에 serif 글꼴(명조체), Sans-serif 글꼴(고딕체), mono space 글꼴(고정폭 글꼴)처럼 우베 브라우저에서 지정하는 generic-family 글꼴을 입력합ㄴ이다.
NOTE_ 모서리가 뾰족한 글자를 Serif 글꼬(명조체)라고 하며, 모서리가 네모난 글자를 Sans-serif 글꼴(고딕체)이라고 합니다.
크롬 글꼴 설정을 살펴보면 [그림 6-23]처럼 설정되어 있습니다. 이러한 웹 브라우저에서 Serif글꼴을 사용하면 Adobe Arabic의 명조체를 출력합니다.
기본 예제 6-7 글자 속성 적용
1. 글자 크기ㅏ 조절하기 다음 코드를 작서앟고 시랳ㅇ합니다. 다양하게 변경된 크기를 확인할 수 있습니다.
코드6-25 글자 크기 적용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.a { font-size: 32px; }
.b { font-size: 2em; }
.c { font-size: 1arge; }
.d { font-size: small; }
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<p class="a">Lorem ipsum</p>
<p class="b">Lorem ipsum</p>
<p class="c">Lorem ipsum</p>
<p class="d">Lorem ipsum</p>
</body>
</html>
NOTE_ HTML 페이지에서 p ㅌ애그의 기본 크기는 16px입니다. 따라서 32px로 지정한 글자와 2배수를 적용한 글자의 크기가 같습니다. h1 태그의 기본 크기는 32px 입니다.
2. 글꼴 1개 지정하기 컴퓨터에 설치된 글꼴을 지정해 봅시다. 일반ㅇㅈ덕으로 한 단어로 된 글꼴 이름은 따옴표를 사용하지 않지만 두 단어 이상으로 된 글꼴 이름은 따옴표 사용을 추천합니다.
코드6-25 글꼴 적용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.font_arial { font-famliy: Arial; }
.font_roman { font-family: 'Times New Roman'; }
</style>
</head>
<body>
<h1 class="font_arial">Lorem ipsum</h1>
<p class="font-roman">Lorem ipsum</p>
</body>
</html>
3. 글꼴 여러 개 지정하기 앞서 언급했듯이 설정한 글꼴이 웹 페이지를 사용할 사용자의 컴퓨터에는 없을 수 있습니다. 이 때를 대비해 다음 코드처럼 font-family 속성을 여러 개 입력합니다.
코드 6-27 여러 개의 글꼴 적용
<style>
.font-arial { font-family: '없는 글꼴', Arial; }
.font_roman { font-family: 'Times New Roman', Arial; }
</style>
4. 웹 브라우저 고유 글꼴 적용하기 다음 코드처럼 절대 있을 것 같지 않은 글꼴을 입력해 봅니다. 코드를 실해아면 웹 브라우저는 우선 '없는 글꼴'이 있는지 확인합니다. 글꼴이 사용자의 컴퓨터에 설치되어 있지 않으므로 사용자의 웹 브라우저에 설정된 고유의 글꼴을 출력합니다.
코드 6-28 웹 브라우저 고유 글꼴 적용
<style>
.font_arial { font-family: '없는 글꼴', sans-serif; }
.font_roiman { font-family: '없는 글꼴', serif; }
</style>
5.3 font-style과 font-weight 속성
font-style과 font-weight 는 글자의 두께와 기울기를 조절하는 속성입니다. font-style 속성에는 [그림6-24]의 키워드를 입력할 수 있고, font-weight 속성에는 숫자나 [그림6-25]의 키워드를 입력할 수 있습니다.
[그림 6-24]
font-style: inherit, initial, italic, normal, oblique
[그림 6-25]
font-weight: 700,800,900,bold, bolder, inherit, initial, lighter, normal
기본 예제 6-8 글자 두께와 기울기 조정
간단한 내용이므로 다음 코드를 작성하고 실행 결과를 호가인해 봅시다. 참고로 font-weight 속성에 400을 입력하면 일반 글자의 두께로 출력되고, 700을 입력하면 두껍게 출력됩니다. 두께를 지원하지 않는 글꼴은 font-weight속성을 사용해 두께를 조절할 수 없습니다.
코드 6-29 두께와 기울기 조절
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.font_big { font-sizse: 2em; }
.font_italic {font-style: italic; }
.font_bold { font-weight: bold; }
</style>
</head>
<body>
<p class="font_big font_italic font_bold">Lorem ipsum dolor amet</p>
</body>
</html>
5.4 text-align 속성
글자 소성 중 이번에는 글자의 정렬과 관련된 text-align 속성을 살펴봅니다. text-align 속성에는 [그림 6-26]의 키워드를 입력할 수 있습니다.
text-align:~ center, end, inherit, initial, justify, left, match-parent, right, start
기본 예제 6-9 글자 정렬
간단하게 다음 코드처럼 작성하고 실행합니다.
코드 6-30 글자 정렬
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.font_big { font-size: 2em; }
.font_italic { font-style: italic; }
.font_bold { font-weight: bold; }
.font_center { text-align: center; }
.font_right { text-align: right; }
</style>
</head>
<body>
<p class="font_big font_italic font_bold font_center">Lorem ipsum</p>
<p class="font_bold font_right">2016.12.09</p>
<p>Lorem ipsum sit amet, consectetur adipiscing elit.</p>
</body>
</html>
NOTE_ text-align 속성과 영역
text-align 스타일 속성과 관련해 가장 많이 받는 질문을 다루어 보겠습니다. 우선 [코드 6-31]의 실행결과를 예측해 봅시다. 코드를 실행하면 [그림 6-27]처럼 span 태그에 text-align 속성이 적용되지 않습니ㅏㄷ. 왜 그럴까요?
코드 6-31 text-align 속성을 적용할 때 주의 사항
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.font_center { text-align: center; }
</style>
</head>
<body>
<span class="font_center">Lorem ipsum dolor amet</span>
<p>Lorem ipsum sit amet, consectetur adipiscing elit.</p>
</body>
</html>
line-height 속성
line-height는 글자의 높이를 지정합니다. 현대 HTML 페이지는 문서보다 애플리케이션 형태로 많이 사용합니다. 그래서 line-height 속성을 사용해 글자의 높이를 지정한다기보다는 글자를 수직 중앙 정렬합니다.
기본 예제 6-10 글자를 수직 중앙 정렬
1. 간단한 버튼 만들기 line-height 속성을 사용해 글자를 수직 중앙 정렬해 보겠습니다. 다음 코드처럼 idv 태그를 사용해 간단한 버튼을 만드는 코드를 먼저 작성합니다. 코드를 실행하면 그럴듯한 버튼을 만듭니다. 하지만 글자가 수평으로는 중앙 정렬되지만 수직으론은 중앙 정렬되지 않습니다. CSS에는 block 속성이 있는 태그에 수직 정렬을 지정할 수 있는 스타일 속성이 없기 때문입니다.
코드 6-32 버튼 생성
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.font_big { font-size: 2em; }
.font_italic { font_style: italic; }
.font_bold { font-weight: bold; }
.font_center { text-align: center; }
.button {
width: 150px;
height: 70px;
background-color: #FF6A00;
border; 10px solid #FFFFFF;
border-radius: 30px;
box-sdhadow: 5px 5px 5px #A9A9A9;
}
.button > a {
display: block;
}
</style>
</head>
<body>
<div class="button">
<a href="#" class="font_big font_italic font_bold font_center">Click</a>
</div>
</body>
</html>
2. 글자를 수직 중앙 정렬하기 글자를 감싸는 박스의 높이와 크기가 같은 70px을 line-height 속성으로 지정하면 실행 결과처럼 글자가 수직으로 중앙 정렬됩니다.
코드 6-33 수직 중앙 정렬
.button {
width: 150px;
height: 70px;
background-color: #FF6A00;
border: 10px solid #FFFFFF;
border-radius: 30px;
box-shadow: 5px 5px 5px #A9A9A9;
}
.button > a {
display: block;
line-height: 70px;
}
5.6 text-decoration 속성
마지막으로 알아볼 글자 속성은 text-decoration 입니다. a 태그에 href 속성을 지정하면 [그림 6-29]처럼 글자에 밑줄이 생기면서 파란색으로 변경됩니다. 하지만 일반 웹 페이지에는 링크에 밑줄이 없습니다. text-decoration 속성을 적용해서 밑줄을 제거했기 때문입니다.
기본 예제 6-11 링크의 밑줄 제거
다음 코드는 a 태그에 적용된은 밑줄을 text-decoration 속성을 사용해 제거합니다. text-decoration 속성으로는 밑줄만 제거되며 색상은 color 속성을 사용해 별도로 지정해야 합니다.
코드 6-34 링크 밑줄 제거
<!DOCTYPEq html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>
<a href="#">Lorem ipsum dolor amet</a>
</h1>
</body>
</head>
</html>
