[사이트 만들기] 이미지 유형 02 - Transition & Hover 활용하기

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

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

Figma

먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자.
이번에 만들 웹 사이트의 유형은 이미지 위에 제목과 자세히 보기 버튼을 올려놓고 그걸 hover 효과로 위로 나타나게 하는 애니메이션을 주도록 하겠다.

HTML 소스

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

<body>
    <section id="imageType02" class="image__wrap gmarket section">
        <h1>별빛 제빵교실 강사 소개🍞</h1>
        <p>사람 아닌 동물이지만 훌륭한 실력을 가진 별빛 제빵교실의 강사분들을 소개합니다!</p>
        <div class="image__inner container">
            <article class="image img1">
                <figure class="image__box">
                    <img src="img/imageType02_bg01.jpg" alt="댕댕이">
                </figure>
                <div class="image__desc">
                    <h3>댕댕이</h3>
                    <a href="/" class="more" title="자세히 보기">자세히 보기</a>
                </div>
            </article>
            <article class="image img2">
                <figure class="image__box">
                    <img src="img/imageType02_bg02.jpg" alt="냥냥이">
                </figure>
                <div class="image__desc">
                    <h3>냥냥이</h3>
                    <a href="/" class="more" title="자세히 보기">자세히 보기</a>
                </div>
            </article>
            <article class="image img3">
                <figure class="image__box">
                    <img src="img/imageType02_bg03.jpg" alt="북극곰">
                </figure>
                <div class="image__desc">
                    <h3>북극곰</h3>
                    <a href="/" class="more" title="자세히 보기">자세히 보기</a>
                </div>
            </article>
        </div>
    </section>
</body>

CSS 소스

reset에서 margin값과 padding값을 0으로 초기화 시키는 작업부터 시작한다.
또한, 애니메이션 효과를 주기 위해 transition 속성과 :hover 속성을 적극 활용한다.
자세한 설명은 아래 예시 코드의 주석처리된 내용을 참조할 것.

<style>
    /* 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%;    /* 이미지 튀어나온 거 집어넣기 */
    }

    /* common */
    .container {
        width: 1160px;
        padding: 0 20px;
        margin: 0 auto;
        min-width: 1160px;  /* 반응형 할 때 없애줄 것 */
    }
    .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;
    }

    /* imageType */
    .image__inner {
        display: flex;
        justify-content: space-between;
    }
    .image {
        width: 32%;
        position: relative;
        overflow: hidden;
    }
    .image__box {
        height: 100%;
    }
    .image__box img {
        transition: all 0.5s ease-in-out;   /* 0.5초동안 걸쳐 변화 주도록 애니메이션 설정 */
    }
    .image__desc {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;     /* image__desc 박스 안넘치게 하기 */
        backdrop-filter: blur(10px);
        transition: all 0.3s ease-in-out;
    }

    /* 이미지 설명칸 배경색, h3/more 글씨색상 설정 */
    .img1 > .image__desc {
        background: rgba(178, 82, 36, 0.5);
    }
    .img1 > .image__desc h3 {
        color: #fff;
    }
    .img1 > .image__desc .more {
        color: #fff;
    }
    .img2 > .image__desc {
        background-color: rgba(187, 238, 239, 0.5);
    }
    .img2 > .image__desc h3 {
        color: #006462;
    }
    .img2 > .image__desc .more {
        color: #006462;
    }
    .img3 > .image__desc {
        background-color: rgba(161, 166, 172, 0.5);
    }
    .img3  > .image__desc h3 {
        color: #183169;
    }
    .img3  > .image__desc .more {
        color: #183169;
    }

    /* 위로 올라오는 애니메이션 주기 위해 hover 효과 주기 */
    .img1 .image__desc {
        bottom: -100px;
    }
    .img1:hover .image__desc {
        bottom: 0;
    }
    .img2 .image__desc {
        bottom: -100px;
    }
    .img2:hover .image__desc {
        bottom: 0;
    }
    .img3 .image__desc {
        bottom: -100px;
    }
    .img3:hover .image__desc {
        bottom: 0;
    }

    .image:hover .image__box img {
        transform: scale(1.05);     /* 마우스 커서 올리면 1.05정도 이미지 키워줌 */
    }

    /* 이미지 설명칸 글씨 크기와 margin값 등등... */
    .image__desc h3 {
        font-size: 24px;
        margin-bottom: 5px;
    }
    .image__desc .more {
        font-size: 16px;
        font-weight: 300;
    }
    .image__desc .more:hover {
        text-decoration: underline;
    }
</style>

최종 결과

원본 사이트 보기

원본 소스 보기

'Site' 카테고리의 다른 글

[사이트 만들기] 텍스트 유형 01 (3)	2022.08.30
[사이트 만들기] 이미지 유형 03 - 이미지 스프라이트 & IR효과 활용하기 (6)	2022.08.20
[사이트 만들기] 이미지 유형 01 - 이미지 위에 설명, 버튼 넣기 (2)	2022.08.17
[사이트 만들기] 카드 유형 섹션 만들기 심화편 (10)	2022.08.10
[사이트 만들기] 카드(8개) 유형 섹션 만들기 (11)	2022.08.09

코딩공책📚

[사이트 만들기] 이미지 유형 02 - Transition & Hover 활용하기

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

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[사이트 만들기] 이미지 유형 02 - Transition & Hover 활용하기

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

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바