우당탕탕 개발일지
[두잇 HTML5+CSS3 웹표준의 정석] CSS Part6 본문
글꼴 관련 스타일
font-style
: 글꼴 지정하기
-글꼴을 지정할 대 하나만 지정할 경우 지정한 글꼴이 없을 경우에 대비해서 두번째, 세번째 글꼴까지 지정해야한다.
쉼표( , )로 구분한다.
@font-face
: 웹 폰트 사용하기
- 웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로
드시키는 방식이다.
구글 웹 폰트 사용하기
: 사용방법
구글 폰트 접속 - 원하는 폰트 클릭훙 오른쪽에 [Embed] - [@import] - 소스복사/ 글꼴 이름 기억
복사한 소스를 <style> 태그에 붙여 넣고 font-family 에 기억해둔 글꼴이름 넣는다.
font-size 속성
: 글자 크기 조절하기
| <절대크기> | 브라우저에서 지정한 글자 크기이다. xx-small l x-small l small l medium l large l x-large l xx-large |
| <상대크기> | 부모요소의 글자크기를 기준으로 더 크거나 더 작게 표시한다. larger l smallar |
| <크기> | 브라우저와 상관이없이 글자 크기를 직접 지정한다. |
| <백분율> | 부모요소의 글자크기를 기준으로 해당하는 %를 계산해 표시한다. |
| <크기> | |
| em | 대문자 M의 너비를 기준으로 크기 조절한다. |
| ex | 소문자 x의 높이를 기준으로 크기를 조절한다. |
| px | 픽셀, 모니터에 따라 상대적 크기가 된다. |
| pt | 일반 문서에서 많이 사용하는 단위이다. |
px 단위
웹에서 주로 많이 사용하지만 폰트 크기가 고정되기 때문에 창 크기가 작은 모바일 기기로 볼 때도 같은 크기로 화면에 표시된다. 그렇기 때문에 모바일 기기에서는 주로 em 단위를 사용한다. 기본 크기는 16px이다.
em 단위
부모 요소에서 지정한 폰트의 대분자 M의 너비를 1em으로 놓고 상대적 값을 계산해 다른 요소들의 글자 크기를 조절한다. 만약 지정한 크기가 없다면 <body>요소의 크기 16px이 기본값 1em으로 지정된다.
font-weight 속성
: 글자 굵기 지정하기
| normal | 일반적인 형태의 기본값 |
| bolder l lighter l bold | 원래 굵기보다 굵게 ㅣ 원래 굵기보다 가늘게 ㅣ 굵게 |
| 100~900 사이의 수치 | 400은 normal, 700은 bold에 해당된다. |
font-variant 속성
: 작은 대문자로 표시하기
-대문자를 소문자 크기에 맞추어 작게 표시한것. 즉 모든글자가 대문자로 바뀌지만 크기는 소문자의 크기에 맞춘다.
| normal | 일반적인 형태로 표시한다. |
| small-caps | 작은 대문자로 표시한다. |
font-style 속성
: 글자 스타일 지정하기
-이탤릭체로 표현할지의 여부를 결정한다
*italic은 기울어진 글꼴이 처음부터 디자인되어 나오는 반면, oblique는 원래 글꼴을 단지 기울어지게 표시할 뿐이다.*
| normal | 일반적인 형태로 표현한다. |
| italic | 이탤릭체로 표시한다. |
| oblique | 이탤릭체로 표시한다. |
font 속성
: 글꼴 속성을 한꺼번에 묶어 표현하기
- font-style, font-variant, font-weight, font-size/line-height, font-family 속성을 한꺼번에 묶어 약식으로 표현할 수 있다. font-size/line-height은 슬래시( / )를 이용해서 표현한다.
예시)
: 120%/120%로 지정했을 때 글자크기120%는 부모요소의 글자크기를 기준으로 표시하고 뒤에 있는 줄간격120%는 현재 요소의 글자크기를 기준으로 한다.
p{font:16px/25px "맑은고딕"}
p{font:bold italic 12pt}
p{font:120%/120% bold}
: 특정 키워드를 입력해 그것에 어울리는 글꼴 스타일로 표시할 수 있다.
| caption | 캡션에 어울리는 글꼴 스타일로 표시한다. |
| icon | 아이콘에 어울리는 글꼴 스타일로 표시한다. |
| menu | 드롭다운 메뉴에 어울리는 글꼴 스타일로 표시한다. |
| message-box | 대화상자에 어울리는 글꼴 스타일로 표시한다. |
| small-caption | 작은 캡션에 어울리는 글꼴 스타일로 표시한다. |
| status-bar | 상태 표시줄에 어울리는 글꼴 스타일로 표시한다. |
<p style="font: caption"> ooo </p>
텍스트 스타일
color 속성
: 글자 색 지정하기
text-decoration
: 텍스트 줄 표시하기/없애기
- 텍스트에 밑줄을 긋거나 취소선을 표시할 수 있습니다.
| none | 밑줄을 표시하지 않는다. |
| underline | 밑줄을 표시한다. |
| overline | 영역 위로 선을 그린다. |
| line-through | 영역을 가로지르는 선(취소선)을 그린다. |
text-transform
: 텍스트 대소문자 변환하기
- 텍스트를 대소문자 또는 전각 문자로 변환한다.
| none | 변환하지 않는다 |
| uppercase | 모든 글자를 대문자로 변환한다. |
| lowercase | 모든 글자를 소문자로 변환한다. |
| capitalize | 시작하는 첫 번째 글자를 대문자로 변환한다. |
| full-width | 가능한 모든 문자를 전각 문자로 변환한다. |
text-shadow 속성
: 텍스트에 그림자 효과 추가하기
- 사이트 제목이나 강조해야 할 글자에 사용하여 좀 더 입체적으로 보이게 한다.
text-shadow: none ㅣ <가로거리> <세로거리> <번짐정도> <색상>| <가로거리> | 양수값은 글자 오른쪽, 음수값을 글자 왼쪽 |
| <세로거리> | 양수값은 글자 아랫쪽, 음수값을 글자 윗쪽 |
| <번짐정도> | 양수값은 모든 방향, 음수값은 모든 방향으로 축소. 기본값은 0 |
| <색상> | 그림자 색상 지정한다. 여러 색 지정할 경우에는 공백으로 구분해 여러색상 지정할 수 있으며 기본값은 현재 글자색이다. |
예시)
.shadow{text-shadow: 5px 5px 3px #f00;}
letter-spacing과 word-spacing 속성
: 텍스트 간격 조절하기
-letter-spacing은 낱 글자 사이 간격을 조정하고 word-spacing 속성은 단어와 단어 사이 간격을 조절하는데 주로 letter-spacing속성을 사용해 자간을 조절한다.
예시)
.letter{letter-spacing: 0.2em;}
문단 스타일
direction 속성
: 글자 쓰기 방향 지정하기
-어느 방향으로 쓰기 시작할건지 지정하는것이다. 기본적으로 왼쪽에서 오른쪽으로 쓰는게 기본 속성이지만 아랍어는 오른쪽에서 왼쪽으로 쓴다.
| ltr | 왼쪽에서 오른쪽으로 텍스트를 표기한다. |
| rtl | 오른쪽에서 왼쪽으로 텍스트를 표기한다. |
text-align 속성
: 텍스트 정렬하기
| left | 왼쪽에 맞추어 문단을 정렬한다. |
| right | 오른쪽에 맞추어 문단을 정렬한다. |
| center | 가운데에 맞추어 문단을 정렬한다. |
| justify | 양쪽에 맞추어 문단을 정렬한다. |
text-justify 속성
: 정렬 시 공백 조절하기
justify일 경우, 글자와 단어 사이 간격이 어색하게 벌어질 수 있기 때문에 간격을 어떻게 조절해 정렬할 것인지 지정한다.
| auto | 자동으로 지정한다. |
| inter-word | 단어 사이의 공백을 조절한다. |
| ditribute | 인접한 각각의 글자 사이의 공백을 똑같이 맞추어 정렬한다. |
| none | 정렬하지 않는다. |
text-indent 속성
: 텍스트 들여쓰기
문단의 첫 글자를 얼마나 들여 쓸지를 지정한다.
| <크기> | 단위와 함께 들여 쓸 크기를 지정한다. 음수 값도 사용할 수 있다. |
| <백분율> | 부모 요소의 너비를 기준으로 상대적 크기를 지정한다. |
line-height 속성
: 줄 간격 조절하기
- 줄 간격이 너무 좁으면 내용이 눈에 잘 들어오지 않기 때문에 원하는 만큼 줄 간격을 조절한다.
* 보통 줄 간격을 글자 크기의 1.5~2배가 적당하다 *
line-height: normal ㅣ <숫자> ㅣ <크기> ㅣ <백분율> ㅣ inherit
예시)
.big-line{line-height:2;}
목록 스타일
list-style-type 속성
: 목록의 불릿과 번호 스타일 지정하기
순서 없는 목록에서 불릿모양 바꾸기
| disc circle square none |
채운 원 빈 원 채운 사각형 불릿 없애기 |
순서 없는 목록에서 불릿 없애기
ul { list-style-type: none; }
순서 목록에서 숫자 바꾸기
| decimal decimal-leading-zero lower-roman upper-roman lower-alpha 또는 lower-latin upper-alpha 또는 upper-latin armenian georgian |
1로 시작하는 십진수 앞에 0이 붙는 십진수 소문자 로마 숫자 대문자 로마 숫자 소문자 알파벳 대문자 알파벳 아르메니아 숫자 조지 왕조시대의 숫자 |
list-style-image 속성
: 불릿 대신 이미지 넣기
- 불릿 대신 원하는 이미지로 바꿀 수 있다.
list-style-image: url (이미지 파일경로)
| <이미지> | url("images.jpg") 처럼 url() 키워드 안에 이미지 파일 경로를 지정한다. |
list-style-position 속성
: 목록에 들여 쓰는 효과 내기
- 불릿이나 번호가 좀 더 안쪽으로 들여 써진 듯한 효과가 나타난다.
| inside outside |
불릿이나 숫자를 안쪽으로 들여쓴다. 기본 값으로 밖으로 내어쓴다. |
list-style 속성
: 목록 속성 한꺼번에 표시하기
- 목록 속성 한꺼번에 표시할 수 있다.
예시)
ol{
list-style-type: lower-alpha;
list-style-position: inside;
}ol{
list-style: lower-alpha, inside ;
}
'HTML & CSS > Do it! 시리즈' 카테고리의 다른 글
| [두잇 HTML5+CSS3 웹표준의 정석] CSS Part8 (0) | 2022.01.26 |
|---|---|
| [두잇 HTML5+CSS3 웹표준의 정석] CSS Part7 (0) | 2022.01.24 |
| [두잇 HTML5+CSS3 웹표준의 정석] CSS Part5 (0) | 2022.01.20 |
| [두잇 HTML5+CSS3 웹표준의 정석] HTML Part4 (0) | 2022.01.19 |
| [두잇 HTML5+CSS3 웹표준의 정석] HTML Part3 (0) | 2022.01.15 |