이미지 박스에 마우스 호버시 확대되는 html/css

본이미지는 pixabay 에서 가지고온 이미지임

이미지 갤러리 레이아웃 - 설명

📋 개요

Flexbox를 사용하여 4개의 이미지를 나란히 배치하고, 호버 시 이미지가 확대되는 효과를 구현한 레이아웃입니다.

---

🏗 HTML 구조

<ul class="bigbox bigbox1">
    <li class="box box1">
        <img src="images/women1.jpg" alt="">
    </li>
    <li class="box box2">
        <img src="images/women2.jpg" alt="">
    </li>
    <li class="box box3">
        <img src="images/women3.jpg" alt="">
    </li>
    <li class="box box4">
        <img src="images/women4.jpg" alt="">
    </li>
</ul>

구조 설명

• ul.bigbox: Flex 컨테이너 역할을 하는 리스트
• li.box: 각 이미지를 담는 리스트 아이템 (Flex 아이템)
• img: 실제 이미지 요소

---

🎨 CSS 상세 설명

1. Reset CSS

* {
    margin: 0;
    padding: 0;
}

• 목적: 브라우저 기본 스타일 제거
• 모든 요소의 마진과 패딩을 0으로 초기화

2. 리스트 스타일 제거

ul {
    list-style: none;
}

• 목적: ul의 기본 불릿(•) 제거
• 리스트처럼 보이지 않게 만듦

3. Flex 컨테이너 (.bigbox1)

.bigbox1 {
    width: 1000px;
    margin: 10px auto;
    border: 5px solid tan;
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
}

주요 속성 설명

속성	값	설명
width	1000px	컨테이너의 고정 너비
margin: 10px auto	상하 10px, 좌우 자동	중앙 정렬 (좌우 마진을 auto로 설정)
border	5px solid tan	테두리 스타일 (두께, 실선, 색상)
display	flex	Flexbox 활성화
justify-content	space-around	주축 방향 정렬 (각 아이템 주위에 동일한 공간)
padding	20px 0	상하 패딩 20px, 좌우 0

justify-content: space-around 효과

[공간] [아이템1] [공간] [아이템2] [공간] [아이템3] [공간] [아이템4] [공간]

• 각 아이템의 좌우에 동일한 공간을 배분
• 양 끝에도 공간이 생김

4. Flex 아이템 (.box)

.bigbox .box {
    width: 200px;
    height: 150px;
    border: 1px solid tan;
    position: relative;
    overflow: hidden;
}

주요 속성 설명

속성	값	설명
width	200px	박스 너비 (고정)
height	150px	박스 높이 (고정)
border	1px solid tan	박스 테두리
position	relative	상대 위치 (자식 요소의 absolute 기준점)
overflow	hidden	넘치는 부분 숨김 (이미지 확대 시 박스 밖으로 나가지 않음)

position: relative의 역할

• 자식 요소(img)가 position: absolute일 경우 기준점이 됨
• 이 경우에는 overflow: hidden과 함께 사용되어 박스 영역 제한

overflow: hidden의 역할

• 호버 시 이미지가 scale(1.2)로 확대되어도 박스 영역을 벗어나지 않음
• 이미지가 잘려 보이지 않게 함

5. 이미지 기본 스타일

.bigbox .box img {
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
}

주요 속성 설명

속성	값	설명
display	block	인라인 요소 → 블록 요소 (하단 여백 제거)
width	100%	부모(.box) 너비에 맞춤
height	100%	부모(.box) 높이에 맞춤
transition	all 0.5s	모든 속성 변화를 0.5초에 걸쳐 부드럽게

transition: all 0.5s 효과

• 호버 시 이미지 확대가 부드럽게 진행됨
• all: 모든 속성 변화에 적용
• 0.5s: 0.5초 동안 애니메이션

6. 호버 효과 (.box:hover img)

.bigbox .box:hover img {
    transform: scale(1.2);
}

주요 속성 설명

속성	값	설명
.box:hover	-	.box에 마우스 오버 시
transform	scale(1.2)	이미지를 1.2배 확대

transform: scale(1.2) 효과

• 원본 크기의 120%로 확대
• 중심점 기준으로 확대됨 (기본값: transform-origin: center center)
• transition과 함께 사용되어 부드러운 애니메이션 효과

---

🎯 핵심 기술 포인트

1. Flexbox 레이아웃

display: flex;
justify-content: space-around;

• Flexbox: 수평/수직 정렬과 공간 분배에 최적화
• justify-content: space-around: 아이템 주위에 균등한 공간 배분

2. 중앙 정렬

width: 1000px;
margin: 10px auto;

• 고정 너비 + 좌우 마진 auto = 중앙 정렬
• Flexbox 없이도 사용 가능한 중앙 정렬 방법

3. 이미지 확대 효과

overflow: hidden;  /* 부모 */
position: relative;  /* 부모 */

