이번 단원에서는 텍스트의 시각적 효과에 대해 다룬다. 따라서 글씨의 크기, 색, 글씨체 그리고 왼쪽, 오른쪽 정렬과 같은 내용이 주를 이룬다.
지금 내가 쓰고있는 이 글에서도 글씨의 색을 바꾸거나 필기체를 바꾼다거나 하는 옵션이 있는데 그런 버튼을 클릭하게 되면 css 상에서 변하도록 설정해 놓은 것 같아서 신기했다.
텍스트의 효과를 바꾸는 속성
- font-family (글꼴 지정) : 주로 <p>태그와 같은 텍스트를 사용하는 요소에서 사용된다. 기본형은 font-family : <글꼴 이름> | [<글꼴이름>,<글꼴 이름>] 으로 사용
→ 글꼴을 2개 이상 지정할 때에는 사이에 쉼표를 넣어 사용
→ 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 글자가 깨질 수 있음
- font-size (글씨 크기 지정) : 글자 크기의 단위는 px이나 pt로 지정할 수 있으며 백분율로 사용할 수 있다. 기본형은 font-size : <절대크기> | <상대크기> | <크기> | <백분율>
→ 예전에는 절대크기인 px, pt를 많이 사용했지만 모바일 기기까지 고려해야하는 요즘은 em이나 rem을 많이 사용
- font-style (이탤릭체로 글자를 표기): 글자의 필기체를 변경하는 속성. 기본형은 font-style : normal | italic | oblique 이다,
→ 속성값은 italic과 oblique가 있는데 litalic은 기울여진 글꼴을 처음부터 다듬어서 표현하지만 oblique는 단지 글자를 기울이기만 하기 때문에 italic을 많이 사용
- font-weight (글자 굵기를 지정) : 미리 만들어진 예약어 (normal, bold)나 숫자값을 사용해 굵기를 지정할 수 있음
→ 100부터 900 사이의 굵기를 지정할 수 있으며 원래보다 더 굵게 / 가늘게 하는 속성도 있다.
웹 폰트를 바꾸는 태그
: 웹에서 제공하는 폰트를 사용하는 방식 사용자가 해당 폰트를 가지고 있지 않을 때 사이트에 접속한다면 자동으로 폰트가 다운받아진다
다음은 구글 웹 폰트를 사용하는 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 폰트 사용하기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
h1{
font-family: 'Jua', sans-serif;
}
</style>
</head>
<body>
<h1>웹 폰트 테스트</h1>
<p class="wfont">Using Web Fonts</p>
</body>
</html>텍스트 관련 스타일 속성
- color : <색상>
- 16진수로 표현하는 방법 : # 기호 다음에 6자리의 16진수로 표현. 앞에서 두 자리씩 #RRGGBB 로 표현하며 각 RGB는 빨강 초록 파랑의 양을 넣는다.
- 영문명으로 표현하는 방법 : 널리 알려진 red, blue와 같은 영문명을 이용해 색을 나타낸다.
- hsla을 이용하여 표기하는 방법 : hsl은 hue(색상), saturation(채도), lightness(명도), alpha(불투명도)의 줄임말이며 아래와 같은 원에서 각을 색으로 표현하고 채도와 명도, 불투명도는 퍼센트% 로 나타낸다.
- text-align : <정렬 방향>
| 정렬 방향의 종류 | 설명 |
| start | 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬 |
| end | 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬 |
| left | 왼쪽에 맞추어 문단을 정렬 |
| right | 오른쪽에 맞추어 문단을 정렬 |
| center | 가운데에 맞추어 문단을 정렬 |
| justify | 양쪽에 맞추어 문단을 정렬 |
| match-parent | 부모요소에 맞추어 문단을 정렬 |
- line-height : <줄간격>
→ 세로 줄 간격의 정렬 방향을 설정하는 방법은 위의 가로 줄 정렬 방향과 같으며 속성이름 또한 같다.
- text-decoration : <줄표시>
| 줄표시 종류 | 설명 |
| none | 텍스트에 줄을 표시하지 않음 |
| underline | 밑줄 표시 |
| overline | 윗줄 표시 |
| line-through | 취소선표시 |
- text-shadow : <none> | <가로거리> <세로거리> <번짐정도> <색상>
| 종류 | 설명 |
| <가로거리> | 텍스트부터 그림자까지의 가로거리로 필수속성이다. 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 표시한다. |
| <세로거리> | 텍스트부터 그림자까지의 세로거리로 필수속성이다. 양숫값은 글자의 아래쪽, 음숫값은 글자 위쪽에 그림자를 표시한다. |
| <번짐정도> | 그림자가 번지는 정도이다. 양숫값을 사용하면 그림자가 모든 방향으로 퍼져나가고 음숫값을 사용하면 모든 방향에로 축소되어 보인다. |
| <색상> | 그림자 색상 지정. 한 가지만 지정할 수도 있고 여러가지를 지정할 수도 있음 |
- text-transform : 텍스트의 대소문자 표시
| 종류 | 설명 |
| none | 줄을 표시하지 않음 |
| capitalize | 첫 번쨰 글자를 대문자로 변환 |
| uppercase | 모든 글자를 대문자로 변환 |
| lowercase | 모든 글자를 소문자로 변환 |
| full-width | 가능한 모든 글자를 전각문자로 변환 |
- letter-spacing : 글자 간격 조정
- word-spacing : 단어 간격조정
→ px, em과 같은 단위나 퍼센트로 크기값을 조절
반응형
'Front end > CSS' 카테고리의 다른 글
| 이미지와 그라데이션 효과로 배경 꾸미기 (2) | 2022.10.02 |
|---|---|
| 레이아웃을 구성하는 css 박스모델 (2) (1) | 2022.09.11 |
| 레이아웃을 구성하는 css 박스모델 (1) (2) | 2022.09.09 |
| 텍스트를 표현하는 다양한 스타일 (2) (0) | 2022.09.01 |
| 웹 문서에 디자인 입히기 (0) | 2022.08.20 |
댓글