혼자 HTML 튀김: display: block | inline-block | none

1. display: block

• 한 줄을 다 차지해요. 다음 요소는 새 줄에서 시작됩니다.
• 대표적인 예: <div>, <p>, <h1> 등

📌 결과: 두 박스가 세로로 쌓여요.

---

2. display: inline-block

• 줄 바꿈 없이 옆에 나열되지만, 크기(width, height)를 지정 가능해요.
• 대표적인 예: 버튼처럼 생긴 박스들을 가로로 나열하고 싶을 때

📌 결과: 두 박스가 가로로 나란히 나와요.

---

3. display: none

• 화면에서 완전히 사라짐. 공간조차 차지하지 않아요.
• JavaScript로 요소를 숨길 때 자주 사용돼요.

📌 결과: 해당 요소는 보이지도 않고, 공간도 없음. 마치 없는 것처럼 돼요.

---

값	특징	줄 바꿈	크기 조절	예시
block	한 줄 전체 차지	O	O	<div>, <p>
inline-block	옆에 나란히, 크기 조절 가능	X	O	버튼, 카드 박스
none	화면에서 안 보이고 공간도 없음	-	-	숨김 처리