Chapter 07

7-1 글꼴 관련 스타일

글꼴 지정하는 font-family 속성

웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다. 이 속성은 <body> 태그를 비롯한 텍스트를 사용하는 요소에서 주로 사용한다.

/* 기본형 */ font-famliy : <fontname> | [<fontname>, <fontname>]

웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시된다. 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시된다. 따라서 이를 대비하여 두 번째, 세 번째 글꼴까지 생각해야한다.

글꼴 이름을 2개 이상 지정할 때는 두 글꼴 사이에 쉼표를 넣어 구분한다.

/*ex*/ { font-family: "맑은 고딕", 돋움, 굴림 }

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

글자 크기는 font-size 속성을 사용하여 조절할 수 있다. 글자 크기의 단위는 px나 pt등으로 지정할 수 있고 백분율을 사용할 수도 있다.

/* 기본형 */ font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>

키워드를 사용하여 글자 크기 지정하기

글자 크기로 사용하도록 미리 약속해 놓은 키워드 중에서 하나를 사용할 수 있다. 사용할 수 있는 값을 크기 순서로 나열하면 다음과 같다.

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

단위를 사용하여 글자 크기 지정하기

CSS에서는 키워드보다 단위를 사용해서 글자 크기를 직접 지정한다. 사용하는 단위는 px, pt, em 등이며 음숫값은 사용할 수 없다. 예전에는 절대크기 단위를 주로 사용했지만, 모바일기기까지 지원해야하기 때문에 최근에는 em이나 rem 등 상대크기 단위를 주로 사용한다.

종류

설명

부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준으로 한 후 비율값을 지정한다.

rem

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

해당 글꼴 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정

모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정

포인트, 일반 문서에서 많이 사용.

백분율을 사용하여 글자 크기 정하기

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

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

글자를 이텔릭체로 표시할 때는 font-style 속성을 사용한다. 이텔릭체로 바꾸는 속성값은 italic과 oblique가 있는데, 웹에서는 주로 italic을 사용한다.

italic은 기울여진 글꼴이 처음부터 디자인되어 있는 반면, oblique는 원래 글꼴을 단지 기울여지게 표시한다. 대부분 기울어진 형태에 맞게 글꼴이 다듬어져 있기 때문에 주로 전자를 쓴다.

/*기본형*/ font-style: nomal | italic | oblique

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

글자 굵기를 지정하는 속성은 font-weigt으로 웹 문서를 작성할 때 자주 사용한다. 미리 만들어진 예약어나 숫잣값을 사용해 굵기를 지정할 수 있다. 100~900에서 400은 normal, 700은 bold에 해당한다.

/*기본형*/ font-weight: nomal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900

nomal : 기본값, 보통 굵기 bold : 굵게 bolder : 원래보다 더 굵게 lighter : 원래보다 더 가늘게 100 ~ 900 : 값의 굵기를 표현하여 100은 가장 가늘게, 900은 가장 굵게

7-2 웹 폰트 사용하기

웹 폰트란

웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야 한다. 기존에 가지고 있던 웹 폰트를 사용했다면 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드 해야한다. 웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 다운로드된다. 결국 사용자 시스템에 없는 글꼴이라도 웹 문서를 만들 때 사용한 글꼴을 내려받은 후 표시하므로 웹 제작자가 의도한 대로 텍스트를 보여줄 수 있다.

웹 폰트 업로드하고 사용하기

요즘에는 인터넷 사이트에서 제공해 주는 경우에는 주로 링크해서 사용하지만, 그렇지 않은 글꼴이나 자신이 가지고 있는 TTF 폰트를 변환해서 사용한다면 직접 업로드해서 사용해야 한다. 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기엔 적절하지 않다. 그래서 웹에 적합한 여러 글꼴이 등장했으며, 그중에서 EOT, WOFF, WOFF2 파일을 많이 사용한다.

웹 폰트가 준비되었다면 @font-face 속성을 사용하여 웹 폰트를 정의한다.

/* 기본형 */
@font-face {
	font-family : <fontName>;
	src: <fontFile>[<fontFile>, <fontFile>, ...];
}

font-family 속성을 사용해 글꼴 이름을 만든다. 앞으로 이 글꼴은 이런 이름으로 사용하겠다는 것이다. 되도록이면 글꼴 파일 이름과 같은 이름을 사용하는 것이 좋다. src 속성에서는 사용할 글꼴 파일의 경로를 지정한다. 글꼴 파일의 경로를 지정하기 전에 local()문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인해야 한다. 사용자 시스템에 글꼴이 있다면 해당 글꼴을 사용하면 되지만, 없다면 WOFF 포멧으로 된 글꼴을 내려받아야 한다. 그리고 TTF 포멧은 다른 형식 파일보다 용량이 커서 대부분의 모던 브라우저에서 지원하는 WOFF 포멧을 먼저 선언하고 TTF 포멧은 그 후에 선언한다.

/*예제*/
<style>
	@font-face {
		font-family : 'Ostrich';
		src : local('Ostrich Sans'),
			url('fonts/ostrich-sans-bold.woff') format('woff'),
			url('fonts/ostrich-sans-bold.ttf') format('truetype'),
	}

