📌오늘의 KEY POINT !
글꼴 스타일 / 텍스트 스타일 / 문단 스타일 / 목록 스타일
글꼴 스타일
▪ 내용에 맞는 글꼴과 글자 크기, 굵기와 이탤릭체 여부 등을 바꾸는 속성
텍스트 스타일
▪ 글자와 단어들, 그리고 글자들로 이루어진 문단에서 사용되는 스타일
문단 스타일
▪ 텍스트 정렬이나 들여쓰기, 줄 간격 등을 조절
목록 스타일
▪ 목록의 스타일, 들여쓰기 등을 조절
📖 글꼴 관련 스타일
1) font-family 속성 - 글꼴 지정하기
▪ 지정한 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴까지 지정하기도 하는데 이때는 쉼표(,)로 구분하여 지정한다.
<기본형>
font-family:<글꼴 이름>[,<글꼴 이름>, <글꼴 이름>]2) @font-face 속성 - 웹 폰트 사용하기
▪ 웹 문서 작성 시 웹 문서 안에 글꼴 정보도 함께 저장하여 사용자가 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식
▪ 구글의 웹 폰트를 사용 시
→ [구글 웹 폰트] https://fonts.google.com/
→ [Select this style] - [Embed] - [@inport] 탭을 클릭해 @import로 시작하는 소스를 복사하고 <style> 태그에 붙여넣어 사용한다.
▪ 직접 웹 폰트 업로드해서 사용 시
→ 컴퓨터에서 사용하는 글꼴은 트루타입(TrueType)유형으로 파일 확장자는 *.ttf이지만 파일의 크기가 너무 크다.
→ 따라서 웹에 적합한 글꼴 유형이 등장했고 그 중에서 eot, woff 파일이 가장 많이 사용된다.
<기본형>
@font-face {
font-family:글꼴 이름;
scr:url(글꼴 파일 경로) format(파일 유형);
}※ eot파일에서는 포맷을 따로 지정하지 않는다.
3) font-size 속성 - 글자 크기 조절하기
▪ 픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할 수도 있다.
<기본형>
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
▪ font-size에서 사용하는 단위는 아래와 같다.
→ 주로 px 단위를 많이 사용하지만, px 단위는 폰트 크기가 고정되어 창 크기가 작은 모바일 기기에서의 접속을 고려할 경우 em 단위를 사용하는 것이 좋다.
※ 크기를 따로 지정하지 않으면 16px로 표시된다.
→ em 단위는 지정한 크기가 없다면 <body> 요소의 크기 16px이 기본값 1em으로 지정된다.
4) font-weight 속성 - 글자 굵기 지정하기
<기본형>
font-weight: normal | bold | bolder | lighter | 100 ~ 900→ 400은 normal, 700은 bold
5) font-varient 속성 - 작은 대문자로 표시하기
▪ 대문자를 소문자 크기에 맞추어 작게 표시한 것
<기본형>
font-varient: small-caps6) font-style 속성 - 글자 스타일 지정하기
▪ 글자를 이탤릭체로 표현할지 여부를 결정한다.
<기본형>
font-style: italic | oblique→ oblique는 원래 글꼴을 단지 기울이게 표시할 뿐이라, 처음부터 기울어진 글꼴로 디자인된 italic을 주로 사용한다.
7) font 속성 - 글꼴 속성을 한꺼번에 묶어 표현하기
▪ font 속성을 이용하면 font-style과 font-varient, font-weight, font-size/lint-weight, font-family 속성들을 한꺼번에 묶어 약식으로 표현이 가능하다.
→ 또한, 특정 키워드를 입력해 그것에 어울리는 스타일로 표시할 수 있다.
<기본형>
font: <font-style><font-varient><font-weight><font-size/line-weight><font-
family> | caption | icon | menu | message-box | small-caption | status-bar
<예시>
p { font: italic 12px/24px 돋움; }
/*'돋움'글꼴을 사용하며 글꼴 크기가 12px, 줄 간격이 24px인 이탤릭체*/
▪ font- 로 시작하는 속성은 사용하는 각 값들이 다르기 때문에 한꺼번에 사용할 수 있다.
→ line-weight는 줄 간격을 조절하는 속성으로 font 속성은 아니지만 글자 크기와 밀접한 관련이 있으므로 font-size/line-weight처럼 하나의 속성처럼 사용하기도 한다.
📖 텍스트 스타일
▪ 글자와 단어들, 그리고 글자들로 이루어진 문단에서 사용되는 스타일이다.
1) color 속성 - 글자 색 지정하기
▪ 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 때 사용한다.
→ 색상 값은 16진수나 rgb, hsl 또는 색상 이름으로 표기할 수 있다.
<기본형>
color : <색상>2) text-decoration 속성 - 텍스트에 줄 표시하기/없애기
▪ text- 가 붙는 속성을 이용하면 텍스트에 밑줄을 긋거나 취소선을 표시할 수 있다.
→ none : 밑줄 표시X / underline : 밑줄 표시 / overline : 영역 위로 선 / line-through : 취소선
<기본형>
text-decoration : none | underline | overline | line-through3) text-transform 속성 - 텍스트 대·소문자 변환하기
▪ capitalize : 시작하는 첫 번째 글자 대문자 / upper·lowercase : 모든 글자 대·소문자
▪ full-width : 가능한 모든 문자를 전각 문자로 변환
→ 전각문자란 고정 폭 영문자 너비의 두 배 정도 너비의 문자를 말함
<기본형>
text-transform : none | capitalize | uppercase | lowercase | full-width4) text-shadow 속성 - 텍스트에 그림자 효과 추가하기
▪ 텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체적으로 보이게 한다.
<기본형>
text-shadow : none | <가로 거리> <세로 거리> <번짐 정도> <색상>→ 가로 거리와 세로 거리는 필수 속성이다.
5) white-space 속성 - 공백 처리하기
▪ nowrap : 공백 하나로 표시하고 줄 바꿈 없이 계속 한줄 / pre : 공백 그대로 표시하고 줄 바꿈 없이 계속 한줄
▪ pre-line : 공백 하나로 표시하고 자동으로 줄 바꿈 / pre-wrap : 공백 그대로 표시하고 자동 줄 바꿈
<기본형>
white-space : normal | nowrap | pre | pre-line | pre-wrap6) letter-spacing & word-spacing 속성 - 텍스트 간격 조절하기
▪ letter-spacing : 낱 글자 사이의 간격 조절
▪ word-spacing : 단어와 단어 사이 간격 조절
→ 주로 letter-spacing 속성을 사용해 자간을 조절한다.
<기본형>
letter-spacing : normal | <크기>
word-spacing : normal | <크기>📖 문단 스타일
▪ 텍스트 정렬이나 들여쓰기, 줄 간격 등을 조절한다.
1) direction 속성 - 글자 쓰기 방향 지정하기
▪ 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지 결정한다.
→ ltr : left tp right / rtl : right to left
<기본형>
direction : ltr | rtl2) text-align 속성 - 텍스트 정렬하기
▪ justify : 양쪽에 맞추어 정렬 / match-parent : 부모 요소를 따라 정렬
<기본형>
text-align : start | end | left | right | center | justify | match-parent3) text-justify 속성 - 정렬 시 공백 조절하기
▪ text-align의 justify 속성 이용 시 글자와 단어 사이 간격이 어색하게 벌어지는 것을 조절한다.
→ inter-word : 단어 사이의 공백 조절 / distribute :인접한 글자 사이의 공백을 똑같이 맞추어 정렬
<기본형>
text-justify : auto | none | inter-word | distribute4) text-indent 속성 - 텍스트 들여쓰기
<기본형>
text-indent : <크기> | <백분율>5) line-height 속성 - 줄 간격 조절하기
<기본형>
line-height : normal | <숫자> | <크기> | <백분율> | inherit6) text-overflow 속성 - 넘치는 텍스트 표기하기
▪ 공백을 처리하는 white-space 속성 사용 시 줄바꿈을 하지 않을 경우 텍스트가 기준선을 벗어나 넘치는 것을 처리한다.
→ 텍스트가 잘린 상태 그대로 둘 수도 있고, 잘린 텍스트가 있다고 표시할 수도 있다.
→ 단, 해당 요소에서 overflow 속성 값이 hidden이거나 scroll, auto이면서 white-space : nowrap 속성을 함께 사용했을 경우에만 적용된다.
→ clip : 넘치는 텍스트 자름 / ellipsis : 말 줄임표(...)로 잘린 텍스트가 있다고 표시
<기본형>
text-overflow : clip | ellipsis📖 목록 스타일
1) list-style-type 속성 - 목록의 불릿과 번호 스타일 지정하기
▪ 순서 없는 목록의 경우, 목록 앞에 다양한 불릿을 넣을 수 있고, 순서 목록에서는 번호 스타일을 지정할 수 있다.
<기본형>
list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호>→ 불릿 : disc(●) / circle(○) / square(■) / none
→ 순서 목록의 번호는 다음과 같다.
2) list-style-image 속성 - 불릿 대신 이미지 넣기
▪ <이미지> : url("image.jpg")처럼 url()키워드 안에 이미지 파일 경로를 지정한다.
<기본형>
list-style-image : <이미지> | none
<이미지> = url(이미지 파일 경로)3) list-style-position 속성 - 목록에 들여 쓰는 효과 내기
▪ inside : 불릿이나 숫자를 안쪽으로 들여쓰기 / outside : 기본 값으로 불릿이나 숫자를 밖으로 내어쓰기
<기본형>
list-style-position : inside | outside;4) list-style 속성 - 목록 속성 한꺼번에 표시하기
▪ 앞에서 설명한 type, position, image 속성을 한꺼번에 표시할 수 있다.
<list-style 사용 전>
ol {
list-style-type:lower-alpha;
list-style-position:inside;
}
<list-style 활용>
ol { list-style:lower-alpha, inside; }