CSS 텍스트 스타일 (글꼴, 문단, 목록, 표)

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.

또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

font-size에서 글자 크기를 조절하는 단위는 여러 가지가 있다. 우선 절대 크기, 상대 크기, 크기, 백분율로 나눌 수 있다.

절대크기 - 브라우저에서 지정한 글자 크기

상대 크기 - 부모 요소의 글자 크기를 기준으로 상대적인 크기 지정

크기 - 글자 크기를 직접 지정

백분율 - 부모 요소의 글자 크기를 기준으로 %로 표시

 

속성을 알아보면

키워드를 사용 - xx-small < x-small < small < medium < large < x-large < xx-large 순이다.

단위를 사용

em - 부모 요소에 지정한 글꼴의 대문자 M의 너비를 1em으로 기준을 한 비율값

rem - 문서 시작 부분에서 지정한 크기를 1rem으로 기준을 한 비율값

ex - 해당 글꼴의 소문자 x의 높이를 1ex로 기준한 비율값

px - 모니터의 1픽셀을 1px기준으로 한 비율값

pt - 일반 문서에서 사용되는 값

이 있는데 요즘에는 여러 화면은 고려해야해서 상대적인 em, rem단위가 많이 사용된다.

 

백분율의 경우 부모 요소의 글자 크기를 기준으로 지정하는데 부모 글꼴 크기가 단위로 지정되어 있어야 사용이 가능하다.

 

color 속성

16진수 - #000000~#ffffff까지 표시한다. #RRGGBB를 표시하여 각 색에 양을 말한다. 또한 #00ccff 등 2자리가 중복될 경우 #0cf로 줄여서 표기한다.

rgb, rgba - 주로 사용하는 값으로 rgb(r,g,b),rgba(r,g,b,0~1)로 표현을 한다. r,g,b의 색상 값을 0~255수로 지정하여 색에 양을 정하고 0~1에 값을 통해 투명도를 지정할 수 있다. (1은 진함, 0은 투명)

hsl, hsla - 색상, 채도, 명도를 지정할 수 있고 동일하게 투명도를 설정할 수 있다.

색상은 0~360도로 해서 지정할 수 있고 명도와 채도는 0~100%로 표기한다.

 

text-align 속성

start - 현재 텍스트 줄의 시작 위치에 맞추어 정렬

end - 현재 텍스트 줄 끝 위치에 맞추어 문단을 정렬

left - 왼쪽에 맞추어 문단을 정렬

right - 오른쪽에 맞추어 문단을 정렬

center - 가운데 맞추어 문단을 정렬

justify - 양쪽에 맞추어 문단을 정렬

match-parent - 부모 요소를 따라 문단을 정렬

 

text-shadow

<가로 거리> - 필수 속성으로 양숫값은 오른쪽으로 늘어난다.

<세로 거리> - 필수 속성으로 양숫값은 아래쪽으로 늘어난다.

<번짐 정도> - 양숫값은 모든 방향으로 퍼져나가고, 반대는 축소되어 보인다.

<색상> - 그림자 색상을 지정, 공백으로 구분해 여러 색상을 지정할 수도 있다.