[CSS] 기초 2

글꼴 관련 스타일

font-family	body 태그에 적용시 전체 적용.
	지정한 글꼴이 없을 경우에 대비해 두번째, 세번째 글꼴 지정도 가능.
rule	font-family: <글꼴 이름>
	font-family: <글꼴 이름>, <글꼴 이름>

 

font-size	글자 크기
rule	font-size: <크기> | <백분율>
ex. css	h1 {
	/* font-size: 3em; */
	font-size: 400%;
	}

 

단위 종류	설명
em	부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
rem	문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
ex	해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정
px	모니터의 1픽셀을 기준
pt	포인트라고 하며, 일반 문서에 많이 사용

 

이탤릭
ex. css	h1 { font-style: italic}

 

font-weight	글자 굵기
ex. css	p {
	/* font-weight: bold; */
	/* 수치로는 작게는 200 에서 800 까지 */
	font-weight: 600;
	}

 

 

텍스트 관련 스타일

color	글자 색 지정
ex. css	p { color: blue }
	p { color: rgb(255,0,255) }
	/* 4번째 수치는 투명 0 ~ 선명 1 까지 */
	p { color: rgba(255,0,255,0.1) }
	p { color: rgba(255,0,255,1) }
	p { color: #ffff00 } /* 16진수 표현 */
	p { color: #ffff0011 } /* 투명도 까지 */

 

text-align	정렬
rule	text-align : start | end | left | right | center

 

text-decoration	텍스트에 밑줄을 긋거나 가로지르는 줄 표시. 텍스트링크의 밑줄을 없앨 때도 사용.
rule	text-decoration: none | underline | overline | line-through

 

text-shadow	텍스트에 그림자 효과를 추가하는 속성
rule	text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>
ex. css	text-shadow: 4px 4px 2px black;

 

list-style-type

순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성

 

종류	설명
disc	채운 원 모양
circle	빈 원 모양
square	채운 사각형
decimal	1부터 시작하는 10진수
lower-roman	로마 숫자 소문자
upper-roman	로마 숫자 대문자
none	불릿이나 숫자를 없앰

 

list-style-image	순서 없는 목록의 불릿을 이미지로 바꾸는 속성
rule	list-style-image: < url (이미지 경로) > | none

 

 

표 스타일

caption-side	캡션(설명글)은 기본으로 표 위쪽에 표시됨. 이 속성을 이용해 아래쪽에 표시 가능
rule	caption-side: top | bottom

 

border	표 테두리( 바깥 테두리 table 과 셀 테두리 tr,td 모두 지정해야함 )
ex. css	table { border: 1px solid black }
	tr , td { border: 1px solid black }