💟프론트💟 - 모던 웹을 위한 CSS 박스모델 이해

잔재미코딩 - 풀스택을 위한 탄탄한 프런트엔드 부트캠프

---

CSS 박스 모델

box 형태의 세부 사항 수정 가능

<div> 대표적 박스 요소

컨텐트는 항상 안 보이는 보더가 있고 그 사이에 패딩 존재

마진도 지정 가능 

 

width / height 프로퍼티 

box-sizing 프로퍼티:  content-box로 지정

=> width/height : content 영역의 너비 높이 됨

 

box-sizing 프로퍼티:  border-box로 지정

=> width/height  : content+padding+border 영역의 너비 높이 됨

 

컨텐츠가 지정된 width height를 넘치면 영역 밖으로 나감 => overflow 프로퍼티를 hidden으로 설정하여 넘친 컨텐츠 감추기

+ max-width / max-height 프로퍼티

요소 너비가 브라우저 너비보다 클 경우 가로 스크롤바 생성 : 별로

max-width 사용시 요소 너비가 자동으로 줄어듬

---

margin / padding 프로퍼티

마진과 패딩에 -top -right -bottom, -left를 붙여서 각각 설정하기 

한번에, 또는 두개씩도 가능

또는 단축 설정도 가능 (시계방향)

 

margin : npx npx npx npx 이렇게 단축설정하기

---

border 프로퍼티

선 스타일 설정 참고하기

border-style - CSS: Cascading Style Sheets | MDN

선 색깔 지정 가능

 

---

오늘은 세은이랑 밥먹고 +소은이랑 이씨씨공부 집와서 1D1S 줌공햇다