텍스트 유형 (2)

728x90

⭐️ 텍스트 유형 02 ⭐️

01. 레이아웃 구상하기

레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다.

02. 상자(div) 만들기 : <body>

        <section id="textType 02" class="text__wrap gmarket section">
    <h2 class="blind">두번째 텍스트 유형 입니다.</h2>
    <div class="text__inner container">
        <article class="text__header">
            <figcaption>텍스트 유형 02</figcaption>
            <div class="text__cont">
                <h3>휴대폰 연락하기 <br> 아이콘 설명서</h3>
                <p>
                    휴대폰으로 연락하기 위한 <br> 아이콘에 대해 알아봅시다. <br> 아이콘 모양을 기억해주세요!
                </p>
            </div>
        </article>
        <article class="text">
            <figure class="text__icon">
                <img src="img/text_bg02_icon01.png" alt="연락처 아이콘">
            </figure>
            <div class="text__box">
                <h3 class="tit">연락처 보기</h3>
                <p class="desc">
                    아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 동작을 완료하십시오. 화면의 아이콘은 길게 누르지 않아도 눌립니다. 화면에 있는 아이콘을
                </p>
            </div>
        </article>
        <article class="text">
            <figure class="text__icon">
                <img src="img/text_bg02_icon02.png" alt="통화 아이콘">
            </figure>
            <div class="text__box">
                <h3 class="tit">통화하기</h3>
                <p class="desc">
                    아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 동작을 완료하십시오. 화면의 아이콘은 길게 누르지 않아도 눌립니다. 화면에 있는 아이콘을
                </p>
            </div>
        </article>
        <article class="text">
            <figure class="text__icon">
                <img src="img/text_bg02_icon03.png" alt="메세지 아이콘">
            </figure>
            <div class="text__box">
                <h3 class="tit">메세지 보내기</h3>
                <p class="desc">
                    아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 동작을 완료하십시오. 화면의 아이콘은 길게 누르지 않아도 눌립니다. 화면에 있는 아이콘을
                </p>
            </div>
        </article>
        <article class="text">
            <figure class="text__icon">
                <img src="img/text_bg02_icon04.png" alt="편집 아이콘">
            </figure>
            <div class="text__box">
                <h3 class="tit">글쓰기 / 수정하기</h3>
                <p class="desc">
                    아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 동작을 완료하십시오. 화면의 아이콘은 길게 누르지 않아도 눌립니다. 화면에 있는 아이콘을
                </p>
            </div>
        </article>
    </div>
</section>

02. style(css) 설정하기 : <style>

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

    .gmarket {
        font-family: 'GmarketSans';  /* 폰트 지정 */
        font-weight: 300;    /* 폰트 두께 설정 */
    }

    /* reset */
    * {
        margin: 0;     /* 기본 브라우저의 빈 공간 없애기 */
        padding: 0;
    }
    a {
        text-decoration: none;    /* 링크 글자의 기본 파랑색 없애고 검정으로 바꿈 */
        color: #000;
    }
    img {
        width: 100%;    /* 이미지 비율 */
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;   /* 기본 글자 두께가 두껍기 때문에 보통 굵기로 바꿈 */
    }

    /* common */  /* 공통이라는 것은 다른 작업에서도 사용할 것임을 알리는 것 */
    .container {
        width: 1160px;    /* 내용이 들어있는 컨테이너 박스의 너비 설정 */
        padding: 0 20px;
        margin: 0 auto;    /* 가운데 정렬 */
        min-width: 1160;
    }
    .section {
        padding: 120px 0;
    }

    /* blind */
    .blind {
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
    }

    /* textType 02 */
    .text__inner {
        display: grid;
        grid-template-areas: 
            "box1 box2 box3"
            "box1 box4 box5"
        ;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 20px;
    }
    .text__inner .text__header {
        grid-area: box1;
    }
    .text__inner .text:nth-child(1) {
        grid-area: box2;
    }
    .text__inner .text:nth-child(2) {
        grid-area: box3;
    }
    .text__inner .text:nth-child(3) {
        grid-area: box4;
    }
    .text__inner .text:nth-child(4) {
        grid-area: box5;
    }

    .text__header {
        /* background-color: #D9D9D9; */
    }
    .text__header:hover {
        background-color: #f3f3f3;
    }
    .text__header figcaption {
        width: 177px;
        height: 30px;
        background-color: #2152FF;
        border-radius: 50px;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
        text-align: center;
        line-height: 34px;
        margin-bottom: 20px;
    }
    .text__cont {}
    .text__cont > h3 {
        font-size: 50px;
        font-weight: 700;
        margin-bottom: 40px;
    }
    .text__cont > p {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.4;
    }
    .text {
        /* background-color: #D7D7D7; */
        height: 210px;
    }
    .text:hover {
        background-color: #f3f3f3;
    }
    .text__icon {}
    .text__icon img {
        width: 60px;
        margin-bottom: 10px;
    }
    .text__box {
        margin-bottom: 50px;
    }
    .text__box .tit {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .text__box .desc {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.4;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;   /* clamp 줄바꿈 3줄 이상 되면 ... 으로 바뀜 - '3줄 효과' 검색해서 사용 */
        -webkit-box-orient: vertical;
    }

03. 결과보기

☛원본 사이트
새로운 창으로 열기

☛ 원본 소스 보기

728x90

'CSS > Layout_Site' 카테고리의 다른 글

이미지 텍스트 유형 (1) (3)	2022.09.02
텍스트 유형 (3) (2)	2022.09.01
텍스트 유형 (1) (2)	2022.09.01
이미지 유형 (3) (2)	2022.08.22
이미지 유형 (2) (2)	2022.08.18

깜냥깜냥🐾코딩 혜윰

텍스트 유형 (2)

⭐️ 텍스트 유형 02 ⭐️

01. 레이아웃 구상하기

02. 상자(div) 만들기 : <body>

02. style(css) 설정하기 : <style>

03. 결과보기

'CSS > Layout_Site' 카테고리의 다른 글

댓글

티스토리툴바

텍스트 유형 (2)

⭐️ 텍스트 유형 02 ⭐️

01. 레이아웃 구상하기

02. 상자(div) 만들기 : <body>

02. style(css) 설정하기 : <style>

03. 결과보기

'CSS > Layout_Site' 카테고리의 다른 글

관련글

댓글

티스토리툴바