[기본 개념] 1 | (1.1) 글꼴, 텍스트

728x90

[기본 개념] 1 | (1.1) 글꼴, 텍스트

1> 글꼴 관련 스타일

2> 텍스트 관련 스타일

3 목록 스타일

4 표 스타일

1 글꼴 관련 스타일

글꼴을 지정하는 font-family 속성

기본형

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

웹 문서에 사용될 글꼴을 지정한다. 글꼴을 지정할 때 한 가지 글꼴만 선택해도 되지만 글꼴이 없을 경우를 대비해 두, 세 번째 글꼴까지 생각해야 한다.

(ex. 글꼴 적용하기)

body { font-family: "맑은 고딕", 돋움, 굴림 }
// 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶음

글자 크기를 지정하는 font-size 속성

기본형

font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>

글자 크기를 px(픽셀), pt(포인트), 백분율(%)을 사용하여 지정할 수 있다.

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

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

<크기> 브라우저와 상관없이 글자 크기를 직접 지정

<백분율> 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시

키워드를 사용하여 글자 크기를 지정하는 방법은 아래 중 하나의 키워드를 사용하면 된다.

xx-small < x-small < small < medium < large < x-large < xx-large

단위를 사용하여 글자 크기를 지정하는 방법은 아래 표에 있는 단위들을 사용하면 되지만 음수값은 사용할 수 없다.

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

백분율을 사용하여 글자 크기를 지정하는 방법은 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 것이다. 하지만 백분율로 계산하려면 부모 요소의 글꼴 크기가 단위로 표현되어 있어야 한다.

이탤릭체로 글자를 표시하는 font-style 속성

기본형

font-style : normal | italic | oblique

이탤릭체로 표시할 때는 font-style 속성에서 주로 italic을 사용한다.

normal 기본값으로 일반적인 형태로 표시

italic 이탤릭체로 표시 (이탤릭체로 디자인된 폰트를 사용)

oblique 이탤릭체로 표시 (normal폰트를 단순히 기울기만 한 것)

글자 굵기를 지정하는 font-weight 속성

기본형

font-weight : normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900

글자 굵기를 지정할 때 font-weight 속성으로 예약어(normal, bolde, bolder)나 숫자값을 사용해 굵기를 지정한다.

normal 기본값, 보통 굵기

bold 굵게

bolder 원래보다 더 굵게

lighter 원래보다 더 가늘게

100 ~ 900 100은 가장 가늘게, 900은 가장 굵게

2 텍스트 관련 스타일

글자색을 지정하는 color 속성

기본형

color : <색상>

텍스트에서 글자색을 바꿀 때 color 속성을 사용한다. 속성값은 16진수나 rgb(또는 rgba), hsl(또는 hsla) 또는 색상 이름을 사용할 수 있다.

rgba를 사용하면 rgb로 표현한 색상에 불투명도를 지정할 수 있다. 1은 완전히 불투명한 것이고 숫자가 낮아질수록 투명해지다가 0되면 완전히 투명해진다.

(ex. rgba 표기법으로 불투명도 지정하기)

h1 { color: rgba(0, 0, 255, 0.5); }

텍스트를 정렬하는 text-align 속성

기본형

문단의 텍스트 정렬 방법을 지정할 때 text-align 속성을 사용한다. 왼쪽 정렬이 기본이다.

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

줄 간격을 조절하는 line-height 속성

줄 간격이 너무 좁거나 넓을 때 line-height 속성을 이용하여 가독성을 높인다.

(ex. 줄 간격 24px로 지정하기)

p { font-size: 12px; line-height: 24px; }
p { font-size: 12px; line-height: 2.0; }
p { font-size: 12px; line-height: 200%; }

텍스트의 줄을 표시하거나 없애주는 text-decoration 속성

밑줄을 긋거나 취소선을 표시할 때 text-decoration 속성을 사용한다.

종류	설명
none	텍스트에 줄을 표시하지 않음
underline	밑줄 표시
overline	윗줄 표시
line-through	취소선 표시

(ex. 텍스트에 줄 표시하기)

...
<body>
  <h1>text-decoration 속성</h1>
  <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>
</body>
...

텍스트에 그림자 효과를 추가하는 text-shadow 속성

기본형

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

강조해야 할 글자에 그림자 효과를 추가하려면 text-shadow 속성을 사용하면 된다.

종류	설명
<가로 거리>	텍스트부터 그림자까지의 가로 거리로 필수 속성이다. 양수값은 오른쪽, 음수값은 왼쪽에 그림자를 만든다.
<세로 거리>	텍스트부터 그림자까지의 세로 거리로 필수 속성이다. 양수값은 아래쪽, 음수값은 위쪽에 그림자를 만든다.
<번짐 정도>	그림자가 번지는 정도로 양수값은 모든 방향으로 퍼져 크게 표시되고, 음수값은 모든 방향으로 축소되어 보이며 기본값은 0이다.
<색상>	그림자 색상을 지정한다. 한 가지만 지정할 수 있고 공백으로 구분하여 여러 색상을 지정할 수 있으며 기본값은 현재 글자색이다.

텍스트의 대소문자를 변환하는 text-transform 속성

영문자를 표기할 때 대소문자를 원하는대로 바꿀 수 있으려면 text-transform 속성을 사용하면 된다. 한글에는 영향을 미치지 않고 영문자에만 적용된다.

종류	설명
none	줄을 표시하지 않는다.
capitalize	첫 번째 글자를 대문자로 변환
uppercase	모든 글자를 대문자로 변환
lowercase	모든 글자를 소문자로 변환
full-width	가능한 모든 문자를 전각 문자로 변환

글자 간격을 조절하는 letter-spacing, word-spacing 속성

글자와 글자 사이의 간격을 조절하려면 letter-spacing 속성을, 단어와 단어 사이의 간격을 조절하려면 word-spacing 속성을 사용하면 된다. px, em과 같은 단위나 백분율(%)로 크기값을 조절한다.

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)

728x90

'💠프로그래밍 언어 > CSS' 카테고리의 다른 글

[정리] 2 \| 박스 모델, 테두리, 여백, 레이아웃, 위치 지정 속성 정리 (0)	2022.05.13
[기본 개념] 2 \| (2.2) 여백 조절, 레이아웃, 위치 지정 (0)	2022.05.13
[기본 개념] 2 \| CSS 박스 모델 - (2.1) 박스 모델, 테두리 스타일 (0)	2022.05.06
[정리] 1 \| 글자와 텍스트 스타일 속성, 색상 지정 방법 정리 (0)	2022.04.11
[기본 개념] 1 \| (1.2) 목록, 표 (0)	2022.04.11