[SITE] 웹사이트 - 이미지 유형03

Image Type03

이번 이미지 유형에서는 지난 시간 배웠던 유형들의 심화 버전 입니다. 애니메이션과 블러 효과, 그리고 이미지 스트라이트 기법을 사용하여 실습해보겠습니다!

---

< figma : 디자인 하기 >

이미지 유형의 가장 기초적인 레이아웃으로 이미지 박스 안에 텍스트와 링크 박스가 들어가 있는 구조입니다.

TIP ! 기본 화면은 1200(1160)이므로 코딩할 땐 주의합니다!

🎨 그리드와 레이아웃

🎨 완성본

---

< HTML 소스 : 레아아웃 구조 파악하기 >

디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다.

! TIP ! 이번 유형은 백그라운드에 이미지를 삽입하면 따로 애니메이션과 같은 효과를 주기 어렵기 때문에 img태그를 사용하여 이미지를 삽입하여 작업합니다:)

<section id="imageType01" class="image__wrap gowun section">
    <h2>딩동댕 야옹 유치원</h2>
    <p>🐾🐱 고양이를 좋아하는 사람들을 위한 냥냥 리스트 입니다. 🐱🐾</p>
    <div class="image__inner container-fluid">
        <article class="image">
            <!-- <figure class="image__box">
                <img src="img/img_bg03_06.jpg" alt="cat">
            </figure> : 백그라운드 기법으로 삽입할 거라서 임시로 주석처리를 해줍니다!-->
            <div class="image__desc">
                <h3 class="image__title">딩동댕 야옹 유치원</h3>
                <p class="image__txt">애니멀 2기 김냥냥</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_bg03_07.jpg" alt="cat">
            </figure>
            <div class="image__desc">
                <h3 class="image__title">딩동댕 야옹 유치원</h3>
                <p class="image__txt">애니멀 2기 김냥냥</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_bg03_08.jpg" alt="cat">
            </figure>
            <div class="image__desc">
                <h3 class="image__title">딩동댕 야옹 유치원</h3>
                <p class="image__txt">애니멀 2기 김냥냥</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_bg03_09.jpg" alt="cat">
            </figure>
            <div class="image__desc">
                <h3 class="image__title">딩동댕 야옹 유치원</h3>
                <p class="image__txt">애니멀 2기 김냥냥</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_bg03_10.jpg" alt="cat">
            </figure>
            <div class="image__desc">
                <h3 class="image__title">딩동댕 야옹 유치원</h3>
                <p class="image__txt">애니멀 2기 김냥냥</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>

! html 주의사항 !
• img태그의 속성 중 alt안에 이미지에 대한 설명을 넣어줘야 시각 및 청각 장애인들도 스크린리더기를 통해 이해 가능
• 섹션과 아티클 태그에는 꼭 제목 태그를 자식 요소로 넣어 주어서 웹표준과 웹 접근성, 호환성을 놓치지 않도록 하자!
• img태그를 사용할 때는 꼭 figure 태그를 선언해주어야 한다.

---

< CSS 소스 : 스타일 적용하기 >

이번 레이아웃은 flex가 아닌 그리드 기법으로 작업해보겠습니다.
transition, transform, backdrop-filter를 통해 동적인 스타일 속성을 주도록 하고 이미지 스프라이트 기법을 통해 아이콘을 효율적으로 삽입해보도록 합시다!
속성에 대한 내용은 코드와 주석을 참고하시면 됩니다:)

TIP !
1. 먼저 전체 초기화(Reset)와 폰트 기본 설정을 해주는 것이 좋다.
2. 큰 섹션부터 속성을 적용시킨다. 세부적인 요소는 마지막에 적용한다.
3. :hover 속성을 통해 커서가 해당 요소에 닿았을 때의 동적 효과를 주도록 한다.
4. :nth-child( ) 속성을 사용하여 이미지 스프라이트와 그리드 레이아웃을 효율적으로 작업할 수 있다.

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

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

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}
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 > h2 {
    font-size: 50px;
    margin-bottom: 20px;
    text-align: center;
}

.section > p {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 70px;
    text-align: center; 
    color: #666;
}
/* 이미지가 있을 때 텍스트 숨기기 */
.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:nth-child(1) {
    grid-area: box1;
    background: url(img/img_bg03_06.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__desc {
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
    background:  rgda(255,255,255,0.3);
    backdrop-filter: blur(6px);
    padding: 16px;
    box-sizing: border-box;
    transition: all 0.4s ease;
}
.image:hover .image__desc {
    bottom: 0;
}
.image__desc h3 {
    font-size: 20px;
    color: #fff;
}
.image__desc p {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ebebeb;
}
.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/img_bg03_icons.svg);
}
.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;
}

! Css 속성 알아가기 !
transition : 움직임 속도 설정
transform : 요소의 모양, 크기, 위치 등을 자유롭게 변경
backdrop-filter : 배경에 그래픽 효과를 설정 (배경에 투명도가 있어야 효과를 확인할 수 있다.
:nth-child( ) : n번째 자식 요소에게만 스타일 적용
background: url( ) : 백그라운드에 이미지 삽입

---

결과보기

원본 소스 보기

원본 페이지 보기