[사이트 만들기] 이미지 유형 03 - 이미지 스프라이트 & IR효과 활용하기

사이트 만들기 : 이미지 유형 03

이번 포스팅에서는 Figma에서 만든 이미지 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다.

Figma

먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자.
이번에 만들 웹 사이트의 유형은 큰 메인 이미지 한 장과 그 옆에 작은 사이즈의 이미지 4장이 배치된 구조이며, 마우스를 올려 놓으면(hover) 제목과 설명이 들어있는 검은색 블러 처리된 박스가 자연스럽게 올라오는 효과까지 반영시켜보도록 하겠다.

HTML 소스

웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것.

<body>
    <section id="imageType03" class="image__wrap gmarket section">
        <h1>귀여운 헬로키티를 보고 가세요😻</h1>
        <p>
            산리오의 상징 캐릭터 헬로키티를 보며 힐링합시다. 귀여운 고양이 친구 헬로키티를 실컷 보고 가세요!
        </p>
        <div class="image__inner container-fluid">
            <article class="image">
                <div class="image__desc">
                    <h3>헬로키티 가족들</h3>
                    <p>가족들과 함께 놀이동산에 놀러온 키티예요 😻</p>
                </div>
                <div class="image__sns">
                    <!-- ir 효과 : 스크린 리더기에는 읽히지만 겉으로는 안 보이게 하는 작업 -->
                    <a href="#" class="link"><span class="ir">공유하기</span></a>
                    <a href="#" class="link"><span class="ir">Twitter</span></a>
                    <a href="#" class="link"><span class="ir">Instagram</span></a>
                    <a href="#" class="link"><span class="ir">YouTube</span></a>
                    <a href="#" class="link"><span class="ir">Facebook</span></a>
                </div>
            </article>
            <article class="image">
                <figure class="image__box">
                    <img src="img/imageType03_bg02.jpg" alt="살아있는 헬로키티">
                </figure>
                <div class="image__desc">
                    <h3>살아있는 헬로키티</h3>
                    <p>헬로키티는 현실 속에 살고 있어요.</p>
                </div>
                <div class="image__sns">
                    <a href="#" class="link"><span class="ir">공유하기</span></a>
                    <a href="#" class="link"><span class="ir">Twitter</span></a>
                    <a href="#" class="link"><span class="ir">Instagram</span></a>
                    <a href="#" class="link"><span class="ir">YouTube</span></a>
                    <a href="#" class="link"><span class="ir">Facebook</span></a>
                </div>
            </article>
            <article class="image">
                <figure class="image__box">
                    <img src="img/imageType03_bg03.jpg" alt="헬로키티 튜닝카">
                </figure>
                <div class="image__desc">
                    <h3>헬로키티 튜닝카</h3>
                    <p>여러분의 자동차도 이렇게 꾸며봐요.</p>
                </div>
                <div class="image__sns">
                    <a href="#" class="link"><span class="ir">공유하기</span></a>
                    <a href="#" class="link"><span class="ir">Twitter</span></a>
                    <a href="#" class="link"><span class="ir">Instagram</span></a>
                    <a href="#" class="link"><span class="ir">YouTube</span></a>
                    <a href="#" class="link"><span class="ir">Facebook</span></a>
                </div>
            </article>
            <article class="image">
                <figure class="image__box">
                    <img src="img/imageType03_bg04.jpg" alt="헬로키티 네온사인">
                </figure>
                <div class="image__desc">
                    <h3>헬로키티 네온사인</h3>
                    <p>감성적인 헬로키티 네온사인입니다.</p>
                </div>
                <div class="image__sns">
                    <a href="#" class="link"><span class="ir">공유하기</span></a>
                    <a href="#" class="link"><span class="ir">Twitter</span></a>
                    <a href="#" class="link"><span class="ir">Instagram</span></a>
                    <a href="#" class="link"><span class="ir">YouTube</span></a>
                    <a href="#" class="link"><span class="ir">Facebook</span></a>
                </div>
            </article>
            <article class="image">
                <figure class="image__box">
                    <img src="img/imageType03_bg05.jpg" alt="산리오 주식회사">
                </figure>
                <div class="image__desc">
                    <h3>산리오 주식회사</h3>
                    <p>www.sanrio.co.jp</p>
                </div>
                <div class="image__sns">
                    <a href="#" class="link"><span class="ir">공유하기</span></a>
                    <a href="#" class="link"><span class="ir">Twitter</span></a>
                    <a href="#" class="link"><span class="ir">Instagram</span></a>
                    <a href="#" class="link"><span class="ir">YouTube</span></a>
                    <a href="#" class="link"><span class="ir">Facebook</span></a>
                </div>
            </article>
        </div>
    </section>