글자색을 지정하는 color 속성

웹 문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때는 color 속성을 사용한다. color를 사용할 수 있는 속성값은 16진수나 rgb, hsl 또는 색상 이름이다.

/*기본형*/ color: <색상>

16진수로 표현하는 방법

웹 문서의 CSS에서 색상을 표현하는 첫 번째 방법은 #ffff00처럼 # 기호 다음에 6자리의 16진수로 표시하는 것이다. 포토샵 같은 그래픽 프로그램에서도 색상을 지정할 때 사용하는 가장 기본적인 방법이다.

만약 색상값이 #0000ff처럼 두 자리씩 중복될 경우 #00f로 줄여서 표기할 수도 있다.

hsl과 hsla로 표현하는 방법

CSS3에서는 hsl을 사용해서 색상을 표기할 수 있다. hsl은 hue(색상), saturation(채도), lightness(명도)의 준말이다. hsla는 hsl에 alpha(불투명도)를 추가한 것을 의미한다.

색상을 영문명으로 표현하는 방법

색상을 표기하는 또 다른 방법으로 red, yellow 등 잘 알려진 색상 이름을 사용하는 것이다. 이름을 모두 기억하기는 쉽지 않으므로 자주 사용하는 색상일 경우 색상 이름 그대로 사용하기도 한다.

rgb와 rgba로 표현하는 방법

vscode로 색 추출하기 색상값을 입력하고 마우스를 가져다대면 위의 화면이 뜨는 데, 이때 원하는 색을 선택하면 알아서 rgb/rgba 값으로 바꿔서 파일에 입력해준다. 위의 값이 뜨는 부분을 클릭할 시 원하는 형태로 바꿀 수 있다.

CSS애서는 색상을 지정할 때 주로 rgb와 rgba로 표현한다. rgba에서 a는 불투명도의 값을 나타내며, 0~1의 값 중에서 사용할 수 있다. 1은 완전히 불투명한 것, 0은 완전히 투명한 것이다.

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

text-align 속성은 문단의 텍스트 정렬 방법을 지정한다. text-align 속성을 사용하면 워드나 한글 문서에서 흔히 사용하는 정렬들을 웹 문서에서 지정할 수 있다. 사용할 수 있는 속성값은 다음과 같다.

/* 기본형 */ text-align: start | end | left | right | center | justify | match-parent

종류

설명

start

현재 텍스트 줄의 시작 지점에 맞추어 문단을 정렬한다.

end

현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다.

left

왼쪽에 맞추어 문단을 정렬한다.

right

오른쪽에 맞추어 문단을 정렬한다.

center

가운데에 맞추어 문단을 정렬한다.

justify

양쪽에 맞추어 문단을 정렬한다.

match-parent

부모 요소를 따라 문단을 정렬한다.

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

한 문단이 두 줄을 넘으면 줄 간격이 생긴다. 줄 간격이 너무 좁거나 넓으면 가독성이 떨어진다. 이때 line-height 속성을 이용하면 줄 간격을 원하는 만큼 조절할 수 있다. 줄 간격은 정확한 크기로 크깃값을 지정하거나, 문단의 글자 크기를 기준으로 몇 배수인지 백분율로 지정할 수도 있다. 보통 줄 간격은 글자 크기의 1.5~2배면 적당하다. 다음은 줄 간격이 모두 24px인 경우이다.

/* 예시 */ font-size: 12px; line-height: 24px;
/* 예시 */ font-size: 12px; line-height: 2.0;
/* 예시 */ font-size: 12px; line-height: 200%;

택스트의 세로정렬을 위해서는 line-height 속성을 이용한다.

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

text-decoration 속성은 텍스트에 밑줄을 긋거나 취소선을 표시한다. 그리고 텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생성되는데, text-decoration 속성을 사용하면 없앨 수 있다. text-decoration에서 사용할 수 있는 속성값은 다음과 같다.

/* 기본형 */ text-decoration: none | underline | overline | line-through

종류

설명

none

텍스트에 줄을 표시하지 않음

underline

밑줄 표시

overline

윗줄 표시

line-through

취소선 표시

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

CSS를 사용하여 텍스트에 그림자 효과도 줄 수 있다. 그림자 효과는 본문에서 자주 사용하면 지저분해 보이지만, 제목 등 강조해야 할 글자에 사용하면 눈에 띄게 만들 수 있다. text-shadow 속성은 텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체감 나게 보여줄 수 있다.

/* 기본형 */ text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

종류

설명

<가로 거리>

텍스트부터 그림자까지의 가로 거리로 필수 속성이다. 양숫값은 글자의 오른쪽, 음숫값은 왼쪽에 그림자를 만든다.

<세로 거리>

텍스트부터 그림자까지의 세로 거리로 필수 속성이다. 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자를 만든다.

<번짐 정도>

그림자가 번지는 정도. 양숫값을 사용하면 그림자가 모든 방향으로 퍼저나가며, 그림자가 크게 표시된다. 반대로 음숫값은 그림자가 모든 방향으로 축소되어 보인다. 기본값은 0이다.

