My Melody Kawaii

페이지 제작

이미지텍스트 유형을 만들어 봤습니다!!

younajeong 2023. 3. 14. 19:44

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

페이지 제작시 이미지텍스트 유형을 피그마로 예제를 만든 후 코딩을 이용해서 그대로 만들어 보았습니다.

 

 

FIgma사용하기

피그마

만드는 방법

  • 저번 이미지유형과 똑같이 width값 1920과 heigth값 800을 줍니다.
  • layout도 columns로 변경후 12줄 margin값을 380을 줍니다.
  • 위에 줄 간격을 120준 후 20간격으로 notice를 저번에 카드 유형에서 가져와줍니다.
  • 16간격을 주고 나서 50px로 제목을 써줍니다.
  • 25간격을 준 후 16px로 2줄 내용을 적어줍니다.
  • 15간격을 주고 16px과 lineheigth 155% 로 내용들을 적어줍니다.
  • 아래 간격은 위에 간격과 똑같이 120을 줍니다.

 

 

HTML&CSS사용방법

<!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>   
    * {
        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
    }
    .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;}
        
    .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__small {
    font-size: 14px;
    border-radius: 50px;
    background-color: rgba(237, 41, 176, 0.69);
    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;
    }

    /* imgtext__wrap */
    .imgtext__wrap {
        height: 900px;
        margin-top: 120px;
    }
    .imgtext__inner {
        display: flex;
        justify-content: space-between;
    }
    .img_text__text {
        width: 373px;
    }
    .img_text__text h2 {
        font-size: 50px;
        line-height: 1.2;
        margin-bottom: 25px;
    }
    .img_text__text p {
        font-size: 16px;
        margin-bottom: 15px;
        line-height: 1.5;
        color: #666;
    }
    .img_text__text ul{
        font-size: 16px;
        margin-left: 15px;
        line-height: 1.7;
        color: #666;
    }
    
    </style>
</head>
<body>
    <div class="imgtext__wrap nexon">
        <div class="container">
            <div class="imgtext__inner">
                <h2 class="blind">이미지/텍스트 영역</h2>
                <div class="img_text__text">
                    <span class="section__small">NOTICE</span>
                    <h2>세계 각국 음악 페스티벌</h2>
                    <p>세계각국에서 열리고 있는 음악 페스티벌 입니다.
                        각국에서 열리는 페스티벌은 다음과 같습니다.</p>
                    <ul>
                        <li>코첼라 (Coachella) - 미국 캘리포니아</li>
                        <li>글래스톤베리 (Glastonbury) - 영국</li>
                        <li>우드스톡 (Woodstock) - 미국 뉴욕</li>
                        <li>로스키르 (Roskilde) - 덴마크</li>
                        <li>프림버라 (Primavera Sound) - 스페인</li> 
                        <li>라롤팔루자 (Lollapalooza) - 미국 시카고</li>
                        <li>소나르 (Sonar) - 스페인 바르셀로나</li>
                        <li>롤라팔루자 (Lollapalooza) - 미국에서 시작되어 현재는 다양한 국가에서 열리고 있다.</li>
                    </ul>
                </div>
                <figure class="imge__header">
                    <img src="../asset/img/IMGTEXT-Type01_01.jpg">
                </figure>
                <figure class="imge__header">
                    <img src="../asset/img/IMGTEXT-Type01_02.jpg">
                </figure>     
            </div>
        </div>
    </div>
</body>
</html>

만드는 방법

  • 저번에 만들었던 제작 유형에서 wrap전까지 복사해서 가져와줍니다.
  • HTML에서 div박스를 하나 만들어서 class를 부여해서 imgtext__wrap이라는 이름을 만들어 준 후 폰트를 옆에 써줍니다.
  • div박스를 하나 더 만들어 준 후 container를 만들어준 후 그 안에 imgtext__inner와 imgtext__text를 만들어 줍니다.
  • inner안에 보이지 않는 <h2>를 만들어준 후 text안에 <span>과 <h2>, <p>, <ul>, <li>태그를 만들어 줍니다.
  • 태그 안에 내용들을 넣어준 후 figure태그를 만들어 준 후 이미지를 2개 넣어줍니다.
  • CSS로 넘어가서 imgtext__wrap, imgtext__inner, imgtext__text, imgtext__text h2, imgtext__text p, imgtext__text ul안에 각각 값을 부여 해줍니다.