css border
boder
요소의 테두리선을 지정
속성
border-width: 선의 두께(너비)
border-style: 선의 종류
border-color: 선의 색상
border-width
선의 두께(너비)를 지정
속성
medium: 중간 두께
thin: 얇은 두께
thick: 두꺼운 두께
단위: px, em, cm 등
border-style
선의 종류를 지정
속성
none: 선 없음
hidden: 선 없음과 동일(table 요소에서 사용)
solid: 실선(일반선)
dotted: 점선
dashed: 파선
double: 두 줄선
groove: 홈이 파여있는 모양(선)
ridge: 솟은 모양(선, groove의 반대)
inset: 요소 전체가 들어간 모양(선)
outset: 요소 전체가 나온 모양(선)
border-color
선의 색상을 지정
속성
색상: 선의 색상을 지정
transparent: 투명한 선(요소의 배경색이 보임)
border 기타 속성
속성
border-top: 위쪽 선
border-top-width: 위쪽 선의 두께
border-top-style: 위쪽 선의 종류
border-top-color: 위쪽 선의 색상
border-bottom: 아래쪽 선
border-bottom-width: 아래쪽 선의 두께
border-bottom-style: 아래쪽 선의 종류
border-bottom-color: 아래쪽 선의 색상
border-left: 왼쪽 선
border-left-width: 왼쪽 선의 두께
border-left-style: 왼쪽 선의 종류
border-left-color: 왼쪽 선의 색상
border-right: 오른쪽 선
border-right-width: 오른쪽 선의 두께
border-right-style: 오른쪽 선의 종류
border-right-color: 오른쪽 선의 색상
box-sizing
요소의 크기 계산 기준을 지정
속성
content-box: 너비(width, height)만으로 요소의 크기를 계산
border-box: 너비(width, heigth)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산
css font
font
글자 관련 속성들을 지정
속성
font-style: 글자 기울기 지정
font-weight: 글자 두께 지정
font-size: 글자 크기 지정
line-height: 줄 높이(줄 간격) 지정
font-family: 글꼴(서체) 지정
font-style
글자 스타일(기울기)을 지정
속성
normal: 스타일 없음
italic: 이텔릭체(활자)
oblique: 기울어진 글자
font-weigth
글자의 두께(가중치)를 지정
속성
normal: 기본 글자 두께, 400과 동일
bold: 글자 두껍게, 700과 동일
bolder: 부모(상위) 요소보다 더 두껍게(bold보다 두껍다는 개념이 아님)
lighter: 부모(상위) 요소보다 더 얇게
숫자: 100부터 900가지의 100단위의 숫자 9개, normal과 bold 이외의 두께를 제공하는 글꼴(서체)를 위한 설정
일반적인 두께의 이름
100: Thin (Hairline)
200: Extra Light (Ultra Light)
300: Light
400: Normal
500: Medium
600: Semi Bold (Demi Bold)
700: Bold
800: Extra Bold (Ultra Bold)
900: Black (Heavy)
font-size
글자 크기를 지정
속성
단위: px, em, cm, 등 단위로 지정
%: 부모(상위) 요소의 비율로 지정
xx-small: 가장 작은 크기
x-small: 더 작은 크기
small: 작은 크기
medium: 중간 크기
large: 큰 크기
x-large: 더 큰 크기
xx-large: 가장 큰 크기
smaller: 부모(상위) 요소보다 작은 크기
larger: 부모(상위) 요소보다 큰 크기
line-height
줄 높이(줄 간격) 지정
속성
normal: 브라우저의 기본 정의를 사용(1~1.4)
숫자: 요소 자체 글꼴 크기의 배수로 지정
단위: px, em, cm 등 단위로 지정
%: 요소 자체 글꼴 크기의 비율로 지정
font-family
글꼴(서체) 지정
속성
글꼴이름: 글꼴(서체) 후보 목록을 지정
serif: 바탕체 계열
sans-serif: 고딕체 계열
monospace: 고정너비(가로폭이 동등한) 글꼴 계열
cursive: 필기체 계열
fantasy: 장식(재미있는 문자 표현을 포함하는) 글꼴 계열
css text
color
문자의 색상을 지정
속성
색상이름: 브라우저에서 제공하는 색상의 이름
Hex 색상코드: 16진수 색상 (Hexadecimal Colors)
RGB: 빛의 삼원색
RGBA: 빛의 삼원색, 투명도
HSL: 색상, 채도, 명도
HSLA: 색상, 채도, 명도, 투명도
text-align
문자의 정렬 방식을 지정
속성
left: 왼쪽 정렬
right: 오른쪽 정렬
center: 가운데 정렬
justify: 양쪽 맞춤
text-indent
(첫번째 줄의) 들여쓰기를 지정
속성
단위: px, em, cm 등 단위로 지정
%: 부모 요소의 너비에 대한 비율로 지정
text-decoration
문자의 장식(line)을 설정
속성
none: 선 없음
underline: 밑줄을 지정
overline: 윗줄의 지정
line-through: 중앙 선(가로지르는)을 지정
letter-spacing
문자의 자간(글자 사이 간격)을 설정
속성
normal: 단어 사이의 일반 간격
단위: px, em, cm, 등 단위로 지정
word-spacing
문자의 자간(단어 사이 간격)을 설정
속성
normal: 단어 사이의 일반 간격
단위: px, em, cm, 등 단위로 지정