이마트 몰처럼 썸네일에 연한 배경을 깔아보자! > THUMBNAIL

[ TECH ]
이마트 몰처럼 썸네일에 연한 배경을 깔아보자!

페이지 정보

작성자 유컴어스 작성일 25-12-11 23:30

본문

썸네일 영역에 배경 색상을 추가하고, 그 안에 여러 개의 링크된 썸네일 이미지를 CSS의 Flexbox를 활용하여 가로로 나열하는 코드 예시입니다.

이 코드는 HTML 구조와 필수적인 CSS 스타일링을 포함하고 있습니다.

HTML 코드: 여러 개의 링크된 썸네일 구조

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Thumbnails with Background</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- 썸네일 영역 컨테이너 (배경 색상 적용될 곳) -->
    <div class="thumbnail-container">
        
        <!-- 개별 썸네일 아이템 (링크 포함) -->
        <a href="#" class="thumbnail-item">
            <img src="image1.jpg" alt="상품 썸네일 1">
        </a>

        <a href="#" class="thumbnail-item">
            <img src="image2.jpg" alt="상품 썸네일 2">
        </a>

        <a href="#" class="thumbnail-item">
            <img src="image3.jpg" alt="상품 썸네일 3">
        </a>

        <!-- 필요한 만큼 <a> 태그와 <img> 태그를 추가합니다 -->
        
    </div>

</body>
</html>

코드를 사용할 때는 주의가 필요합니다.

CSS 코드 (styles.css): 배경색 및 Multiple 처리

css

/* 썸네일 영역 전체를 감싸는 컨테이너 스타일 */
.thumbnail-container {
    /* 배경 색상 적용 (원하는 색상 코드로 변경하세요) */
    background-color: #f0f0f0; 
    
    padding: 20px; /* 배경색이 잘 보이도록 여백 추가 */
    border-radius: 8px; /* 모서리 둥글게 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    /* Flexbox를 사용하여 내부 아이템(썸네일)을 가로로 나열 */
    display: flex;
    justify-content: space-around; /* 아이템들을 균등한 간격으로 배치 */
    /* 또는 gap: 10px; 으로 간격 설정도 가능 */
}

/* 개별 썸네일 링크 스타일 */
.thumbnail-item {
    display: block;
    /* 썸네일 크기 설정 (원하는 크기로 변경) */
    width: 100px; 
    height: 100px;
    
    border: 1px solid #ddd; /* 이미지 테두리 */
    border-radius: 5px;
    overflow: hidden; /* 이미지가 테두리를 넘어가지 않게 숨김 */
    
    /* 마우스 오버 시 효과 */
    transition: transform 0.3s ease;
}

.thumbnail-item:hover {
    transform: scale(1.05); /* 마우스 오버 시 살짝 확대 */
}

/* 썸네일 이미지 자체 스타일 */
.thumbnail-item img {
    width: 100%; /* 부모(링크 태그) 크기에 맞춤 */
    height: 100%; /* 부모(링크 태그) 크기에 맞춤 */
    object-fit: cover; /* 이미지가 비율을 유지하며 영역을 꽉 채우도록 설정 */
}

코드를 사용할 때는 주의가 필요합니다.

코드 설명

HTML 구조:
- <div class="thumbnail-container">가 전체 배경색이 들어갈 영역입니다.
- 그 안에 <a href="#" class="thumbnail-item"> 태그들이 각각의 링크 역할을 합니다.
- 링크 태그 안에 <img> 태그로 실제 썸네일 이미지를 넣습니다.
CSS 스타일링:
- .thumbnail-container에 background-color를 지정하여 배경을 설정합니다.
- display: flex; 속성을 사용하여 하위 요소(링크된 썸네일)들을 자동으로 가로 방향으로 정렬되게 합니다.
- justify-content: space-around;는 썸네일들 사이에 균일한 간격을 부여합니다.
- .thumbnail-item img의 object-fit: cover; 속성은 이미지 비율을 깨지 않고 지정된 크기에 맞춰 꽉 채워지도록 합니다.

THUMBNAIL

페이지 정보

본문

관련링크