<색상>

그림자 색상을 지정한다. 한 가지의 색상만 지정할 수도 있고, 공백으로 구분해 여러 색상을 지정할 수도 있다. 기본값은 현재 글자색이다.

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

영문자를 표기할 때 텍스트의 대소 문자를 원하는 대로 바꿀 수도 있다. text-transform 속성은 텍스트를 대소 문자 또는 전각 문자로 변환함다. 이 속성은 영문자에만 적용된다.

종류

설명

capitalize

첫 번째 글자를 대문자로 변환한다.

uppercase

모든 글자를 대문자로 변환한다.

lowercase

모든 글자를 소문자로 변환한다.

full-width

가능한 한 모든 문자를 전각 문자로 변환한다.

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

letter-spacing 속성은 글자와 글자 사이의 간격을 조절하고 word-spacing 속성은 단어와 단어 사이 간격을 조절하는데, CSS에서는 주로 letter-spacing 속성을 이용해 자간을 조절한다. 이 2가지 속성은 px, em과 같은 단위나 퍼센트로 크깃값을 조절한다.

7-4 목록 스타일

불릿 모양과 번호 스타일을 지정하는 `list-style-type` 속성

순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있고, 순서 목록에는 번호 스타일을 지정할 수 있다. 이때 list-style-type 속성을 사용하여 불릿의 모양이나 번호 스타일을 지정할 수 있다.

종류

설명

예시

disc

채운 원 모양

●

circle

빈 원 모양

○

square

채운 사각형 모양

■

decimal

1부터 시작하는 10진수

1, 2, 3, ...

decimal-leading-zero

앞에 0이 붙는 10진수

01, 02, ...

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-type 속성에서 바꿀 수 있는 불릿의 유형은 3가지 뿐이어서 단조로운 편이다. 이때 list-style-image 속성을 이용하면 불릿을 원하는 이미지로 바꿀 수 있다. 이 경우 불릿에 들어갈 이미지는 불릿 크기만큼 작아야 좋다.

/* 기본형 */ list-style-image: url('images/dot.png'); /* 불릿으로 사용할 이미지 */

목록을 들여 쓰는 `list-style-position` 속성

list-style-position 속성을 사용하면 불릿이나 번호의 위치를 들여 쓸 수 있다. 속성값으로 inside를 지정하면 불릿이나 번호가 실제 내용이 시작되는 위치보다 좀 더 안으로 들여써진 듯한 효과가 난다. 이 속성은 텍스트 문단 사이에 있는 목록을 더 쉽게 구분해 준다.

/* 기본형 */ list-style-position: inside | outside;

종류

설명

inside

불릿이나 번호를 기본 위치보다 안으로 들여쓴다.

outside

기본값이다.

목록 속성을 한꺼번에 표시하는 `list-style` 속성

list-style 속성을 사용하면 list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시할 수 있다. 그래서 다음과 같이 소스를 간단히 줄여서 사용할 수 있다.

/* 예시 */ list-style: lower-alpha inside;

7-5 표 스타일

표 제목의 위치를 정해 주는 `caption-side` 속성

표 제목은 <caption> 태그를 이용해 캡션으로 표시합니다. 캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 이용하면 표 아래쪽으로 옮길 수 있다.

종류

설명

top

캡션을 표 윗부분에 표시한다. 기본값이다.

bottom

캡션을 표 아랫부분에 표시한다.

표에 테두리를 그려 주는 `border` 속성

표 테두리는 border 속성을 사용하는데, 표 바깥 테두리와 셀 테두리를 각각 지정한다.

/* 기본형 */ border: <선 두께> <선 형태> <색상>

셀 사이의 여백을 지정하는 `border-spacing` 속성

표와 셀에 따로 테두리를 지정하면 셀과 셀 사이에 여백이 조금 생긴다. border-spacing 속성을 사용하면 셀과 셀 사이의 여백을 조절할 수 있다.

표와 셀 테두리를 합쳐 주는 `border-collapse` 속성

<table> 태그와 <td> 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기며 두 줄로 표시된다. 이때 두 줄로 그냥 둘 것인지, 아니면 합쳐서 하나로 표시할 것인지 결정하는 것이 border-collapse 속성이다. 이 속성은 <table> 태그에 적용되는 스타일에만 지정하면 된다.

종류

설명

collapse

표와 셀의 테두리를 합쳐 하나로 표시한다.

separate

표와 셀의 테두리를 따로 표시한다. 기본값이다.

PreviousChapter 06 NextChapter 08

Last updated 2 years ago

7-1 글꼴 관련 스타일

글꼴 지정하는 font-family 속성

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

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

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

7-2 웹 폰트 사용하기

웹 폰트란

웹 폰트 업로드하고 사용하기

글자색을 지정하는 color 속성

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

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

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

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

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

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

7-4 목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-style-type 속성

불릿 대신 이미지를 사용하는 list-style-image 속성

목록을 들여 쓰는 list-style-position 속성

목록 속성을 한꺼번에 표시하는 list-style 속성