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

Image Type01

웹페이지 실습을 위한 이미지 유형 페이지 제작해보기!
이번 이미지 유형에서는 background에 image를 넣어서 작업해보겠습니다!

---

< figma : 디자인 하기 >

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

TIP ! 여백은 10단위로 해주어서 좀 더 효율적으로 작업할 수 있게 합니다:)

🎨 그리드와 레이아웃

🎨 완성본

---

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

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

! TIP ! 섹션 태그에 섹션 선택자를 따로 준 이유는 앞으로 만들게 될 유형들 모두 공통적으로 섹션 안에 제목, contents 구조로 들어가기 때문입니다.
즉 css 속성을 재활용 하기 위한 선택자라고 보면 됩니다🤣

<section id="imageType01" class="image__wrap Nexon section"> 
    <h2>귀여운 동물들</h2>
    <p>🐶 동물을 좋아하는 사람들을 위한 동물 리스트 입니다. 🐱</p>
    <div class="image__inner container">
        <article class="image img1">
            <h3 class="image__title">귀여운 동물 강아지</h3>
            <p class="image__desc">강아지는 매우 귀엽습니다. 활동적인 모습이 귀엽습니다. 강아지는 기뻐할 때도 귀엽고 시무룩할 때도 귀엽습니다. 그냥 귀엽습니다. </p>
            <a href="#" title="자세히 보기" class="image__btn">자세히 보기</a>
        </article>
        <article class="image img2">
            <h3 class="image__title">귀여운 동물 고양이</h3>
            <p class="image__desc">고양이는 매우 귀엽습니다. 도도하면서도 애교가 많습니다. 고양이는 은근하게 다가오는 것이 매력적입니다. </p>
            <a href="#" title="자세히 보기" class="image__btn yellow">자세히 보기</a>
        </article>
    </div>
</section>

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

---

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

구조 짜임의 순서대로 css 스타일을 적용시켜 봅시다. 이 때 디자인 시안을 참고하면서 html와 번갈아가며 큰 덩어리 부터 스타일을 적용시켜 나가는 것이 중요합니다.
속성에 대한 내용은 코드와 주석을 보면서 이해해봅시다!

TIP !
1. 먼저 전체 초기화(Reset)와 기본 폰트값을 설정해주는 것이 좋다.
2. 공통적으로 들어가는 섹션 부분의 속성은 다른 유형에도 재활용 할 수 있도록 클래스 명을 잘 지어줍니다.
3. article 자체를 이미지로 만들어서 작업합니다.
4. 각 영역 별 공통적으로 들어가는 속성은 공통 선택자를 부여하여 한 번에 입력해줍니다.

@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
/* font */
.Nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #000;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* common : 공통 요소(재활용) */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    /* background: rgba(204, 204, 204, 0.363); */
}
.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;
}

/* imageType */
.image__inner {
    display: flex;
    justify-content: space-between;
}
.image {
    width: 49%;
    height: 370px;
    color: #fff;
    padding: 200px 30px 30px 30px;
}
.image.img1 {
    background: url(img/img_bg01_01.jpg) no-repeat center;
}
.image.img2 {
    background: url(img/img_bg01_02.jpg) no-repeat center;
}
.image__title {
    font-size: 32px;
    margin-bottom: 10px;
}
.image__desc {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 10px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}
.image__btn {
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    padding: 10px 20px;
    display: inline-block;
    background: #a7844f;
}
.image__btn.yellow {
    background: #687553;
}

! Css 속성 알아가기 !
세줄 효과 : 텍스트가 두 줄을 넘어가면 자동으로 ...처리를 해준다.
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;

! Css 속성 알아가기 !
백그라운드: url() : 이미지를 백그라운드에 삽입한다.
background: url(img/img_bg01_01.jpg) no-repeat center;
no-repeat center : 배경 이미지를 반복하지 않고 가운데로 오게 하는 백그라운드 속성이다.

---

결과보기

원본 소스 보기

원본 페이지 보기