CSS Box

📦 CSS Box Model

✏️ content

: 콘텐츠가 있는 상자 (width/height)

✏️ padding

: 안쪽 여백

✏️ border

: 테두리

🔎 특징

• 굵기, 스타일, 색상 지정 필수 (ex:px, solid, blue)
• border-radius -> 테두리 둥글게 (50%설정시 원형)

✏️ margin

: 요소와 요소 사이의 간격, 바깥 여백

😎 속기형 작성법

: 시계방향만 생각하기!!

p {
   padding : top light botton left
}

top, botton / light, left 은 세트

p {
   padding : 20px 40px
}
// top,botton 20px / light, left 40px

📦 CSS Box Type (display 속성)

✏️ block

: 길막, 기본적으로 가로 영역을 모두 차지함
: div, p, h, li 태그가 block 속성임

🔎 특징

• 별도 width 선언하지 앟으면 width는 부모요소와 같음
• 별도 width 값을 주면 남은 빈 공간은 margin으로 채움
• box model의 모든 속성 사용 가능
• 별도 height 선언하지 않으면 height는 자식요소의 height의 합과 같다.
• margin : 0 auto; --> block box center

✏️ inline

: 흐름, 옆으로 선으로 흐른다.
: span 태그가 inline 속성임

🔎 특징

• left, right 적용 가능
• width, height 적용 불가
• top, bottom 적용 불가

✏️ inline-block

: block 인데 inline 처럼 한 줄로 배치 가능한 속성
: 대표적으로 button, select 태그

💊 실무 tip

box-sizing : border-box; 로 css 설정하기

• 그래야지만 사람이 생각할 수 있는 box사이즈로 쉽게 생각하여 css를 작성할 수 있음.