목차
글꼴
1) 글꼴 지정하기
font-family 속성
① 기본형
font-family : <글꼴 이름>[,<글꼴 이름>, <글꼴 이름>]
② body{ font - family : "맑은 고딕", 돋움, 굴림}
웹 문서 전체에 "맑은 고딕"이라는 글꼴을 적용하는데 만약 "맑은 고딕" 글꼴이 없다면 "돋움" 글꼴로 적용하고 그 글꼴도 없다면 "굴림: 글꼴로 적용하라는 뜻
③ 웹 문서에서 사용할 글꼴 지정
④ <body>를 비롯해 <p>나 <hn>처럼 텍스트를 사용하는 태그에서 사용
⑤ 웹 문서에서 글꼴을 지정할 시 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우에
대비해 두 번째, 세 번째 글꼴까지 지정함. 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분
⑥ font-family 속성은 상속되기 때문에 <body> 스타일에서 정의하면 문서 전체에 적용되고
자식 요소에 계속 같은 글꼴이 사용됨. 일부 태그에서 다른 글꼴을 사용하고 싶을 때는 태그 선택자,
클래스 선택자를 이용해 해당 요소에 다른 글꼴 지정
2) 글꼴 지정하기
@font-face
① 웹 폰트(web-font) : 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면
글꼴을 사용자 시스템으로 다운로드시켜 사용하는 글꼴. 사용자 시스템에 없는 글꼴이더라도
웹 제작자 의도대로 텍스트 표시 가능
3) 구글 웹폰트 사용하기
① https://fonts.google.com/ 접속
② 한글 폰트 검색
③ 웹 문서에 <style> 태그 안에 붙여 넣음
④ font-family 속성에서 웹 폰트 글꼴 이름사용
4) 직접 웹 폰트 업로드해 사용하기
① 직접 사용할 웹 폰트 준비
② 컴퓨터에서 사용하는 폰트의 확장자는 *.ttf
③ ttf파일은 용량이 너무 크기 때문에 eot나 woff로 변환하여 사용
5) 웹 폰트 적용하기
① @font-face 속성을 사용해 웹 폰트 정의
② IE8버전 이하 버전을 위해 eot 파일 먼저 선언
③ 대부분의 모던 브라우저에서 지원하는 woff 파일 선언
④ 용량이 큰 ttf 파일을 마지막에 선언
⑤ 브라우저 자신이 지원하는 폰트 파일만 다운받기 위함
6) 글자 크기 조절하기
font-size 속성
① 글자 크기를 조절할 때 사용
② 사용할 수 있는 값 : 절대 크기, 상대 크기, 숫자, 백분율
③ 기본 값은 상대 크기인 medium이고 font-size 속성은 상속됨
④ 기본형 font-size : <절대 크기>|<상대 크기>|<크기>|<백분율>
⑤ font-size에서 사용 가능한 속성 값
| 속성 값 | 설명 |
| <절대 크기> | 브라우저에서 저장한 글자 크기 사용 가능한 값 : xx-small | x-small | small | medium | large | x-large | xx-large |
| <상대 크기> | 부모 요소의 글자 크기를 기준으로 크기 조절 사용 가능한 값 : larger | smaller |
| <크기> | 브라우저와 상관없이 글자 크기 직접 지정 |
| <백분율> | 부모 요소의 글자 크기 기준으로 해당하는 %를 계산하여 표시 %와 함께 작성해야 됨 |
⑥ <크기> 값에서 사용할 수 있는 단위
| 단위 | 설명 |
| em | 해당 글꼴의 대문자 M 너비를 기준으로 크기 조절 ① 사용하는 글꼴의 대문자 M기준으로 크기 조절 ② 대문자 M 너비가 1em으로 지정돼 상대적인 값을 계산 |
| ex | x-height. 해당 글꼴의 소문자 x 높이를 기준으로 크기 조절 |
| px | 픽셀. 모니터에 따라 상대적 크기가 됨 웹 문서에서 가장 많이 사용 px 단위 사용 시 폰트 크기가 고정되고 작은 모바일 기기에서도 고정된 값이 표출됨. |
| pt | 포인트. 일반 문서에서 많이 사용하는 단위 |
7) 글자 굵기 조절하기
font-weight 속성
① 글자 굵기를 조절할 때 사용
② 기본형 font-weight : normal | bold | bolder | lighter | 100 | 200 |
③ font-weight에서 사용하는 속성 값
| 속성 값 | 설명 |
| normal | 일반적인 형태로 기본 값 |
| bold | lighter | border | 굵게 | 원래 굵기보다 더 가늘게 | 원래 굵기보다 더 굵게 |
| 100~900 사이 수치 | 400은 normal, 700은 bold 수치를 조절하여 좀 더 세밀한 두께 조절 가능 |
8) 작은 대문자로 표시하기
font-variant 속성
① 영문 소문자 크기에 맞춰 대문자 표시
② 사용 가능한 속성 값
normal - 일반적인 형태로 표시
small-caps - 작은 대문자로 표시
9) 글자 스타일 지정하기
font-style 속성
① 글자를 이탤릭체로 표시할 때 사용
② font-style : normal | italic | oblique
③ font-style에서 사용하는 속성 값
normal - 일반적인 형태로 표시
italic | oblique - 이탤릭체로 표시
10) font 속성
글꼴 속성을 한꺼번에 묶어 표현하기
① 앞서 배운 글꼴 관련 속성들을 한 번에 정의할 때 사용
② 기본형
font : <font-style><font-variant><font-weight><font-size/line-height><font-family> | caption | icon | menu |
message-box | small- caption | status-bar
③ 특정 키워드를 입력해 그것에 어울리는 글꼴 스타일로도 표시 가능
| 속성 값 | 설명 |
| font - * | font-로 시작하는 글꼴 관련 속성을 한꺼번에 나열 |
| caption | 캡션에 어울리는 글꼴 스타일로 표시 |
| icon | 아이콘에 어울리는 글꼴 스타일로 표시 |
| menu | 드롭다운 메뉴에 어울리는 글꼴 스타일로 표시 |
| message-box | 대화상자에 어울리는 글꼴 스타일로 표시 |
| small-caption | 작은 캡션에 어울리는 글꼴 스타일로 표시 |
| status-bar | 상태 표시줄에 어울리는 글꼴 스타일로 표시 |
④ line-height는 줄 간격 조절 속성이지만 글자 크기와 줄 간격이 밀접한 관련이 있어서 font-size/line-height 하나의 속성처럼 사용하기도 함
텍스트 스타일
1) 글자색 지정
color 속성
① 글자 색상 지정할 때 사용
② 16진수 값, rgb값, hsl 값, 색상 이름으로 표시 가능
③ 기본형 color : <색상>
2) 텍스트에 줄 표시하기/없애기
text-decoration 속성
① 텍스트에 밑줄을 긋거나 취소 선을 표시할 때 사용
② 링크 텍스트의 밑줄 없앨 때도 사용
③ 기본형 text-decoration : none | underLine | overLine | Line-through
줄없음 줄 B̅ 줄
3)텍스트 대/소문자 변환하기
text-transform 속성
① 텍스트를 대/소문자 변환할 때 사용
② 기본형 text-transform : none | capitalize | uppercase | lowercase | full-width;
없음|시작 첫 글자 대문자| 모두 대문자 |모두 소문자 |
4) 텍스트 그림자 효과
text-shadow 속성
① 텍스트에 그림자 효과를 추가할 때 사용
② 자주 사용하면 지저분해 보여서 제목이나 강조할 글자에만 사용
③ 기본형 text-shadow : none |<가로거리><세로거리> <번짐정도><색상>
④ 사용 가능한 속성
| 속성 값 | 설명 |
| <가로 거리> | 텍스트부터 그림자까지의 가로 거리 입력. 양수는 글자 오른쪽으로 음수는 글자 왼쪽으로 그림자가 생김. 필수 입력 값 |
| <세로 거리> | 텍스트부터 그림자까지의 세로 거리 입력. 양수는 글자 아래쪽으로 음수는 글자 위쪽으로 그림자가 생김. 필수 입력 값 |
| <번짐 정도> | 그림자 번짐 정도 지정. 양수 값은 그림자가 모든 방향으로 퍼져나가 그림자가 크게 표시되고 음수 값은 그림자가 모든 방향으로 축소되어 표시. 기본 값 0 |
| <색상> | 그림자 색상 지정. 한 가지 색상을 지정할 수도 있고 공백으로 구분하여 여러 색상 지정 가능. 기본 값 현재 글자 색 |
5) 공백 처리하기
white-space 속성
① 텍스트와 함께 연속해 입력된 여려 개의 공백 처리할 때 사용
② 기본형 white-space : normal | nowrap | pre | pre-line | pre-wrap
③ 사용 가능한 속성
| 속성 값 | 설명 |
| normal | 여러 개의 공백을 하나로 표시. 기본값 |
| nowrap | 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시 |
| pre | 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시 |
| pre-line | 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄 바꿔 표시 |
| pre-wrap | 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄 바꿔 표시 |
6) 텍스트 간격 조절
letter-spacing과 word-spacing 속성
① 텍스트 자간을 조절할 때 사용하는 속성들
② letter-spacing은 낱 글자 사이 간격 조절
③ word-spacing은 단어와 단어 사이 간격 조절
④ 기본형 letter-spacing : normal |<크기>
word-spacing : normal |<크기>
문단 스타일
1) 글자 쓰기 방향 지정
direction 속성
① 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지를 결정
② 기본형 direction : ltr(left-to-right) | rtl (right-to-left)
왼쪽에서 오른쪽, 기본값 | 오른쪽에서 왼쪽
2) 텍스트 정렬하기
text-align 속성
① 문단의 텍스트 정렬 방법 지정
② 기본형 text-align : start | end | left | right | center | justify | match-parent
| 속성값 | 설명 | 속성값 | 설명 |
| start | 텍스트 줄의 시작 위치에 맞춰 정렬 | left | 왼쪽에 맞춰 정렬 |
| end | 텍스트 줄의 끝 위치에 맞춰 정렬 | right | 오른쪽에 맞춰 정렬 |
| center | 가운데에 맞춰 정렬 | justify | 양쪽에 맞춰 문단을 정렬 |
| match-parent | 부모 요소를 따라 문단 정렬 |
3) 정렬 시 공백 조절
text-justify 속성
① text-align=“justify”일 경우 글자와 단어 사이의 간격 조절
② 기본형 text-justify : auto | none | inter-word | distribute
웹 브라우저 자동지정 | 정렬 안함 | 단어 사이 공백 조절 | 인접한 글자 사이의 공백을 똑같이 맞춤
※크롬에서는 지원을 안한다.
4) 텍스트 들여 쓰기
text-indent 속성
① 문단의 첫 글자를 얼마나 들여 쓸지 지정
② 기본형 text-indent : <크기>| <백분율>
< 크기> : 단위와 함께 들여 쓸 크기 지정. 음수 값도 사용 가능.
<백분율> :부모 요소의 너비를 기준으로 상대적 크기 지정
5) 줄 간격 조절
line-height 속성
① 원하는 만큼 줄 간격을 조절할 때 사용
② <숫자>와 <백분율>은 부모 요소를 기준으로 몇 배인지 지정
③ 보통 글자 크기의 1.5~2배 정도면 적당
④ 기본형 line-height : normal | <숫자> | <크기> | <백분율> | inherit
6) 넘치는 텍스트 표기
text-overflow 속성
① 지정한 영역을 벗어나는 텍스트를 어떻게 처리할지 결정
② overflow 속성 값이 hidden, scroll, auto이면서 white-space: nowrap일 때만 적용 가능
③ 기본형 text-overflow : clip | ellipsis
넘치는 텍스트 자름 | 말 줄임표(...)로 잘린 텍스트 있음을 표시
목록과 링크 스타일
1) 목록의 불릿과 번호 스타일 지정
list-style-type 속성
① <ul>일 경우 불릿 모양을 변경할 때 <ol>일 경우 번호 스타일 지정할 때 사용
② 기본형 list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호>
③ <ul>의 불릿 모양 바꾸기
disc(●) - 기본 값 circle(○) square(■) none
④ <ul>에서 불릿 없애기 ul {list-style-type:none;}
⑤ <ol>에서 숫자 바꾸기
| 속성 값 | 설명 | 예시 |
| decimal | 1로 시작하는 십진수. 기본 값 | 1, 2, 3, …, 10, 11 |
| decimal-leading-zero | 앞에 0이 붙는 십진수 | 01, 02, 03, …,10. 11 |
| lower-roman | 소문자 로마 숫자 | ⅰ, ⅱ, ⅲ, ⅳ, ⅴ |
| upper-roman | 대문자 로마 숫자 | Ⅰ, Ⅱ, Ⅲ, Ⅳ, Ⅴ |
| lower-alpha | lower-latin | 소문자 알파벳 | a, b, c, d, e |
| upper-alpha | upper-latin | 대문자 알파벳 | A, B, C, D, E |
| armenian | 아르메니아 숫자 | |
| georgian | 조지 왕조시대의 숫자 | an, ban, gan |
2) 불릿 대신 이미지 넣기
list-style-image 속성
① <ul>에서 불릿을 이미지로 변경 가능
② 기본형
list-style-image : <이미지> | none
<이미지> = url (이미지 파일 경로)
③ 사용 가능한 속성 값
none - 이미지를 사용하지 않고 list-style-type에서 지정한대로 표출. 기본 값
<이미지> - url(“images.jpg”)처럼 url() 키워드 안에 이미지 파일 경로 지정
3) 목록에 들여 쓰는 효과
list-style-position 속성
① 불릿이나 번호를 들여쓸 때 사용
② 기본형 list-style-position : inside | outside;
inside - 불릿이나 숫자를 안쪽으로 들여 씀
outside - 기본 값으로 불릿이나 숫자를 밖으로 내어 씀
4) 목록 속성 한꺼번에 표시
list-style 속성
① 앞서 배운 list 관련 속성들을 한 번에 지정 가능
ol {list-style-type: none;} -> ol {list-style :none;}
ul { list-style-type :lower-alpha; list-style-position : inside;}
-> ul { list-style : lower - alpha, inside;}
'HTML&CSS > CSS' 카테고리의 다른 글
| 배경 - 그라데이션 효과 (0) | 2021.09.02 |
|---|---|
| 색상과 배경 스타일 (0) | 2021.09.02 |
| CSS3 란? (0) | 2021.09.01 |
| CSS 기초 (2) (0) | 2021.09.01 |
| CSS 기초 (1) (0) | 2021.09.01 |