9. CSS_이미지 요소를 세로로 배치하기

img {
  display: block;      /* img는 원래 인라인 요소 → 블록 요소로 바꿔서 줄 단위 배치 */
  border: 3px double #999; 
  margin: 15px auto;  
}

 

display:block;

• img는 기본적으로 inline 요소라서 텍스트처럼 옆으로 나란히 배치
• block으로 바꾸면 한 줄 전체 차지 → 이미지 하나씩 세로로 내려감.
• 그래서 여러 이미지를 넣으면 세로 방향으로 차례대로 출력

 

---

📌 Block 요소

• 특징:
  • 항상 한 줄 전체 차지
  • 옆에 다른 요소 올 수 없음
  • width, height, margin, padding 다 적용 가능
• 대표 태그:
  • <div>
  • <p>
  • <h1> ~ <h6>
  • <ul>, <ol>
  • <li>
  • <table>, <section>, <article> …

---

📌 Inline 요소

• 특징:
  • 내용 크기만큼만 차지
  • 옆에 다른 요소 올 수 있음
  • width, height 직접 지정 불가 (margin/padding도 좌우만 적용, 위아래는 잘 안 먹힘)
• 대표 태그:
  • <span>
  • <a>
  • <img> (이미지는 inline이지만 크기 지정 가능 → 특수한 경우)
  • <strong>, <em>, <b>, <i>
  • <label>

---

📌 Inline-block (혼합형)

• display:inline-block; 으로 바꾸면,
  • 옆으로 나란히 배치 가능 (inline 특성)
  • width, height, margin, padding 모두 적용 가능 (block 특성)

---

✅ 정리:

• Block: 줄바꿈 된다 → “박스형 구조”
• Inline: 줄바꿈 안 된다 → “글자처럼 옆에 붙음”
• Inline-block: inline + block 장점 합친 것