Css 텍스트 관련 스타일 정리, 쉽게 알아보자
안녕하세요 엘빈입니다. 웹문서를 구성하는 내용 중 가장 기본이 되는 것은 텍스트인데요. Css에서도 텍스트 스타일과 관련하여 많은 속성들을 제공하고 있습니다. 대표적으로 글꼴, 글자 크기, 굵기 등이 있는데요. 이번 포스팅에서는 기본적으로 사용되는 텍스트 관련 스타일에 대해서 알아보겠습니다.
font-family
#family{font-family: 굴림, 맑은 고딕, 돋움;}
Font-family는 글꼴을 지정하는 속성입니다. 속성값을 지정하는데 주의할 점은 여러 글꼴을 지정하더라도 사용자 시스템에 설치되어 있지 않는다면 화면에 표시할 수 없다는 점입니다. 따라서 위 코드와 같이 여러 개의 글꼴을 한꺼번에 지정합니다.
최우선적으로 굴림 글씨체를 적용하고 글씨체가 없다면 맑은 고딕, 돋움 순서대로 적용합니다. 보통 전체 선택자나 body 태그 선택자로 기본 글씨체를 설정합니다.
font-size
#size {font-size: 15px;}
글씨 크기를 조정합니다. 아래 표와 같이 글씨 크기 단위는 4가지가 있습니다.
| 단위 | 설명 |
| Em | 해당 대문자 글꼴 m의 너비를 기준으로 크기 조절 |
| Ex | 해당 글꼴의 소문자 x 높이 기준 |
| Px | 모니터에 따라 상대적 크기 |
| Pt | 포인트 |
주로 px 단위를 많이 사용합니다. 폰트 크기가 고정되어 어림잡아 보기에 쉽기 때문입니다. 하지만 모바일 기기로 접속하는 경우까지 고려한다면 em 단위를 사용하는 것이 좋습니다.
Em은 고정된 크기가 아닌 글꼴 대문자 M을 기준으로 하기 때문에 모바일, Pc 상관없이 어울리게 크기가 설정됩니다.
font-weight
#weight{font-weight: bold;}
글씨 굵기를 조절합니다. 속성값으로는 normal,bold, bolder 순으로 굵어지며 100부터 900까지 숫자로 지정할 수 있습니다.
font-style
#style {font-style: italic;}
글자 스타일을 지정할 수 있습니다. 속성값으로는 italic, oblique가 있으며 문장이 기울어지는 효과를 가지고 있습니다.
color
#color {color:red;}
글자 색을 지정할 수 있습니다. 속성값으로 영어 혹은 rgb 16진수를 넣으면 됩니다.
text-decoration
#decoration {text-decoration: overline;}텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있습니다. 속성 값은 다음과 같습니다.
text-shadow
#shadow {text-shadow: 5px 4px 3px black;}
텍스트에 그림자 효과를 추가합니다. 가로,세로,번짐 정도, 색상을 차례대로 지정합니다. 그림자 효과는 텍스트를 좀더 입체감있게 보이게 함으로서 생동감이 더해집니다.
letter-spacing
#spacing {letter-spacing: 0.3em;}
텍스트 문자간 공백을 조절합니다. 글자 사이사이의 간격을 숫자 속성값으로 지정할 수 있습니다. 크기 단위는 가능한 em을 사용해야 글꼴에 따라 자동으로 조정됩니다.
위의 코드들을 style.css에 모두 작성한 후 html 파일에 적용시켜봅시다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>첫 홈페이지 만들기 프로젝트</title>
<link href="style_portal.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="family">font-family입니다</p>
<p id="size">font-size입니다</p>
<p id="weight">font-weight입니다</p>
<p id="style">font-style입니다</p>
<p id="color">color입니다</p>
<p id="decoration">text-decoration입니다</p>
<p id="shadow">text-shadow입니다</p>
</body>
</html>
사진과 같이 표시되는 것을 볼 수 있습니다.
마무리
지금까지 텍스트 관련 css 스타일 속성에 대해서 알아보았는데요. 위에 소개드린 8가지 속성은 정말 많이 사용하니 꼭 기억하시기 바랍니다.
포스팅 읽어주셔서 감사합니다.
'개발 > HTML_CSS' 카테고리의 다른 글
| 2개 select 태그 연동, 선택시 옵션이 다르게 표시되는 방법 (0) | 2020.04.05 |
|---|---|
| Css 문단 관련 스타일 속성 정리, 쉽게 배우자 (0) | 2020.01.19 |
| Css 속성 우선 순위 정리, 간단히 알아보자 (0) | 2020.01.19 |
| Css 기본 선택자 정리 및 사용법 정리, 자주 쓰이는 것 위주로 (0) | 2020.01.18 |
| CSS 기초적인 내용 정리, 쉽게 이해해보자! (0) | 2020.01.18 |
