이미지 텍스트 유형 페이지를 만들자!

코딩 공부/HTML

이미지 텍스트 유형 페이지를 만들자!

천서리 2023. 3. 14. 19:13

QUOTE THE DAY

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

- 이글슨 (Eagleson)

이미지 텍스트 유형이란?

이미지 텍스트 유형은 크게 두 가지로 나뉩니다.

포함된 이미지 텍스트 (Included Image Text) : 이미지에 직접 포함된 텍스트로, 이미지 파일 자체에 포함된 텍스트를 의미합니다. 예를 들어, 로고나 헤더 이미지 등에서 사용됩니다.
인식 가능한 이미지 텍스트 (Recognizable Image Text) : 이미지에 포함된 텍스트를 OCR (Optical Character Recognition) 기술 등을 사용해 인식 가능한 텍스트를 말합니다. 이러한 텍스트는 이미지와 함께 웹 페이지나 문서에서 노출될 수 있습니다. 예를 들어, 웹사이트에서 이미지에 포함된 제목이나 캡션 등에서 사용됩니다.

장점

검색 엔진 최적화 (SEO) : 이미지에 포함된 텍스트를 검색 엔진이 인식할 수 있다면, 해당 이미지가 검색 결과에서 상위에 노출될 확률이 높아집니다.
웹 접근성 (Web Accessibility) : 시각 장애인이나 저시력자 등과 같은 사람들도 웹 사이트의 이미지에 포함된 텍스트를 읽어 들을 수 있습니다.
시각적인 요소 강조 : 이미지에 포함된 텍스트는 시각적으로 강조될 수 있습니다. 이는 브랜드 로고나 제품명 등을 강조하는 데에 유용합니다.
사용자 경험 개선 : 이미지에 포함된 텍스트를 통해, 사용자는 이미지의 내용을 더욱 명확하게 이해할 수 있습니다.
저작권 보호 : 이미지에 포함된 텍스트를 통해, 해당 이미지의 출처나 저작권 정보를 더욱 명확하게 표시할 수 있습니다.

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

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

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

<!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;
            width: 100%
        }
        .blind {
            position: absolute;
            clip: rect(0 0 0 0);
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
        }
        ul {
            font-size: 16px;
            color: #666;
            padding-left: 20px;
            line-height: 1.6;
        }

        .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;}

        .mb10 {margin-bottom: 10px !important;}
        .mb20 {margin-bottom: 20px !important;}
        .mb30 {margin-bottom: 30px !important;}
        .mb40 {margin-bottom: 40px !important;}
        .mb50 {margin-bottom: 50px !important;}
        .mb60 {margin-bottom: 60px !important;}
        .mb70  {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 {
        }
        .section__small {
            font-size: 14px;
            border-radius: 50px;
            background-color: #966F5E;
            color: #fff;
            padding: 1px 23px;
            text-transform: uppercase;
            margin-bottom: 20px;
            display: inline-block;
        }
        .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_text__type */
        .image_text__inner {
            display: flex;
            justify-content: space-between;
        }
        .image_text__inner .image_text {
            width: 32.3333%;
            background-color: #fff;
        }
        .image_text__body .title {
            font-size: 50px;
            margin-bottom: 25px;
        }
        .image_text__body .desc {
            font-size: 16px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 15px;
        }
        .image_text__body .desc_list {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <section class="image__wrap section center nexon">
        <div class="container">
            <div class="image_text__inner">
                <article class="image_text">
                    <div class="image_text__body">
                        <span class="section__small">NOTICE</span>
                        <h3 class="title">다양한 커피 종류 무엇이 있을까</h3>
                        <p class="desc">여러 종류의 커피가 있지만, 일부 일반적인 커피 종류는 다음과 같습니다.</p>
                        <p class="desc_list">
                            <ul>
                                <li>에스프레소 (Espresso)</li>
                                <li>아메리카노 (Americano)</li>
                                <li>라떼 (Latte)</li>
                                <li>카푸치노 (Cappuccino)</li>
                                <li>모카 (Mocha)</li>
                                <li>프렌치 프레스 (French Press)</li>
                                <li>콜드 브루 (Cold Brew)</li>
                                <li>드립 커피 (Drip Coffee)</li>
                                <li>터키쉬 커피 (Turkish Coffee)</li>
                                <li>아이스 커피 (Iced Coffee)</li>
                            </ul>
                        </p>
                    </div>
                </article>
                <article class="image_text">
                    <figure class="image_text__header">
                        <img src="../asset/img/image_textType01_01.jpg" alt="커피 사진1">
                    </figure>
                </article>
                <article class="image_text">
                    <figure class="image_text__header">
                        <img src="../asset/img/image_textType01_02.jpg" alt="커피 사진2">
                    </figure>
                </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;
            width: 100%
        }
        .blind {
            position: absolute;
            clip: rect(0 0 0 0);
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
        }
        ul {
            font-size: 16px;
            color: #666;
            padding-left: 20px;
            line-height: 1.6;
        }

        .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;}

        .mb10 {margin-bottom: 10px !important;}
        .mb20 {margin-bottom: 20px !important;}
        .mb30 {margin-bottom: 30px !important;}
        .mb40 {margin-bottom: 40px !important;}
        .mb50 {margin-bottom: 50px !important;}
        .mb60 {margin-bottom: 60px !important;}
        .mb70  {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 {
        }
        .section__small {
            font-size: 14px;
            border-radius: 50px;
            background-color: #966F5E;
            color: #fff;
            padding: 1px 23px;
            text-transform: uppercase;
            margin-bottom: 20px;
            display: inline-block;
        }
        .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_text__type */
        .image_text__inner {
            display: flex;
            justify-content: space-between;
        }
        .image_text__inner .image_text {
            width: 32.3333%;
            background-color: #fff;
        }
        .image_text__body .title {
            font-size: 50px;
            margin-bottom: 25px;
        }
        .image_text__body .desc {
            font-size: 16px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 15px;
        }
        .image_text__body .desc_list {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }
    </style>

여러 사이트를 만들면서 리스트가 들어간 사이트는 처음이라 많이 헤맸습니다. 그래서 인터넷을 찾아보고

<p class="desc_list">
    <ul>
        <li>에스프레소 (Espresso)</li>
        <li>아메리카노 (Americano)</li>
        <li>라떼 (Latte)</li>
        <li>카푸치노 (Cappuccino)</li>
        <li>모카 (Mocha)</li>
        <li>프렌치 프레스 (French Press)</li>
        <li>콜드 브루 (Cold Brew)</li>
        <li>드립 커피 (Drip Coffee)</li>
        <li>터키쉬 커피 (Turkish Coffee)</li>
        <li>아이스 커피 (Iced Coffee)</li>
    </ul>
</p>

이렇게 커피 종류들을 ul 안에 li 태그로 감싸주었습니다.

그리고 css 속성으로

ul {
    font-size: 16px;
    color: #666;
    padding-left: 20px;
    line-height: 1.6;
}

이렇게 설정해주었습니다...

누군가의 도움 없이 혼자 처음으로 만들어봤는데 굉장히 뿌듯했습니다.

현재글이미지 텍스트 유형 페이지를 만들자!

GIT 블로그

Loading data ...

텍스트유형, 매개변수 함수, 마우스이펙트, 선언적함수, 함수, 카드 유형, 오서방닭개장, 안산순두부짬뽕, function, 시흥순두부맛집, 리턴 함수, javascript, 이미지텍스트유형, xor연산, HTML, mysql, jabascript, 자바스크립트, 코딩, or연산,

Today :
Yesterday :

SEOLHEE