[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 07.텍스트를 표현하는 다양한 스타일"

07. 텍스트를 표현하는 다양한 스타일

글꼴 관련 스타일

 

글꼴 기본형

{ font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

 

※ 기본형 기호 이해하기

1. |는 나열한 옵션 중 하나가 값이 되어야 한다는 의미.

2. 속성값을 나열할 때 키워드(약속한 값)는 그대로 나열.

3. 속성값을 나열할 때 값이 아니라 유형이라면 < >로 묶음. 이때 다른 속성을 유형처럼 사용할 수 있음.

 

글꼴 적용

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

 

글자 크기

font-size: <절대 크기> ￨ <상대 크기> ￨ < 크기 > ￨ <백분율>

단위: em, rem, ex, px, pt

 

폰트 속성

{ font-style: normal ㅣ italic ㅣ oblique }

 

글자 굵기

{ font-weight: bold ㅣ lighter }

 

 

웹폰트

@font-face {
	font-family: <글꼴 이름>;
	scr: <글꼴 파일>[<글꼴 파일>];
}

@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'), 
              url('fonts/ostrich-sans-bold.svg') format('svg');
      }

 

구글폰트

@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

 

 

 

텍스트 관련 스타일

 

글자색 지정

{ color: <색상> }

색상 표현 방법: 16진수(#RRGGBB), hsl(색상, 채도, 명도), 영문명(black, white), rgb(0, 0, 255)/rgba(0,0,255, 반투명값)

 

텍스트 정렬

{ test-aligh: start / end / left / right / center / justify / match- parent }

 

줄간격

{ line-height: 0.7; }

 

텍스트 줄

{ text-decoration: none / underline / overline / line through }

 

텍스트 그림자

{ text-shadow: none / <가로거리> <세로거리> <번짐정도> <색상> }

 

텍스트 대소문자

{ text-transform: capitalize / uppercase / lowercase / full-width }

 

글자간격

{ letter-spacing: 글자간격 }
{ word-spacing: 단어간격 }

 

---

 

목록 관련 스타일

 

불릿 모양

{ list-style-type: 
	disc / circle / square / decimal / decimal-leading-zero / lower-roman /
	upper-roman / lower-alpha, latin / upper-alpha, latin / none }

{ listh-style-image: url('image/dot.png'); }
/* 불릿 이미지 */

 

목록 들여쓰기

{ list-style-position: inside / outside }

outside /* 기본값 */

 

 

---

 

표 관련 스타일

 

표 위치

{ caption-side: top / botton }

 

셀 사이 여백

{ border-spacing: 수평거리 수직거리 }

 

셀 테두리 합치기

{ border-collapse: 테두리 합치기 }
{ border-seperate: 테두리 분리 }

 

표 테두리

caption-side

 

 

---

 

 

출처

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB