Dragonball Online Goku Hand
본문 바로가기
사이트 제작하기/Image Type 이미지 유형

[사이트 제작] 세번째 : 이미지 유형 TYPE.03

by 별의 코비 2022. 8. 21.
728x90

사이트 제작하기 : 이미지 유형03

사이트 유형에는 이미지 유형도 있습니다.
카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다.
이 유형은 마우스를 사진에 가져갔을 때 새로운 박스와 함께 여러 개의 아이콘이 등장하는 것이 특징입니다.

오늘 만들 사이트 형식

사이트 제작 방법

1. 이번 유형은 어떤 유형일까?

이번 이미지 유형은 이미지 유형02와 같이 사진에 마우스를 가져갔을 때 새로운 박스가 생기게 하는 유형입니다.
유형02와 다른 점은 레이아웃 구조와 마우스를 가져갔을 때 박스 안에 아이콘까지 나타나게 하는 것입니다.
자세하게 배워봅시다!

이미지유형03
이미지유형03_01

2. vscode를 통해 코딩해주기! : HTML편

레이아웃을 다 설정해줬다면 코딩을 해봅시다!
html의 body 부분에 레이아웃 구역을 정해줍니다.

★ 레이아웃 틀 잡기
1. section에 id값과 class값을 지정하기
2. 제목과 설명 작성하기
3. 사진이 3개이므로 image__inner로 세 개의 카드 포함하기
4. 카드의 공통된 요소와 각각의 카드 특징들이 있으므로 article로 각각의 카드 요소(이미지, 이미지 제목과 설명, 아이콘들)를 묶기
5. 이미지랑 자세히 보기 다른 것과 충돌나지 않게 클래스 지정해주기
6. 첫번째 이미지는 CSS백그라운드로 넣을거여서 첫번째 이미지 들어가는 figure부분은 주석처리해주기
<body>
    <section id="imageType03" class="image__wrap gmarket section">
        <h1>영양 만점 비타민 풍부 과일들</h1>
        <p>우리들의 건강을 위해서 충분한 비타민과 갖가지의 영양소를 고루 갖춘 과일들을 소개합니다!</p>
        <div class="image__inner container-fluid">
            <article class="image">
                <!-- <figure class="image__box">
                    <img src="img/imageType03_01.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">트위터</span></a>
                    <a href="#" class="link"><span class="ir">인스타</span></a>
                    <a href="#" class="link"><span class="ir">유튜브</span></a>
                    <a href="#" class="link"><span class="ir">페이스북</span></a>
                </div>
            </article>
            <article class="image">
                <figure class="image__box">
                    <img src="img/imageType03_02.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">트위터</span></a>
                    <a href="#" class="link"><span class="ir">인스타</span></a>
                    <a href="#" class="link"><span class="ir">유튜브</span></a>
                    <a href="#" class="link"><span class="ir">페이스북</span></a>
                </div>
            </article>
            <article class="image">
                <figure class="image__box">
                    <img src="img/imageType03_03.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">트위터</span></a>
                    <a href="#" class="link"><span class="ir">인스타</span></a>
                    <a href="#" class="link"><span class="ir">유튜브</span></a>
                    <a href="#" class="link"><span class="ir">페이스북</span></a>
                </div>
            </article>
            <article class="image">
                <figure class="image__box">
                    <img src="img/imageType03_04.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">트위터</span></a>
                    <a href="#" class="link"><span class="ir">인스타</span></a>
                    <a href="#" class="link"><span class="ir">유튜브</span></a>
                    <a href="#" class="link"><span class="ir">페이스북</span></a>
                </div>
            </article>
            <article class="image">
                <figure class="image__box">
                    <img src="img/imageType03_05.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">트위터</span></a>
                    <a href="#" class="link"><span class="ir">인스타</span></a>
                    <a href="#" class="link"><span class="ir">유튜브</span></a>
                    <a href="#" class="link"><span class="ir">페이스북</span></a>
                </div>
            </article>
        </div>
        </div>
    </section>
</body>

3. vscode를 통해 코딩해주기! : CSS편

style을 통해 CSS를 설정해줍니다.
피그마로 만들어 놓은 레이아웃을 보며 HTML로 구역을 정해준 후 CSS로 하나하나 디자인해 나가는 것이 중요합니다!

★ 레이아웃 스타일 넣기
∙ 그리드 사용 → display: gird / grid-template-areas / grid-template-columns / grid-template-rows
∙ .image__inner .image:nth-child(1)을 통해 이미지 중 첫번째 이미지한테 스타일을 준다는 것이므로 여기에 background: url()로 이미지 첨부
∙ background-size: cover을 넣어주어야 정해 놓은 레이아웃 사이즈에 알맞게 들어감 (안그러면, 하나의 이미지가 여러개가 나타나 패턴처럼 나타남)
∙ 아이콘 넣어줄 때 a태그는 인라인 구조이므로 display: block으로 바꿔주어야 세로 정렬 형태로 들어감
∙ 그리고 이미지 2번째, 3번째, 4번째, 5번째의 아이콘 지정해주고 마우스 가져갔을 때 없었다 나오는 위치값 지정해주면 끝!
<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%;    /* 이미지 튀어나온 거 집어넣기 */
        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 */
    .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_01.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%;
        background-color: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        padding: 16px;
        box-sizing: border-box;
        transition: all 0.4s ease;
    }
    .image:hover .image__desc{
        bottom: 0;
    }
    .image__desc h3 {
        font-size: 20px;
    }
    .image__desc p {
        font-size: 16px;
        color: #666;
        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);
    }
    .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;
    } 
</style>

▶완성본

실제 사이트 보기 원본 소스 보기

'사이트 제작하기 > Image Type 이미지 유형' 카테고리의 다른 글

[사이트 제작] 두번째 : 이미지 유형 TYPE.02  (2) 2022.08.17
[사이트 제작] 첫번째 : 이미지 유형 TYPE.01  (3) 2022.08.17

관련글

댓글

티스토리툴바