CSS.04. Text Style

글꼴 스타일: 텍스트에 적용되는 글꼴에 영향을 주고, 적용되는 글꼴, 크기, 굵기 등에 영향을 주는 속성

텍스트 레이아웃 스타일: 텍스트의 간격 및 기타 레이아웃 기능에 영향을 주는 속성으로, 선이나 문자 등 요소 사이의 간격이나 정렬되는 방식을 제어할 수 있음

 

글꼴 관련 스타일

텍스트 스타일: 사용하는 글자의 모양을 지정하는 글꼴 스타일

 

font-family 속성

글꼴을 지정

웹 문서에서 사용할 글꼴: font-family 속성으로 지정

 

font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

 

주의) 지정한 글꼴이 사용자 시스템에 없으면 의도한 글꼴이 표시되지 않음

 

두 단어 이상으로 된 글꼴 이름은 " "안에 표시

 

font-size 속성

글자 크기를 지정

글자 크기의 단위는 px나 pt등으로 지정(백분율도 가능)

 

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
1. 브라우저에서 지정한 글자 크기
2. 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
3. 브라우저와 상관없이 글자 크기를 직접 지정
4. 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시

 

키워드를 사용한 글자 크기 지정
xx-small < x-small < small < medium < large < x-large < xx-large

 

단위를 사용해 글자 크기를 지정(주로 사용)

em	부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
rem	문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
ex	해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정
px	모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정
pt	포인트라고 하며, 일반 문서에서 많이 사용

 

 

백분율을 사용한 글자 크기 지정

부모 요소의 글자 크기를 기준으로 계산하여 지정함

부모 요소의 글자 크기가 단위로 표현되어 있어야 함

 

font-style 속성

italiic: 이텔릭체(기울임꼴)로 글자 표시

 

font-weight 속성

글자 굵기를 지정

예약어(normal, bold, bolder)나 숫자값을 이용해 굵기를 지정

100~900 사이의 값 중에서 400이 normal 700이 bold에 해당

숫자를 사용하면 굵기를 세밀하게 조절 가능

 

텍스트 관련 스타일

텍스트 스타일: 글자와 단어, 문단에 사용하는 스타일

 

color 속성

글자색 지정

텍스트의 글자색을 변경

색상 이름(영문)이나 16진수 rgba, hsl등을 사용

 

text-aligin 속성

텍스트 정렬

start	현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬
end	현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬
left	왼쪽에 맞추어 문단을 정렬
right	오른쪽에 맞추어 문단을 정렬
center	가운데 맞추어 문단을 정렬
justify	양쪽에 맞추어 문단을 정렬
match-parent	부모 요소에 따라 문단을 정렬

정렬 방법을 지정하지 않을 경우 왼쪽 정렬이 기본

 

line-height 속성

줄 간격 조절

정확한 단위로 크깃값 지정 OR 문단의 글자 크기를 기준으로 백분율 지정

 

line-hight 속성을 이용해 텍스트를 세로 가운데에 정렬 가능

>> line-hight  속성값을 영역의 height값과 일치하게 지정

 

text-decoration 속성

텍스트의 줄을 표시 / 제거함

<p style="text-decoration:none">none</p> : 제거
<p style="text-decoration:underline">underline</p> : 밑줄
<p style="text-decoration:overline">overline</p> : 윗줄
<p style="text-decoration:line-through">line through</p> : 취소선

 

text-shadow 속성

텍스트에 그림자 추가

text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

<가로 거리>	텍스트부터 그림자까지의 가로 거리 : 필수 속성 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자 생성
<세로 거리>	텍스트부터 그림자까지의 세로 거리 : 필수 속성 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자 생성
<번짐 정도>	그림자가 번지는 정도 양숫값은 모든 방향으로 퍼져나감 : 크게 표시 음숫값은 그림자가 모든 방향으로 축소되어 표시 기본값 : 0
<색상>	그림자 색상을 지정 한 가지 OR 공백을 두고 여러 색상 지정 가능 기본값 : 현재 글자색

 

text-transform 속성

영문자의 대소문자 변경 / 전각문자 변환

none	줄을 표시하지X
capitalize	첫 번째 글자를 대문자로 변환 (Hello)
uppercase	모든 글자를 대문자로 변환 (HELLO)
lowercase	모든 글자를 소문자로 변환 (hello)
full-width	가능한 한 모든 문자를 전각 문자로 변환

전각 문자: 가로와 세로의 길이 비율이 같은 글자

 

letter-spacing & word-spacing

글자 간격을 조정

letter: 글자와 글자 사이 간격을 조절

word: 단어와 단어 사이 간격을 조절

주로 letter-spacing을 사용해 자간 조절

px, em이나 % 단위로 크기값 조절

 

목록 스타일

list-style-type 속성

불릿 모양과 번호 스타일을 지정

순서 없는 목록>>앞에 불릿 모양

순서 있는 목록>>번호 스타일 

disc	채운 원 모양	●
circle	빈 원 모양	○
square	채운 사각형 모양	■
decimal	1부터 시작하는 10진수	1, 2, 3, …
decimal-leading-zero	앞에 0이 붙는 10진수	01, 02, 03, …
lower-roman	로마 숫자 소문자	i, ii, iii, …
upper-roman	로마 숫자 대문자	I, II, III, …
lower-alpha / lower-latin	알파벳 소문자	a, b, c, …
upper-alpha / upper-latin	알파벳 대문자	A, B, C, …
none	지정​

 

list-style-image 속성

불릿 대신 이미지를 사용

list-style-image: <url(이미지 파일 경로)> | none

 

list-style-position 속성

목록을 들여쓰는 속성

inside	불릿 OR 번호가 실제 내용이 시작되는 위치보다 들여쓰기 효과 적용
outside	기본값

 

list-style 속성

목록 속성을 한꺼번에 표시

list-style-type, image, position 속성을 한꺼번에 표시 가능

 

표 스타일

표의 크기, 테두리, 여백 등의 스타일 지정 가능

 

caption-side 속성

표 제목의 위치를 정해주는 속성

표 제목은 <caption> 태그를 이용해 캡션으로 표시

top	캡션을 표 윗부분에 표시 : 기본값
bottom	캡션을 표 아랫부분에 표시

 

border 속성

표 테두리를 그려 주는 속성

표 바깥 테두리와 셀 테두리를 각각 지정

 

border-spacing 속성

셀 사이의 여백을 지정

표와 셀에 따로 테두리를 지정하면 셀과 셀 사이에 여백이 생김

 

border-spacing: 수평거리 수직거리

 

border-collapse 속성

표와 셀 테두리를 합쳐주는 속성

collapse	표와 셀의 테두리를 합쳐 하나로 표시
separate	표와 셀의 테두리를 따로 표시 : 기본