transition: all 0.5s;  /* 이미지 */
transform: scale(1.2);  /* 호버 시 */

• overflow: hidden: 확대된 이미지가 박스 밖으로 나가지 않음
• transition: 부드러운 애니메이션 효과
• transform: scale(): 성능 좋은 크기 조절 (레이아웃 재계산 없음)

4. 이미지 크기 맞추기

width: 100%;
height: 100%;
object-fit: cover;  /* 선택적: 비율 유지하며 채우기 */

• 부모 박스에 맞춰 이미지 크기 조절
• object-fit: cover 추가 시 비율을 유지하며 채울 수 있음 (현재 코드에는 없음)

---

📊 시각적 흐름

레이아웃 구조

┌─────────────────────────────────────────────────┐
│            .bigbox1 (1000px, 중앙)              │
│  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐        │
│  │ box1 │  │ box2 │  │ box3 │  │ box4 │        │
│  │ img  │  │ img  │  │ img  │  │ img  │        │
│  └──────┘  └──────┘  └──────┘  └──────┘        │
│    200px     200px     200px     200px          │
│  (space-around로 균등한 간격)                    │
└─────────────────────────────────────────────────┘

호버 시 변화

[일반 상태]
┌──────┐
│ img  │  ← 200px × 150px
└──────┘

[호버 시]
┌──────┐
│ ╔══╗ │  ← scale(1.2) → 240px × 180px
│ ║img║ │     (overflow: hidden으로 잘림)
│ ╚══╝ │
└──────┘

---

🔍 추가 학습 포인트

1. justify-content 옵션 비교

값	설명	시각적 효과
flex-start	시작점 정렬	[아이템][아이템][아이템][아이템]공간
flex-end	끝점 정렬	공간[아이템][아이템][아이템][아이템]
center	중앙 정렬	공간[아이템][아이템][아이템][아이템]공간
space-between	양끝 정렬	[아이템]공간[아이템]공간[아이템]공간[아이템]
space-around	균등 간격	공간[아이템]공간[아이템]공간[아이템]공간[아이템]공간
space-evenly	완전 균등	공간[아이템]공간[아이템]공간[아이템]공간[아이템]공간

2. transform vs width/height 변경

/* ❌ 성능 낮음 (레이아웃 재계산 발생) */
.box:hover img {
    width: 240px;  /* 200px × 1.2 */
    height: 180px;  /* 150px × 1.2 */
}

/* ✅ 성능 좋음 (레이아웃 재계산 없음) */
.box:hover img {
    transform: scale(1.2);
}

차이점:

• width/height 변경: 레이아웃 재계산 발생 → 성능 저하
• transform: GPU 가속 활용 → 성능 우수

3. object-fit 속성 (선택적 개선)

현재 코드에서는 이미지 비율이 다를 경우 왜곡될 수 있습니다.

.bigbox .box img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 추가: 비율 유지하며 채우기 */
    object-position: center;  /* 추가: 중앙 정렬 */
}

object-fit 옵션:

• fill: 비율 무시하고 채움 (기본값, 왜곡 가능)
• cover: 비율 유지하며 채움 (잘릴 수 있음)
• contain: 비율 유지하며 맞춤 (빈 공간 생길 수 있음)

---

💡 실전 활용 팁

1. 반응형 디자인

.bigbox1 {
    width: 100%;
    max-width: 1000px;  /* 최대 너비 제한 */
    margin: 10px auto;
}

.bigbox .box {
    flex: 1;  /* 가변 너비 */
    max-width: 250px;  /* 최대 너비 제한 */
    height: 150px;
}

2. 갭(Gap) 추가

.bigbox1 {
    display: flex;
    gap: 20px;  /* 아이템 간 간격 */
    justify-content: center;  /* 중앙 정렬 */
}

3. 호버 시 추가 효과

.bigbox .box:hover {
    border-color: #ff6b6b;  /* 테두리 색상 변경 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);  /* 그림자 추가 */
}

.bigbox .box:hover img {
    transform: scale(1.2);
    filter: brightness(1.1);  /* 밝기 증가 */
}

---

📝 요약

1. Flexbox: display: flex + justify-content: space-around로 아이템 배치
2. 중앙 정렬: 고정 너비 + margin: auto
3. 이미지 확대: transform: scale() + transition으로 부드러운 효과
4. 영역 제한: overflow: hidden으로 확대된 이미지 잘라내기
5. 성능 최적화: transform 사용으로 GPU 가속 활용

---

🎓 학습 체크리스트

• Flexbox의 justify-content 속성 이해
• margin: auto를 이용한 중앙 정렬 이해
• transform: scale()과 transition 조합 이해
• overflow: hidden의 역할 이해
• 이미지 크기 조절 방법 이해 (width/height vs object-fit)
• transform vs width/height 성능 차이 이해