코딩 공부/HTML

이미지 유형 페이지를 만들자!

천서리 2023. 3. 11. 23:51
QUOTE THE DAY

“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”

- 이글슨 (Eagleson)
반응형

이미지 유형 페이지란?

이미지 유형 UI는 사용자 인터페이스(UI)에서 이미지를 사용하여 사용자 경험을 개선하고 시각적인 효과를 주는 것을 의미합니다. 이는 일반적으로 웹, 모바일 앱, 데스크탑 애플리케이션 등 다양한 디지털 플랫폼에서 사용됩니다.

 

형태

  1. 제품 이미지를 사용하여 제품 정보를 보여주는 제품 카탈로그
  2. 이미지 슬라이더를 사용하여 다양한 이미지를 보여주는 이미지 갤러리
  3. 아이콘 이미지를 사용하여 메뉴나 버튼을 보여주는 아이콘 메뉴

 

장점

  • 시각적인 효과 

이미지를 사용하면 일반적인 텍스트나 아이콘보다 더욱 시각적인 효과를 줄 수 있습니다. 예를 들어 제품에 대한 이미지를 사용하면 제품의 외관을 더욱 잘 보여줄 수 있으며, 효과적인 광고 효과를 얻을 수 있습니다.

  • 인지도와 기억력 향상

이미지는 텍스트보다 더욱 기억하기 쉽습니다. 또한 이미지를 통해 사용자들은 더욱 빠르게 정보를 파악할 수 있습니다. 따라서 이미지를 사용하면 사용자들이 기억하기 쉽고 정보 파악 속도도 더욱 빠르게 할 수 있습니다.

  • 상호작용

이미지를 사용하면 사용자들이 제품이나 서비스와 상호작용하는 것이 더욱 쉬워집니다. 예를 들어 제품 이미지를 클릭하면 제품 상세 정보를 확인할 수 있으며, 더 많은 이미지를 볼 수 있는 기능도 제공할 수 있습니다.

  • 브랜드 이미지 강화

이미지를 사용하면 브랜드 이미지를 강화할 수 있습니다. 예를 들어 로고 이미지를 사용하면 사용자들은 해당 브랜드와 연관짓게 됩니다. 또한 이미지를 통해 브랜드의 컬러나 분위기를 전달할 수 있습니다.

  • 감성 전달

이미지를 사용하면 감성을 더욱 쉽게 전달할 수 있습니다. 예를 들어 어두운 배경에 밝은 색상의 이미지를 사용하면 밝고 경쾌한 분위기를 전달할 수 있습니다. 따라서 이미지를 사용하면 사용자들에게 더욱 감성적인 인상을 남길 수 있습니다.

 

직접 만들어 본 이미지 유형 페이지 

사진 고르는 거 어려워요 어려워요..

직접 만든 이미지 유형 페이지 코드

아래 코드는 위에 있는 이미지  유형 페이지의 코드입니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지유형01</title>

    <link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
    <style>
        /* reset */
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
        }
        img {
            vertical-align: top;
        }
        .mt10 {margin-top: 10px !important;}
        .mt20 {margin-top: 20px !important;}
        .mt30 {margin-top: 30px !important;}
        .mt40 {margin-top: 40px !important;}
        .mt50 {margin-top: 50px !important;}
        .mt60 {margin-top: 60px !important;}
        .mt70  {margin-top: 70px !important;}

        .mt10 {margin-bottom: 10px !important;}
        .mt20 {margin-bottom: 20px !important;}
        .mt30 {margin-bottom: 30px !important;}
        .mt40 {margin-bottom: 40px !important;}
        .mt50 {margin-bottom: 50px !important;}
        .mt60 {margin-bottom: 60px !important;}
        .mt70  {margin-bottom: 70px !important;}

        /* common */
        .container {
            width: 1160px;
            margin: 0 auto;
            padding: 0 20px;
            /* background-color: rgba(0, 0, 0, 0.1); */
        }
        .nexon {
            font-family: 'NexonLv1Gothic';
            font-weight: 400;
        }
        .section {
            padding: 120px 0;
        }
        .section.center {
            text-align: center;
        }
        .section__h2 {
            font-size: 50px;
            font-weight: 400;
            margin-bottom: 30px;
            line-height: 1;
        }
        .section__desc {
            font-size: 22px;
            color: #666;
            margin-bottom: 70px;
            font-weight: 300;
            line-height: 1.5;
        }

        /* image__type */
        .image__inner {
            display: flex;
            justify-content: space-between;
        }
        .image__inner .image{
            width: 570px;
            height: 370px;
            background-color: #ccc;
            position: relative;
        }
        .image__body {
            position: absolute;
            left: 0;
            bottom: 0;
            color: #fff;
            text-align: left;
            padding: 30px;
        }
        .image__body .title {
            font-size: 32px;
            line-height: 1;
            margin-bottom: 15px;
        }
        .image__body .desc {
            margin-bottom: 15px;
            line-height: 1.5;
            padding-right: 18%;
        }
        .image__body .btn {
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px 30px;
            display: inline-block;
        }

    </style>