</body>

CSS 소스

reset에서 margin값과 padding값을 0으로 초기화 시키는 작업부터 시작한다.
또한, 애니메이션 효과를 주기 위해 transition 속성과 :hover 속성을 적극 활용한다.
이번에는 SNS 공유 아이콘 5개를 표시하기 위해 이미지 스프라이트 효과까지 사용되었다.
자세한 설명은 아래 예시 코드의 주석처리된 내용을 참조할 것.

/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

.gmarket {
    font-family: 'GmarketSans';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
a {
    text-decoration: none;
    color: #000;
}
img {
    width: 100%;    /* 이미지 튀어나온 거 집어넣기 */
    vertical-align: top;    /* 이미지 사이즈 빈공간없이 맞춰주기 */
}

/* common */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;  /* 반응형 할 때 없애줄 것 */
}
.container-fluid {
    width: 100%;
    padding: 0 100px;
    box-sizing: border-box; /* 스크롤바 생기는거 방지 */
}
.section {
    padding: 120px 0;
}
.section > h1 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 70px;
    color: #666;
}

/* ir 효과 (이미지 대체 효과 == alt) */
/* 화면상에서는 안나오게 함과 동시에 스크린리더기에는 읽히게 하는 작업 */
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

/* imageType */
/* Flex 대신 Grid를 사용하였다. */
.image__inner {
    display: grid;
    grid-template-areas: 
        "box1 box1 box2 box3"
        "box1 box1 box4 box5";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
    
}
.image {
    position: relative;
    overflow: hidden;
}
.image__inner .image {}
.image__inner .image:nth-child(1) {
    grid-area: box1;
    background: url(img/imageType03_bg01.jpg);
    background-size: cover;
}
.image__inner .image:nth-child(2) {
    grid-area: box2;
}
.image__inner .image:nth-child(3) {
    grid-area: box3;
}
.image__inner .image:nth-child(4) {
    grid-area: box4;
}
.image__inner .image:nth-child(5) {
    grid-area: box5;
}
.image__box {}
.image__desc {
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.5);
    padding: 16px;
    box-sizing: border-box;
    color: #fff;
    transition: all 0.4s ease;
}
.image:hover .image__desc {
    bottom: 0;
}
.image__desc h3 {
    font-size: 20px;
}
.image__desc p {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 300;
}
.image__sns {
    position: absolute;
    right: -100px;
    top: 10px;
    transition: all 0.4s ease;
}
.image__sns a {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin-bottom: 5px;
    background: url(img/image_bg03_icon.svg);
}
/* 이미지 스프라이트 */
/* 아이콘 5개를 이어 만든 프레임을 SVG로 추출하여 그 좌표값을 아래와 같이
    옮겨가며 아이콘 하나씩 보이도록 하는 기법 */
.image__sns a:nth-child(1) {
    
}
.image__sns a:nth-child(2) {
    background-position: -50px 0;
}
.image__sns a:nth-child(3) {
    background-position: -100px 0;
}
.image__sns a:nth-child(4) {
    background-position: -150px 0;
}
.image__sns a:nth-child(5) {
    background-position: -200px 0;
}

.image:hover .image__sns {
    right: 10px;
}

최종 결과

원본 사이트 보기

원본 소스 보기

'Site' 카테고리의 다른 글

[사이트 만들기] 텍스트 유형 02 (3)	2022.09.01
[사이트 만들기] 텍스트 유형 01 (3)	2022.08.30
[사이트 만들기] 이미지 유형 02 - Transition & Hover 활용하기 (2)	2022.08.17
[사이트 만들기] 이미지 유형 01 - 이미지 위에 설명, 버튼 넣기 (2)	2022.08.17
[사이트 만들기] 카드 유형 섹션 만들기 심화편 (10)	2022.08.10

코딩공책📚

[사이트 만들기] 이미지 유형 03 - 이미지 스프라이트 & IR효과 활용하기