[CSS] CSS 박스 모델

1️⃣ 블록 레벨요소  - <div>, <p> 등

 - 요소를 삽입했을 때 한 줄을 차지하는 요소

 - 요소의 너비가 100%

2️⃣ 인라인 레벨 요소 - <img>, <strong>, <span> 등

- 줄을 차지하지 않는 요소

- 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음

 

 

박스 모델

실체 1️⃣ 콘텐츠 영역, 2️⃣ 패딩(padding), 3️⃣ 박스의 테두리(border), 4️⃣ 마진(margin) 등의 요소로 구성

---

📌 width & height 속성

 : 실체 콘텐츠 영역의 크기 지정

[ defalut값 : auto ] 

 

width : 크기 or 백분율 or auto

height : 크기 or 백분율 or auto

 

📌 display 속성

 : 블록 레벨 요소 ➡️ 인라인 레벨 요소 OR 인라인 레벨 요소 ➡️ 블록 레벨 요소

 

[ 속성값 ]

 

✔️ block : 블록 레벨로

✔️ inline : 인라인 레벨로

✔️ inline-block : 인라인 레벨로 배치하면서 내용은 블록으로

✔️ none : 해당 요소를 화면에 표시 ❌

✔️ 기타 🔻

📌 border 속성

   : 순서 상관없이 스타일, 두께, 색상 등을 묶어 표기

 

📌 border-style 속성

[ default값 : none ] ➡️ 화면에 테두리 표시 ❌

 

[ 속성 값 ]

📌 border-width 속성

    : 테두리 두께 설정

 

< 기본형 >

 

border-top-width : 크기 or thin or medium or thick

border-right-width : 크기 or thin or medium or thick

border-bottom-width : 크기 or thin or medium or thick

border-left-width : 크기 or thin or medium or thick

border-width : 크기 or thin or medium or thick

 

- 속성값이 1️⃣개 면 네방향 모두 같은 두께

- 속성값이 2️⃣개 면 (위 아래) , (좌우) 묶어서 

- 속성값이 4️⃣개 면 top 부터 시계방향 

 

📌border-color 속성

   : 테두리 색상 지정

 

< 기본형 >

 

border-top-color : 색상 

border-right-color : 색상 

border-bottom-color : 색상 

border-left-color : 색상 

border-color : 색상 

 

 

📌 border-radius 속성

    : 박스 모서리 부분을 둥글게 처리 

 

< 기본형 >

 

border-top-left-radius : 크기 or 백분율  or ( 가로크기  세로크기 )

border-top-right-radius : 크기 or 백분율  or ( 가로크기  세로크기 )

border-bottom-left-radius : 크기 or 백분율  or ( 가로크기  세로크기 )

border-bottom-right-radius : 크기 or 백분율  or ( 가로크기  세로크기 )

border-radius : 크기 or 백분율  or ( 가로크기  세로크기 ) 

 

 

📌box-shadow 속성

   : 선택한 요소에 그림자 효과 내기

 

< 기본형 >

 

    box-shadow : [수평 거리] [수직거리] [흐림정도] [번짐정도] [색상]

  ❗️      은 필수 속성

---

[ 여백을 조절하는 속성들 ] - margin & padding

🔎 margin 속성

   : 현재 요소 주변의 여백 / 요소와 요소간의 간격 조절 가능

< 기본형 >

 

margin-top : 크기 or 백분율 or auto

margin-right : 크기 or 백분율 or auto

margin-bottom : 크기 or 백분율 or auto

margin-left : 크기 or 백분율 or auto

margin : 크기 or 백분율 or auto

 

 

 

- 속성값이 1️⃣개 면 네방향 모두 같은 두께

- 속성값이 2️⃣개 면 (위 아래) , (좌우) 묶어서 

- 속성값이 3️⃣개 면 빠진 값은 마주보는 방향의 속성값

- 속성값이 4️⃣개 면 top 부터 시계방향 

🔎 padding 속성

   : 콘텐츠 영역과 테두리 사이의 여백 

< 기본형 >

 

padding-top : 크기 or 백분율 or auto

padding-right : 크기 or 백분율 or auto

padding-bottom : 크기 or 백분율 or auto

padding-left : 크기 or 백분율 or auto

padding : 크기 or 백분율 or auto