- 2020.09.27 ~ 09.28 CSS 공부 정리
- 'HTML5+CSS3 웹 표준의 정석' - 고경희, 이지스퍼블리싱을 보고 공부, 정리합니다.
- p. 228/ 06. 텍스트 관련 스타일
글꼴 관련 스타일
- 글꼴 관련 스타일 속성의 종류에 대해 알아본다.
- 글꼴 지정하기 속성에 대해 알아본다.
- 크기 지정 속성에 대해 알아본다.
- 굵기 지정 속성에 대해 알아본다.
- 스타일 지정 속성에 대해 알아본다.
글꼴 관련 스타일 속성의 종류
- 글꼴 지정 : font-family 속성
- 크기 지정 : font-size 속성
- 굵기 지정 : font-weight 속성
- 스타일 지정 : font-style 속성
글꼴 지정하기 : font-family 속성
- 텍스트를 사용하는 요소들에 사용
- (ex) <body>태그, <p>태그, <h1>...<h6>태그
- 사용자의 시스템에 글꼴이 설치되어 있는 경우, 사용자가 지정한 글꼴로 웹 문서의 텍스트가 설정된다.
- 하지만 글꼴이 설치되어 있지 않는 경우, 브라우저 기본 값이 나타난다.
- 따라서 웹 문서에서 글꼴을 지정할 때는 지정한 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴도 지정한다.
- (한 가지 글꼴만 지정해도 된다.)
- font-family 속성은 상속된다. 따라서 <body> 태그 스타일에 한번 정의하면 문서 안의 모든 자식 요소에 같은 글꼴이 사용된다.
font-family : 글꼴 이름 [, 글꼴 이름, 글꼴 이름] ;
(ex) 텍스트 문단의 글꼴을 "굴림"으로 지정
p { font-family : 굴림; }
(ex) 텍스트 문단의 글꼴을 "맑은 고딕"으로 지정
p { font-family : "맑은 고딕"; }
* 글꼴이 여러 단어로 이루어진 경우 " "로 묶어 표시한다.
글자 크기 조절 : font-size 속성
- 픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할 수도 있다.
- 폰트 크기를 지정할 때 px 단위를 많이 사용한다.
- 크기를 따로 표기하지 않으면 기본값은 16px
font-size : 속성 값
속성 값
1. 절대 크기
- 브라우저에서 지정한 글자 크기
- xx-small | x-small | small | medium | large | x-large | xx-large 사용 가능
2. 상대 크기
- 부모 요소의 글자 크기 (font-size)를 기준으로 더 크게 표시하거나 더 작게 표시
- larger | smaller 사용 가능
3. 크기
- 브라우저와 상관없이 글자 크기를 직접 지정
4. 백분율
- 부모 요소의 글자 크기를 기준으로 해당하는 %를 계산하여 표시 (반드시 % 표기)
글자 굵기 지정 : font-weight
- 글자 굵기를 지정
font-weight : 속성 값
속성 값
1. normal
- 일반적인 형태, 기본 값이다.
2. bold | lighter | bolder
- 굵게 | 원래 굵기보다 더 가늘게 | 원래 굵기보다 더 굵게
3. 100 ~ 900
- 400은 normal, 700은 bold에 해당
- 숫자 값을 조절해 좀 더 세밀하게 글꼴 두께 조절 가능
글자 스타일 지정 : font-style
- 글자를 이탤릭체로 표현할지 여부를 결정한다.
font-style : 속성 값
속성 값
1. normal
- 일반적인 형태로 표시
2. italic
- 이탤릭체로 표시
- 기울어진 글꼴이 처음부터 디자인되어 있다.
3. oblique
- 이탤릭체로 표시
- 단지 글꼴을 기울어지게 표현한 것
(ex) <p> 태그를 이탤릭체로, class가 txt인 <p> 태그는 보통체로 표시하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-style</title>
<style>
p {font-style: italic;} /* 이탤릭체로 */
p.txt {font-style: normal;} /* p 요소 중 class=txt인 부분은 보통체로 */
</style>
</head>
<body>
<p>시드니, 호주</p>
<p class="txt">나폴리, 이탈리아</p>
</body>
</html>
'TIL > CSS' 카테고리의 다른 글
| [CSS] CSS의 주요 선택자 (0) | 2020.09.24 |
|---|---|
| [CSS] CSS 란? (0) | 2020.09.24 |
