CSS 용어 정리 - 상자의 크기, border, overflow

태그의 크기를 지정하는 약어

CSS 용어	의미	속성
width, height	요소의 가로/세로 너비	auto : 브라우저가 자동으로 너비 계산 단위 : px, em, vw 등 단위로 지정
max-width, max-height	요소가 커질 수 있는 최대 가로/세로	none : default(최대 너비 제한 없음) auto : 브라우저가 자동으로 계산 단위 : px, em, vw 등 단위로 지정
min-width, min-height	요소가 작아질 수 있는 최소 가로/세로	0: default(최대 너비 제한 없음) auto : 브라우저가 자동으로 계산 단위 : px, em, vw 등 단위로 지정
Calc()	사용자가 원하는 크기 값을 계산하여 사용하기 위해 사용하는 값	EX) width : Calc(100vh - 20vw)
box-sizeing	요소의 크기를 계산하는 기준을 지정	content-box : 요소의 내용으로 계산 border-box : 요소의 내용+padding+border로 크기 계산
opacity	요소의 투명도를 결정함	1 : 눈에 완전히 보임  0~1까지의 소수점 숫자
overflow	요소가 크기 이상으로 내용이 넘쳤을 경우, 보여짐을 제어하는 속성	visible : 넘친 내용 그대로 보여줌 hidden: 넘친 내용 자르기 scroll : 스크롤바 생성 auto : 넘친 내용이 있을 때 스크롤 생성  overflow-x, overflow-y로 x축 y축의 설정을 다르게 줄 수도 있음

 

선의 형태 지정 - Tag를 감싸는 선 포함

 

 

CSS 용어	의미	속성
border-width	선의 두께를 지정함	medium : 중간 두께(default) thin : 앏은 두께 thick : 두꺼운 두께 단위 : px, em, % 등의 단위값
border-style	요소 테두리 선의 종류	none : 선 없음 solid : 실선(일반 선) dotted :  파선 double : 두줄선 groove : 홈이 파여 있는 모양 ridge : 솟은모양(groove의 반대) insert : 요소 전체가 들어간 모양 outset : 요소 전체가 나온 모양
border-color	요소 테두리 선의 색상을 지정	black : 검정색 색상 : 선의 색상 transparent : 투명
border-방향-(속성) 이나 border-방향의 방식으로 4방향 모두 다른 설정을 주는 것도 가능하다.
border-radius	요소 모서리를 둥글께 깍음	default는 없음 단위 : px, em, vw 등 다양함 border-radius : 10px; 4방향을 동일하게 border-radius : 0 10px 0 0; 위쪽에서 오른쪽만 모서리 깎기

 

 

※ 이미지 출저 : KDT 국비교육 PPT에서 발췌하였습니다