[border] - 요소의 테두리 선을 지정하는 단축 속성
border-width : 선- 두께 border-style : 선-종류 border-color : 선-색상; 기본값 medium, none, black;
[border-width]
border-width -> medium, thin, thick 단위 px, em, % 등
border-width 1개 -> [top, right, bottom, left] 2개 -> [top,bottom] [left,right] 3개 -> [top] [left,right] [bottom]
4개 -> [top] [right] [bottom] [left] 시계방향
[border-style]
none 선없음 solid 실선 dotted 점선 dashed 파선 double 두줄선 groove 홈이 파여있는 모양
ridge 솟은 모양 inset 요소 전체가 들어간 모양 outset 요소 전체가 나온 모양
[border-color]
black 검은색 색상 선의 색상 transparent 투명
색상이름 red, tomato, royalblue
Hex 색상코드 16진수 색상 #000, #FFFFF
RGB 빛의 삼원색 rgb(255,255,255)
RGBA 빛의 삼원색 + 투명도 rgba(0, 0, 0, 0.5)
border-top : 두께 종류 색상 border-top-width : 두께 border-top-style : 종류 border-top-color : 색상
[border-radius] - 요소의 모서리를 둥글게 깍음
0 둥글게 없음 단위 px, em, vw 등
[box-sizing] 요소의 크기 계산 기준을 지정
content-box 요소의 내용으로 크기 계산
border-box 요소의 내용 + padding + border로 크기 계산
[overflow] - [overflow-x, overflow-y] 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
visible 넘친 내용을 그대로 보여줌 hidden 넘친 내용을 잘라냄 scroll 넘친 내용을 잘라냄 스크롤바 생성
auto 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
[display]요소의 화면 출력 특성
block 상자요소 inline 글자요소 inline-block 글자+상자 요소 flex 플렉스 박스 (1차원 레이아웃)
grid 그리드 (2차원 레이아웃) none 보여짐 특성 없음, 화면에서 사라짐
기타 table, table-row, table-cell 등...
[opacity] 투명도
1 불투명 0~1 사이의 소수점 숫자