CSS요소 1 - 폰트 관련 속성
텍스트에 적용될 수 있는 css 요소들을 살펴보겠습니다
CSS를 적용할 HTML예제는 다음과 같습니다
<body>
<div>
<p class="default">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</body>
▶️ font-size
기본적으로 브라우저의 기본값은 16px이다 폰트의 크기를 변경할 수 있다
.text {
font-size: 20px;
}
- px, rem, rm의 단위를 많이 사용헤서 표현한다
▶️ font-style
글꼴을 시스템폰트로 설정할 수 있다
.text {
font-style: italic;
}
italic체로 변경하기 위해 많이 사용한다 (기울임)- 기본값은
normal
▶️ font-weight
텍스트의 굵기를 변경할 수 있다
.text {
font-weight: 500;
}
- 보통 100단위의 숫자를 사용함 (400 = normal)
- normale(400), bold(700), lighter(부모보다 얇게), bolder(부모보다 굴게) - 키워드로 입력할 수 있다
- 폰트마다 지원하는 굵기가 다를 수 있다
▶️ font-family
텍스트의 글꼴을 지정할 수 있다
p {
font-family: Verdana, Arial, sans-serif;
}
- 여러개가 값으로 들어간 경우 앞에서부터 차례대로 있는지 확인하고 있으면 사용하고 나머지는 무시한다
- 마지막에 있는 값은 지정한 폰트가 없을때 브라우저에서 해당 유형의 글꼴을 알아서 선택한다
▶️ line-height
줄의 높이를 의미
p {
line-height: 2.0;
}
- 폰트의 작성자가 기본값을 지정한다 (폰트마다 다를 수 있음)
- 값(양수, px, %)을 지정해서 모든 글들의 높이를 맞추는 것이 좋다
▶️ font
단축속성으로 여러 요소를 한줄로 표현할 수 있다 (6가지)
p {
font-size: 20px;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
font-weight: 700;
line-height: 2.0;
/* 위 코드와 동일 */
font: italic weight 20px/2.0 'Times New Roman', Times, serif;
}
- 필수속성:
font-size,font-family - 선택속성:
font-style,font-variant,font-weight,line-height style과weight는size보다 앞에 있어야 한다line-height는size뒤에/를 붙이고 표현한다- 작성을 하지 않으면
inital값이 된다
▶️ letter-spacing
글자간의 간격을 지정한다
p {
letter-spacing: 5px;
}
- 기본값
normal - 음수를 사용하면 글자끼리 겹치기도 함
- px, rem em 단위를 사용할 수 있다
- 폰트 제작자가 기본값을 지정해주었기 때문에 폰트마다 다르다
- 굳이 조절하지 않는 것이 좋다
▶️ word-spacing
단어 사이의 간격을 지정한다
p {
word-spacing: 5px;
}
- px, rem, em, % 단위를 사용할 수 있다
▶️ text-align
텍스트를 정렬할 수 있다
p {
text-align: left
}
- 많이 사용하는 값으로는 왼쪽 오른쪽, 중앙 정렬이 있다(
left,right,center) - block요소에서 변하는 길이에 맞춰서 정렬이 된다
▶️ text-indent
들여쓰기에 관련되어 제일 앞 부분을 어느정도 띄울지 지정할 수 있다
p {
text-indent: 20px;
}
- 상속이 된다
- block요소에만 적용이 된다
- % 단위도 사용이 가능하다
▶️ text-decoration
단축속성으로 글자의 장식을 지정한다
p {
text-decoration: underline skyblue 5px double
}
- 공백으로 구분
- 순서가 중요하지 않다
text-decoration-style |
solid, double, dooted, dashed, wavy |
text-decoration-line |
none, underline, overline, line-through 여러개를 동시에 사용할 수 있다 |
text-decoration-color |
텍스트의 색상을 지정한다 |
text-decoration-thickness |
장식의 두께를 지정한다 |
▶️ word-break
자신의 영역 이외로 나가게 될경우 줄바꿈을 하는데 단어가 분리되지 않는다 (줄바꿈의 기준 설정)
p {
word-break: break-all;
}
- 기본값일때 영어(
keep-all)의 경우 요소를 뚫고나감, 한글(break-all)은 줄바꿈 - 기본값은
normal break-all: 줄바꿈을 한다keep-all: 요소를 벗어나도 줄바꿈이 되지 않음
▶️ text-transform
p {
text-transform: uppercase
}
- 한글에는 적용할 수 없음
- 기본값은
none uppercase: 대문자lowercase: 소문자capitalize: 문장의 제일 앞글자만 대문자- 개발자도구로 보았을때는 소문자로 표시 (보여질때 css가 적용되어 대문자로 보임)