width, height :
기본값 auto
div :
기본값 auto
블록요소로 부모크기만큼 자동으로 늘어남
max-width,max-height :
가로/세로 너비 최대 제한
min-width,min-height :
가로/세로 너비 최소 제한
em: 1em = html 기본 사이즈 16px 글자와 같은(font-size)는 상속되어 부모에서 설정 시 자식도 물려받아 em의 단위로 바뀐다.
rem: html에서 설정한 font-size에 따라 1em=font-size로 바뀐다.
vw, vh: 뷰포트의 비율에 따라 사용 50vw, 50vh 절반만큼 사용
box-sizing
사용용도 : padding이나 border등 추가할시 기존 width와 height에서 커지는것을 계산하여 크기를 맞춰줌
기본설정은 content-box
자동계산은 border-box 는 width와 height를 border까지 영역을 포함하여 계산
overflow 넘침을 당하는 부모에게 적용시킨다.
기본값 visible 넘치던 말던 보여줘라
hidden 넘치는걸 잘라라
scroll 가로,세로모두 스크롤을만들어 보여줘라
auto 넘치는 부분만 스크롤을 만들어라
font 폰트
line-height :위아래 줄 간격
숫자만 입력시 기본폰트X숫자가 간격
px로 입력시 숫자px가 간격
결론은 line-height의 수치가 줄 간의 간격사이에 해당 크기만큼의 폰트크기의 투명글이 들어간다는것
폰트크기에 따라 line-height를 비율로 변환하게 하는것이 좋으므로 px가아닌 배수로지정하는것이 관리면에서 편함
font-family: 글꼴1,글꼴2, 글꼴계열(필수)
띄어쓰기 글꼴은 ""큰따옴표로묶기 또는 전부다 큰따옴표로 묶어도 상관없음
'html과CSS 고급' 카테고리의 다른 글
2021-07-10 Part(1)_ch(9) JS선행 (0) | 2021.07.11 |
---|---|
2021-07-10 Part(1)_ch(8)_(18~25) 오버워치선택제작 (0) | 2021.07.10 |
2021-07-08 Part(1)_ch(8)_(13~17) (0) | 2021.07.08 |
2021-07-06 Part(1)_ch(5~7) (0) | 2021.07.06 |
2021-07-05 Part(1)_ch(1~4) (0) | 2021.07.05 |