ss [웹 사이트 제작]이미지유형 03
본문 바로가기
웹 사이트 제작

[웹 사이트 제작]이미지유형 03

by 꿈나무개발 2022. 8. 19.
728x90

이미지유형01

사진 한 장은 수 백 마디의 이야기가 담겨 있습니다. 그리고 현재의 웹사이트 역시 동일한 시각적 영향을 가지고 있습니다. 따라서 데이터의 시각화가 점점 더 중요해지고 있습니다. 이미지 유형 중 세 번째 이미지 유형 제작 방법에 대해 알아보겠습니다.

1. Figma로 디자인하기

Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 왼쪽에 큰 사진이 들어가고 오른쪽에 4구역으로 나누어져 사진이 들어갑니다.

2. HTML

웹표준 준수를 위해 시맨틱 태그를 사용합니다. 이번 유형에서는 img 태그를 이용하여 대부분의 이미지를 삽입하였지만 왼쪽의 큰 사진은 백그라운드를 이용하였습니다. 

<section id="imageType03" class="image__wrap gowun section">
    <h2>캐나다 여행</h2>
    <p>캐나다 여행을 위한 사이트입니다.</p>
    <div class="image__inner container-fluid">
        <article class="image">
            <div class="image__desc">
                <h3>CANADA</h3>
                <p>Vancouver</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/img_bg_03_02.jpg" alt="quebec">
            </figure>
            <div class="image__desc">
                <h3>CANADA</h3>
                <p>Quebec</p>
            </div>
            <div class="image__sns">
                <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/img_bg_03_03.jpg" alt="niagara wall">
            </figure>
            <div class="image__desc">
                <h3>CANADA</h3>
                <p>Niagara wall</p>
            </div>
            <div class="image__sns">
                <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/img_bg_03_04.jpg" alt="ottawa">
            </figure>
            <div class="image__desc">
                <h3>CANADA</h3>
                <p>Ottawa</p>
            </div>
            <div class="image__sns">
                <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/img_bg_03_05.jpg" alt="toronto">
            </figure>
            <div class="image__desc">
                <h3>CANADA</h3>
                <p>Toronto</p>
            </div>
            <div class="image__sns">
                <a href="#" class="link"><span class="ir">페이스북</span></a>
                <a href="#" class="link"><span class="ir">페이지이동</span></a>
            </div>
        </article>
    </div>
</section>

3. CSS

Figma를 이용해 만든 디자인을 보며 css설정을 합니다. 이번 시간에는 블러 효과뿐만 아니라 아이콘과 텍스트가 숨어있다가 마우스를 올렸을 떄 나타나는 효과까지 설정하였습니다. display: flex; 가 아닌 display: grid를 사용하여 배치하였습니다. 

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

.gowun {
    font-family: 'GowunBatang';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #000;
}

img {
    width: 100%;
    vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}


/* 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>h2 {
    font-size: 50px;
    line-height: 1;
    margin-bottom: 20px;
    text-align: center;
}

.section>p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    margin-bottom: 70px;
    text-align: center;
}
/* imageType03 */
.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:nth-child(1) {
    grid-area: box1;
    background: url(img/img_bg_03_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: 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: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
.image__sns {
    position: absolute;
    right: 10px;
    opacity: 0;
    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) no-repeat;
}
.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{
    opacity: 1;
}

최종결과

원본 소스 보기 원본 사이트 보기
728x90
반응형

'웹 사이트 제작' 카테고리의 다른 글

[웹 사이트 제작]텍스트유형 02  (4) 2022.08.31
[웹 사이트 제작]텍스트유형 01  (2) 2022.08.30
[웹 사이트 제작]이미지유형 02  (2) 2022.08.17
[웹 사이트 제작]이미지유형 01  (3) 2022.08.17
[웹 사이트 제작]카드유형 03  (10) 2022.08.10

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바