06-1 글꼴 관련 스타일
1.font-family 속성- 글꼴 지정하기
body{ font-family:"맑은 고딕", 돋움, 굴림 }
기본 글꼴
윈도우 시스템: sans-serif, seif체 등
한글 기본 글꼴: 굴림, 궁서, 돋움, 바탕
2.@font-face 속성- 웹 폰트 사용하기
웹 폰트: 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식이다.
2-1) 구글 폰트 사용하기
2-2)직접 웹 폰트 업로드해 사용하기
사이트에서 제공하지 않는 폰트이거나 자신이 가지고 있는 ttf 폰트를 변환해 사용한다면 직접 업로드해 사용해야 한다.
컴퓨터에서 사용하는 글꼴은 트루타입(TrueType) 유형이고 파일 확장자는 *.ttf이다.
하지만 트루타입 유형의 글꼴은 파일 크기가 너무 크기 때문에 다른 글꼴이 등장했다. 이렇게 등장한 웹에 적합한 여러 글꼴 유형 중에서 eot(embedded open type)와 woff(web open font format) 파일이 가장 많이 사용된다.
2-3)웹 폰트 적용하기
글꼴 파일을 업로드해 웹 폰트가 준비되었다면 @font-face 속성을 사용해 웹 폰트를 정의할 수 있다.
<style>
@font-face{
font-family:'trana';
src:local('trana'),
url('trana.eot),
url('trana.woff') format('woff'),
url('trana.ttf') format('truetype');
}
.w-font{
font-family:'trana', sans-serif;
}
</style>3.font-size 속성- 글자 크기 조절하기
| 속성 값 | 설명 |
|---|---|
| <절대 크기> | 브라우저에서 지정한 글자 크기 이다. 사용할 수 있는 갑슨 xx-small, x-small, small, large, x-large, xx-large이다. |
| <상대 크기> | 부모 요소의 글자 크기(font-size)를 기준으로 더 크게 표시하거나 더 작게 표시한다. 사용할 수 있는 값은 larger, smaller이다. |
| <크기> | 브라우저와 상관없이 글자 크기를 직접 지정한다. |
| <백분율> | 부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시한다.(%와 함께 표시해야 한다.) |
| 단위 | 설명 |
|---|---|
| em | 해당 글꼴의 대문자 M의 너비를 기준으로 크기르 조절한다. |
| ex | x-height. 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절한다. |
| pc | 픽셀. 모니터에 따라 상대적 크기가 된다. |
| pt | 포인트. 일반 문서에서 많이 사용하는 단위이다. |
3-1)px 단위 사용하기
px 단위를 사용하면 폰트 크기가 고정되기 때문에 창 크기가 작은 모바일 기기로 볼때도 같은 크기로 화면에 표시된다.
작은 화면에 작은 글씨로 표시되기때문에 모바일 기기에서 접속할 경우까지 고려한다면 px 단위보다 em 단위를 사용하는 것이 좋다.
-크기를 따로 지정하지 않으면 텍스트 문단의 크기는 16px로 표시된다.
3-2)em 단위 사용하기
부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 놓고 상대적 값을 꼐산해 다른 요소들의 글자 크기를 조절한다.
만약 지정한 크기가 없다면 <body>요소의 크기 16px이 기본 값 1em으로 지정된다.
4.font-weight 속성- 글자 굵기 지정하기
기본형: font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
| 속성 값 | 설명 |
|---|---|
| normal | 일반적인 형태로 기본 값이다. |
| bold, lighter, bolder | 굴게, 원래 굵기보다 더 가늘게, 원래 굵기보다 더 굵게 나타낸다. |
| 100~900 사이의 수치 | 400은 normal, 700은 bold에 해당하며 숫자 값을 조절해 좀 더 세밀히 글꼴 두께를 조절 할 수 있다. |
5.font-variant 속성- 작은 대문자로 표시하기
영어 글꼴에서는 '작은 대문자'라는 독특한 설정도 할 수 있다.
이때 작은 대문자란 대문자를 소문자 크기에 맞추어 작게 표시한 것이다.
| 속성 값 | 설명 |
|---|---|
| normal | 일반적인 형태로 표시한다. |
| small-caps | 작은 대문자로 표시한다. |
6.font-style 속성- 글자 스타일 지정하기
| 속성 값 | 설명 |
|---|---|
| normal | 일반적인 형태로 표시한다. |
| italic | 이탤릭체로 표시한다. |
| oblique | 이탤릭체로 표시한다. |
italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면, oblique는 원래 글꼴을 단지 기울어지게 표시할 뿐이다.
대부분 기울어진 형태에 맞게 글꼴이 다듬어져 있기 때문에 웹에서는 주로 italic을 사용한다.
7.font 속성- 글꼴 속성을 한꺼번에 묶어 표현하기
font: <font-style><font-variant><font-weight><font-size/line-height><font-family>
| caption | icon | menu | message-box | small-caption | status-bar특정 키워드를 입력해 그것에 어울리는 글꼴 스타일로 표시할 수도 있다. caption, icon, menu 등이 그 예이다.
| 속성 값 | 설명 |
|---|---|
| font-* | font-로 시작하는 글꼴 관련 속성을 한꺼번에 나열한다. |
| caption | 캡션에 어울리는 글꼴 스타일로 표시한다. |
| icon | 아이콘에 어울리는 글꼴 스타일로 표시한다. |
| menu | 드롭다운 메뉴에 어울리는 글꼴 스타일로 표시한다. |
| message-box | 대화상자에 어울리는 글꼴 스타일로 표시한다. |
| small-caption | 작은 캡션에 어울리는 글꼴 스타일로 표시한다. |
| status-bar | 상태 표시줄에 어울리는 글꼴 스타일로 표시한다. |
주의할 것은 font:120%/120%로 지정했을 때 글자 크기 120%는 부모 요소의 글자 크기를 기준으로 120%만큼 표시하고 뒤에 있는 줄 간격 120%는 현재 요소의 글자 크기를 기준으로 한다.
06-2 텍스트 스타일
1.color 속성- 글자 색 지정하기
색상 값은 16진수나 rgb, hsl 또는 색상 이름으로 표기할 수 있다.
2.text-decoration 속성- 텍스트에 줄 표시하기/없애기
텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있다.
| 속성 값 | 설명 |
|---|---|
| none | 밑줄을 표시하시 않는다. |
| underline | 밑줄을 표시한다. |
| overline | 영역 위로 선을 그린다. |
| line-through | 영역을 가로지르는 선(취소 선)을 그린다. |
3.text-transform 속성- 텍스트 대.소문자 변환하기
| 속성 값 | 설명 |
|---|---|
| none | 변환하지 않는다. |
| capitalize | 시작하는 첫 번째 글자를 대문자로 변환한다. |
| uppercase | 모든 글자를 대문자로 변환한다. |
| lowercase | 모든 글자를 소문자로 변환한다. |
| full-width | 가능한 모든 문자를 전각 문자로 변환한다. |
'전각 문자'란 고정 폭 영문자 너비의 두배 정도 너비의 문자이며 전각 문자 너비의 절반 정도 너비인 문자를 '반각 문자'라고 부른다.
4.text-shadow 속성- 텍스트에 그림자 효과 추가하기
| 속성 값 | 설명 |
|---|---|
| <가로 거리> | 텍스트부터 그림자까지의 가로 거리를 입력한다. 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자를 만든다. 필수 속성이다. |
| <세로 거리> | 텍스트부터 그림자까지의 세로 거리를 입력한다. 양수 값은 글자 아래쪽, 음수 값은 글자 위쪽에 그림자를 만든다. 필수 속성이다. |
| <번짐 정도> | 그림자가 번지는 정도를 나타낸다. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나가기 때문에 그림자가 크게 표시된다. 반대로 음수 값은 그림자가 모든 방향으로 축소되어 보인다. 기본 값은 0 이다. |
| <색상> | 그림자 색상을 지정한다. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있다. 기본 값은 현재 글자 색이다. |
(인터넷 익스플로러 10에서는 그림자 색상을 rgba로 지정할 경우, 제대로 표시하지 못한다.)
보통 그림자 값은 하나만 사용하지만 여러 개를사용하면 마치 그래픽으로 처리한 듯한 텍스트를 만들 수도 있다.
이런 효과를 만들려면 그림자 값을 쉼표로 구분해 나열하면 된다. 이때 맨 먼저 지정한 그림자 값이 텍스틑 가장 가까이 표시된다.
.shadow3 {
color: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2-x -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;
}5.white-space속성- 공백 처리하기
텍스트와 함께 연속해 입력된 여러 개의 공백을 어떻게 처리할지 지정할 수 있다.
| 속성 값 | 설명 |
|---|---|
| normal | 여러 개의 공백을 하나로 표시한다. 기본 값. |
| nowrap | 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시한다. |
| pre | 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시한다. |
| pre-line | 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바쭤 표시한다. |
| pre-wrap | 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시한다. |
예를 들어 텍스트 안에 공백이 불규칙하게 포함된 내용을 편집할 때 모든 공백을 공백 한 칸으로 인식하고 줄을 바꾸지 않으려면 오른쪽과 같이 작성하면 된다.
td { white-space: nowrap;}
6.letter-sapcing과 word-spacing 속성- 텍스트 간격 조절하기
letter-spacing 속성은 낱 글자 사이 간격을 조절하고 word-spacing 속성은 단어와 단어 사이 간격을 조절하는데 주로 단어 사이 간격은 수정하지 않고 letter-spacing 속서을 사용해 자간을 조절한다.
06-3 문단 스타일
1.direction 속성- 글자 쓰기 방향 지정하기
| 속성 값 | 설명 |
|---|---|
| ltr | 왼쪽에서 오른쪽으로 텍스트를 표시한다. 기본 값이다. |
| rtl | 오른쪽에서 왼쪽으로 텍스트를 표시한다. |
2.text-align 속성- 텍스트 정렬하기
문단의 텍스트 정렬 방법을 지정한다.
'왼쪽 정렬', '오른쪽 정렬' 등을 지정할 수 있다.
| 속성 값 | 설명 |
|---|---|
| start | 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다. ltr 언어라면 왼쪽으로 rtl 언어라면 오른쪽으로 맞추어 정렬한다. |
| end | 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다. ltr 언어라면 오른쪽으로, rtl 언어라면 왼쪽으로 맞추어 정렬한다. |
| left | 왼쪽에 맞추어 문단을 정렬한다. |
| right | 오른쪽에 맞추어 문단을 정렬한다. |
| center | 가운데에 맞추어 문단을 정렬한다. |
| justify | 양쪽에 맞추어 문단을 정렬한다. |
| match-parent | 부모 요소를 따라 문단을 정렬한다. 다만, 부모 요소의 속성 값이 start나 end일 경우, 부모 요소가 ltr인지 rl인지에 따라 left나 right 값으로 계산해 적용한다. |
3.text-justify 속성- 정렬시 공백 조절하기
text-align 속성 값이 justify
| 속성 값 | 설명 |
|---|---|
| auto | 웹 브라우저에서 자동으로 지정한다. |
| none | 정렬하지 않는다. |
| inter-word | 단어 사이의 공백을 조절해 정렬한다. |
| distribute | 인접한 글자 사이의 공백을 똑같이 맞추어 정렬한다. |
4.text-indent 속성- 텍스트 들여쓰기
문단의 첫 글자를 얼마나 들여 쓸지를 지정한다.
| 속성 값 | 설명 |
|---|---|
| <크기> | 단위와 함께 들여 쓸 크기를 지정한다. 음수 값도 사용할 수 있다. |
| <백분율> | 부모 요소의 너비를 기주으로 상대적 크기를 지정한다. |
5.line-height 속성- 줄 간격 조절하기
line-height: normal | <숫자> | <크기> | <백분율> | inherit
<숫자>나 <백분율>로 지정했을 때는 글자 크기를 기준으로 지정한다.
예를 들어 모두 줄 간격 30px를 나타내보면
p { font-size: 15px; line-height: 30px }
p { font-size: 15px; line-height: 2.0 }
p { font-size: 15px; line-height: 200% }6.text-overflow 속성- 넘치는 텍스트 표기하기
다만 text-overflow 속성은 해당 요소에서 overflow 속성 값이 hidden이거나 scroll, auto이면서 white-space: nowrap 속성을 함께 사용했을 경우에만 적용된다.
| 속성 값 | 설명 |
|---|---|
| clip | 넘치는 텍스트를 자른다. |
| ellipsis | 말 줄임표(...)로 잘린 텍스트가 있다고 표시한다. |
06-4 목록 스타일
1.list-style-type 속성- 목록의 불릿과 번호 스타일 지정하기
순서 없는 목록에서 불릿 모양 바꾸기
| 속성 값 | 설명 |
|---|---|
| disc(●) | 채운 원 |
| circle(○) | 빈 원 |
| square(■) | 채운 사각형 |
| none | 불릿 없애기 |
순서 목록에서 숫자 바꾸기
| 속성 값 | 설명 | 예시 |
|---|---|---|
| decimal | 1로 시작하는 십진수 | 1,2,3,...,10,11 |
| decimal-leading-zero | 앞에 0이 붙는 십진수 | 01, 02, 03...10,11 |
| lower-roman | 소문자 로마 숫자 | i, ii, iii, iv |
| upper-roman | 대문자 로마 숫자 | I, II, III, IV |
| lower-alpha 또는 lower-latin | 소문자 알파벳 | a,b,c... |
| upper-alpha 또는 upper-lation | 대부분 알파벳 | A,B,C,D,E |
| armenian | 아르메니아 숫자 | |
| georgian | 조지 왕조시대의 숫자 | an,ban,gan |
2.list-style-image 속성- 불릿 대신 이미지 넣기
속성 값|설명
none|이미지를 사용하지 않고 list-style-type 속성에서 지정한 형태로 표시한다.
<이미지>|url("images.jpg")처럼 url() 키워드 안에 이미지 파일 경로를 지정한다.
3.list-style-position 속성- 목록에 들여 쓰는 효과 내기
불릿이나 번호는 실제 내용의 바깥쪽에 표시된다.
| 속성 값 | 설명 |
|---|---|
| inside | 불릿이나 숫자를 안쪽으로 들여 쓴다. |
| outside | 기본 값으로 불릿이나 숫자를 밖으로 내어 쓴다. |
4.list-style 속성- 목록 속성 한꺼번에 표시하기
list-style 속성으로 list-style-type과 list-style-position, list-style-image 속성을 한꺼번에 표시할 수 있다.
ul {
list-style-type: lower-alpha;
list-style-position: inside
}
↓
ul {
list-style: lower-alpha, inside;
}