📝img태그와 배치 및 스타일링

단순히  나 <br>을 사용하던 방식에서 벗어나, 요소를 컨테이너(Container)로 감싸고 CSS로 정밀하게 제어하는 방식을 정리해 보았습니다.

1. <img> 태그의 특징

배치를 시작하기 전, 우리가 다루는 이미지 태그의 핵심 특성 3가지를 기억해야 합니다.

1. 싱글 태그: <img>는 열고 닫는 구조가 아닌 하나짜리 태그입니다.
2. No Children: 이미지 태그 내부에는 다른 태그를 자식으로 넣을 수 없습니다.
3. src 속성: src="이미지 URL"을 통해 화면에 이미지를 불러옵니다.

---

2. 구조화와 CSS의 본격적인 결합

이미지를 각각의 독립된 컨테이너(nav)로 감싸고, CSS를 통해 박스 단위로 여백과 위치를 제어하는 방식으로 실습해보았습니다.

📝 HTML 구조

이미지를 3개씩 div와 article이라는 큰 틀에 담고, 각 이미지는 다시 nav로 감싸 구조적인 독립성을 확보했습니다.

<div>
    <nav>
        <img src="이미지1.jpg" alt="">
    </nav>
    <nav>
        <img src="이미지2.jpg" alt="">
    </nav>
    <nav>
        <img src="이미지3.jpg" alt="">
    </nav>
</div>

<nav style="height:50px;"></nav>

<article>
    <nav>
        <img src="이미지4.jpg" alt="">
    </nav>
    <nav>
        <img src="이미지5.jpg" alt="">
    </nav>
    <nav>
        <img src="이미지6.jpg" alt="">
    </nav>
</article>

🎨 CSS 스타일링

박스 모델의 원리를 이용해 간격을 제어합니다. inline-block을 통해 세로로 쌓이는 태그들을 가로로 나열하는 것이 핵심입니다.

/* 1. 모든 이미지의 너비를 300px로 고정 */
img {
    width: 300px;
}

/* 2. 컨테이너 내부의 요소(박스들)를 중앙으로 정렬 */
div, article {
    text-align: center;
}

/* 3.  핵심: 이미지를 감싸는 nav를 가로로 배치하고 여백 확보 */
div,article > nav {
    display: inline-block; /* 블록 요소를 가로로 나열 */
    width: 360px;          /* 이미지(300px)보다 넓게 설정하여 
                              60px의 여백 효과 생성 */
}

---

📝 레이아웃의 핵심: Padding과 Margin 완벽 정복

웹 페이지의 레이아웃을 잡는다는 것은 결국 "박스들의 크기와 간격을 조절하는 것"입니다. 오늘은 CSS 박스 모델의 핵심인 padding과 margin의 개념을 실습 예제와 함께 정리해 보겠습니다.

---

1. 핵심 개념 및 특징 정리

💡 Padding (안쪽 여백)

• 박스의 크기가 커집니다: padding을 주면 내용물 주변에 살이 붙는 것과 같아서 박스의 전체 크기가 늘어납니다.
• 배경색이 적용됩니다: 박스에 지정된 배경색이나 이미지는 padding 영역까지 채워집니다.
• 내용 보호: 글자나 이미지가 테두리에 너무 바짝 붙지 않도록 공간을 확보할 때 사용합니다.

💡 Margin (바깥쪽 여백)

• 요소 간의 간격: 박스 자체의 크기에는 변화가 없으며, 옆에 있는 다른 요소와의 거리를 벌릴 때 사용합니다.
• 배경색이 없습니다: 마진 영역은 투명하며, 부모 요소의 배경색이 비쳐 보입니다.
• 음수 값 가능: padding과 달리 마진은 -20px처럼 음수 값을 주어 요소들을 겹치게 할 수도 있습니다.

---

2. 실습 예제: 여백 제어하기

inline-block을 활용해 요소들을 가로로 나열하고, padding과 margin을 직접 적용해 보았습니다.

📝 HTML 구조

<div>안녕하세요.</div>
<section>잘가세요.</section>

🎨 CSS 스타일링

/* 공통 스타일 */
div, section {
    color: gold;
    font-weight: bold;
    font-size: 3rem;
    display: inline-block; /* 박스의 성질을 유지하면서 가로로 나열 */
}

/* div: 안쪽 여백(Padding) 강조 */
div {
    background-color: red;
    /* 박스의 안쪽 여백, 상하좌우 모두 100px */
    padding: 100px; 
}

/* section: 바깥쪽 여백(Margin) 강조 */
section {
    background-color: blue;
    /* 박스의 바깥쪽 여백, 상하좌우 모두 100px */
    margin: 100px;
}

3. 주의사항: inline 요소의 한계

img, a, span 같은 태그는 기본값이 display: inline입니다. 이 상태에서는 다음과 같은 특징이 있습니다.

• width/height가 무시됨
• 상하 padding/margin이 주변 요소를 밀어내지 못함

따라서 박스 모델을 제대로 활용하려면 display: inline-block으로 변경해주는 과정이 꼭 필요합니다!

---

✅ 한 줄 요약

Padding은 박스 내부의 공간을, Margin은 박스 외부의 공간을 만드는 것이다!