max-width / max-height 는 기본값이 none이며
min-width / min-height 는 기본값이 0이다
글자의 크기
em = 요소의 글꼴 크기 (1em이 기본값)
rem = 루트(최상위) 즉 html 요소의 글꼴 크기
vw = 뷰포트 가로 너비의 백분율
vh = 뷰포트 세로 너비의 백분율
margin
= 10px (전체영역)
10px 20px (위아래 , 좌우)
10px 20px 30px(위 좌우 아래)
10 20 30 40 (위 오른 아래 왼)시계방향
padding
= 내부의 여백이 커지기 때문에 요소의 크기가 커진다.
box-sizing
box-sizing의 기본은 content-box로 되어있다.
content-box = 요소의 내용으로 크기 계산
border-box = 요소의 내용 + padding + border로 계산
overflow
요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
기본값(visible) = 넘친 내용을 그대로 보여줌
heidden = 넘친 내용을 잘라냄
scroll = 넘친 내용을 잘라내고 스크롤을 생성
auto = 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
display
요소의 화면 출력(보여짐) 특성
이미 요소에 지정되어져 있는 값
-
block = 상자(레이아웃)요소
-
inline = 글자 요소
-
inline-block = 글자 + 상자 요소
따로 지정해서 사용하는 값
-
flex = 플렉스 박스 (1차원 레이아웃)
-
grid = 그리드 (2차원 레이아웃)
-
none = 보여짐 특성 없음, 화면에서 사라짐
기타 = table,table-row 등...
opacity
요소 투명도를 설정
기본값 = 1이고 0~1사이의 소수점 숫자로 설정
text-indent
첫줄 들여쓰기 할때 사용
배경 설정
background-image : 배경이미지를 삽입할 수 있음
background-size : 배경이 width,height 요소에 맞게 설정(너무 작게하면 바둑판때문에 여러개의 사진이 나옴)
이를 해결하기 위해
background-repeat: no-repeat;
를 사용하여 하나만 출력하게 할 수 있음
background-position : 배경의 위치를 설정
background-attachment : 요소의 배경 이미지 스크톨 특성
기본값(scroll) - 이미지가 요소를 따라서 같이 스크롤
fixed - 이미지가 뷰포트에 고정, 스크롤 x