</head>
<body>
    <section class="image__wrap section center Nexon">
        <div class="container">
            <h2 class="section__h2">서리커피</h2>
            <p class="section__desc">훔치지 않았습니다. 직접 만들었습니다. </p>
            <div class="image__inner">
                <article class="image">
                    <figure class="image__header">
                        <img src="../asset/img/imagetype01_01.jpg" alt="맛있는 커피">
                    </figure>
                    <div class="image__body">
                        <h3 class="title">맛있는 커피</h3>
                        <p class="desc">커피의 본질적인 것을 통한 커피의 전문성을 부각 시키는 컨텐츠와 함께비쥬얼, 맛, 건강함, 그리고 마시는 재미까지 함께 선사합니다</p>
                        <a href="#" class="btn">자세히보기</a>
                    </div>
                </article>
                <article class="image">
                    <figure class="image__header">
                        <img src="../asset/img/imagetype01_02.jpg" alt="서리 커피">
                    </figure>
                    <div class="image__body">
                        <h3 class="title">서리 커피</h3>
                        <p class="desc">최첨 시설에서 탄생하는 고품질의 원두로 최고의 커피맛을 고객들에게 제공합니다.</p>
                        <a href="#" class="btn">자세히보기</a>
                    </div>
                </article>
            </div>
        </div>
    </section>
</body>
</html>

페이지 제작 공통 CSS

다른 페이지를 제작할 때도 공통으로 사용한 CSS입니다.

(하나의 페이지에 추가할 것이 있으면 모든 페이지에 추가를 해줘야 함.)

 

<style>
        /* reset */
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
        }
        img {
            vertical-align: top;
        }
        .mt10 {margin-top: 10px !important;}
        .mt20 {margin-top: 20px !important;}
        .mt30 {margin-top: 30px !important;}
        .mt40 {margin-top: 40px !important;}
        .mt50 {margin-top: 50px !important;}
        .mt60 {margin-top: 60px !important;}
        .mt70  {margin-top: 70px !important;}

        .mt10 {margin-bottom: 10px !important;}
        .mt20 {margin-bottom: 20px !important;}
        .mt30 {margin-bottom: 30px !important;}
        .mt40 {margin-bottom: 40px !important;}
        .mt50 {margin-bottom: 50px !important;}
        .mt60 {margin-bottom: 60px !important;}
        .mt70  {margin-bottom: 70px !important;}

        /* common */
        .container {
            width: 1160px;
            margin: 0 auto;
            padding: 0 20px;
            /* background-color: rgba(0, 0, 0, 0.1); */
        }
        .nexon {
            font-family: 'NexonLv1Gothic';
            font-weight: 400;
        }
        .section {
            padding: 120px 0;
        }
        .section.center {
            text-align: center;
        }
        .section__h2 {
            font-size: 50px;
            font-weight: 400;
            margin-bottom: 30px;
            line-height: 1;
        }
        .section__desc {
            font-size: 22px;
            color: #666;
            margin-bottom: 70px;
            font-weight: 300;
            line-height: 1.5;
        }

        /* image__type */
        .image__inner {
            display: flex;
            justify-content: space-between;
        }
        .image__inner .image{
            width: 570px;
            height: 370px;
            background-color: #ccc;
            position: relative;
        }
        .image__body {
            position: absolute;
            left: 0;
            bottom: 0;
            color: #fff;
            text-align: left;
            padding: 30px;
        }
        .image__body .title {
            font-size: 32px;
            line-height: 1;
            margin-bottom: 15px;
        }
        .image__body .desc {
            margin-bottom: 15px;
            line-height: 1.5;
            padding-right: 18%;
        }
        .image__body .btn {
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px 30px;
            display: inline-block;
        }

    </style>

 

참고!

속성 속성 설명
text-decoration 텍스트에 라인을 추가하거나 스타일을 변경하는 데 사용됩니다.
vertical-align 요소 안의 인라인 레벨 요소들을 수직 정렬하는 데 사용됩니다.
justify-content 플렉스 컨테이너 내에서 플렉스 아이템들을 수평 정렬하는 방법을 지정하는 데 사용됩니다.
line-height 텍스트 라인의 높이를 조정하는 데 사용됩니다.
inline-block 요소를 인라인 텍스트와 같이 배치하면서 블록 요소의 특성을 가지게 합니다.
relative CSS position 속성 중 하나로, 요소를 기준으로 상대적인 위치를 지정하는 데 사용됩니다.
space-betwee CSS Flexbox 레이아웃에서 사용되는 정렬 속성 중 하나입니다. space-between을 적용하면, Flex 컨테이너 내의 Flex 아이템들 사이에 동일한 간격이 생깁니다.

 

반응형

'코딩 공부/HTML'의 다른글

  • 현재글이미지 유형 페이지를 만들자!

관련글

댓글
Adventure Time - BMO

티스토리툴바