[CSS] 박스 모델 & 레이아웃 속성

👩🏼‍💻 요소 크기, 박스 모델, display 속성, 여백, 투명도, 보더, 박스 그림자 등

---

1️⃣ 요소 크기와 박스 모델

width, height, min-height

div {
  width: 300px;
  height: 150px;
  min-height: 100px;
}

box-sizing

box-sizing: content-box; /* 기본값 */
box-sizing: border-box;  /* 패딩, 보더 포함한 전체 크기로 계산 */

---

2️⃣ display 속성

block, inline, inline-block

div { display: block; }
span { display: inline; }
button { display: inline-block; }

display : none vs visibility: hidden

• none: 요소가 아예 사라짐 (공간도 없음)
• visibility: hidden: 요소는 안 보이지만 공간은 유지됨

---

3️⃣ 수직 정렬

vertical-align

img {
  vertical-align: middle;
}

---

4️⃣ 오버플로우와 리사이즈

overflow

overflow: visible; /* 기본값 */
overflow: hidden;
overflow: scroll;
overflow: auto;

resize

resize: both;        /* 자유 조절 */
resize: horizontal;  /* 가로만 */
resize: vertical;    /* 세로만 */
resize: none;        /* 크기 변경 불가 */

---

5️⃣ 투명도

opacity

opacity: 0.3; /* 0 ~ 1 사이 값 */

• 요소 자체와 자식 모두 투명해짐

---

6️⃣ 테두리 (border-style)

border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

---

7️⃣ 모서리 둥글게 border-radius

border-radius: 30px;        /* 모든 모서리 둥글게 */
border-radius: 30px 0;      /* 좌상, 우하만 */
border-radius: 100%;        /* 원형 */

---

8️⃣ 박스 그림자 box-shadow

box-shadow: 10px 10px 10px gray;
box-shadow: 0 0 10px black;
box-shadow: 0 0 10px gray inset; /* 내부 그림자 */

---

9️⃣ 마진 겹침 (margin collapse)

• 상하 마진끼리는 겹쳐서 하나만 적용됨
• 좌우 마진은 겹쳐도 상쇄되지 않음

/* 겹침 방지 방법 */
padding: 1px;     /* 부모에 패딩 줌 */
border: 1px solid transparent;
display: inline-block;

---

🔟 정렬 속성 : align-content

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

• 교차축 방향에서의 정렬 (Flex/Grid)
• 값: flex-start, flex-end, center, space-between, stretch 등

---