font-family 속성
글꼴을 지정하는 속성입니다.
| font-family(필수) | 글꼴의 이름을 지정 |
font-family: family-name | generic-family ( | initial | inherit );- family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다.
- generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙입니다. 예를 들면 아래와 같이 선언하여 사용할 수 있습니다.
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif; 가장 먼저 Helvetica를 사용하고, 이를 사용할 수 없을 때 Dotum을 사용하는 방식으로 우선순위에 따라 차례대로 적용 됩니다. 만약 "abc 가나다 123" 이라는 글자가 있다면, "abc"와 "123"은 Helvetica로 표현이 되고, "가나다"는 Dotum으로 표현이 됩니다.
"가나다"가 Dotum으로 표현된 이유는 Helvetica는 한글을 지원하는 폰트가 아니기 때문입니다.
line-height 줄 간격 정하기 (상속가능)
line-height: 숫자입력
line-height: 2 /기존보다 *2배 늘려라/
normal : 보통 브라우저 크기 기준이나, 보통 16px로 기본값 부여
font-size : 글자 크기
16px(기본값) = 1em
em : 부모 요소에 상대적인 값을 취함
rem : 최상위 html 요소에 상대적인 값을 취함, 특별한 선언이 없다면 16px 기본
Q. .section 요소의 font-size로 알맞은 것을 고르시오.
<html>
... 중략 ...
<div class="wrap">
<div class="content">
<div class="section"></div>
<div class="article"></div>
<div class="footer"></div>
</div>
</div>
... 중략 ...
</html>
html { font-size: 16px; }
.wrap { font-size: 1.5rem; }
.section { font-size: 1.5em; }
- 15px
- 16px
- 24px
- 36px
답:4번(36px)
rem은 최상위 요소의 상대적인 값을 취한다 했고, em은 그 바로 윗 부모의 상대적인 값을 취함.
font-weight : 글자 굵기지정
Q. normal, bold와 같은 굵기로 표현되는 숫자값의 순서로 알맞은 것을 고르시오
- 100, 400
- 300, 600
- 400, 700
- 400, 900
답: 3번
font-style 글자 기울기, 일반상태 등 전체적 모양 지정
| normal | font-family 내에 분류된 기본 값 |
| italic | italic 스타일로 표현합니다.(기울기체) |
font-variant 속성 : 작은 대문자로 변경
글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있습니다.
기본 값 : normal
축약형을 선언
- font-size와 font-family는 반드시 선언해야 하는 필수 속성입니다.
- 빠진 속성이 있다면 기본 값으로 지정됩니다.
- 각 속성의 선언 순서를 지켜야 합니다.
vertical-align : 수직 정렬
이때 주의하실 점은 block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있습니다.
따라서 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 적용되지 않습니다.
text-align : 글자 위치 정하기 (left, right, center, justify(양쪽 들여쓰기))
inline 요소를 정렬할 때는 text-align을 사용. // block 요소를 정렬할 때는 margin을 사용
text-align과 display의 관계
- text-align은 inline-level에 적용
- text-align은 block-level에 적용할 수 없음
그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까요?
박스모델 챕터에서 다룬 margin의 auto 값을 이용해서 하시면 됩니다.
- 가운데 정렬 인라인 요소 : text-align: center / 블럭 요소 : margin: 0 auto
들여쓰기: text-indent (상속가능하니 주의필요)
text-decoration : 글자 근처 줄긋기(밑줄, 취소선 등)
text-decoration의 기본 값 : none currentColor solid
<단어관련 속성들>
1.white-space 속성
요소 안에 공백을 어떻게 처리할지 지정하는 속성입니다. (문단 공백처리 결정)
기본 값 : normal
| normal | 공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 기본 값 |
| nowrap | 공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음. |
2.letter-spacing 속성(상속)
자간을 지정하는 속성입니다.(글자간의 공간처리 결)
| normal | 기본 값 |
| length | 길이만큼 자간을 지정. 음수 허용 |
3.word-spacing 속성
단어 사이의 간격을 지정하는 속성입니다.(띄워쓰기 공간처리 결정)
| normal | 기본 값 |
| length | 길이만큼 단어 사이의 간격을 지정. 음수 허용 |
4.word-break 속성(상)
단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성입니다.
기본 값 : normal
< 속성 값 >
| normal | 기본 값. 중단점은 공백이나 하이픈(-)(CJK는 음절) |
| break-all | 중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행 |
| keep-all | 중단점은 공백이나 하이픈(-)(CJK는 그 외 기호도 포함) |
5.word-wrap 속성
요소를 벗어난 단어의 줄바꿈을 지정하는 속성입니다.
기본 값 : normal
| normal | 기본 값. 중단점에서 개행 |
| break-word | 모든 글자가 요소를 벗어나지 않고 강제로 개행 |
'📚HTML, CSS > 이론 정리' 카테고리의 다른 글
| CSS 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 (0) | 2023.01.27 |
|---|---|
| 웹 UI개발 정리[ 레이아웃] (0) | 2023.01.27 |
| 웹 UI개발 정리[ css(5)box-model] (0) | 2023.01.26 |
| 웹 UI개발 정리[틀린 것만 복습| html ~css(4)](가상, 선택자, 케스케이딩 등) (0) | 2023.01.25 |
| CSS 배경 속성, 전환 효과, 미디어 쿼리 (0) | 2023.01.25 |