My Melody Kawaii

페이지 제작

페이지 유형들을 합쳐서 만들어 봤습니다!

younajeong 2023. 3. 28. 21:57

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

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

페이지 제작하기

페이지 제작할 때 만들었던 슬라이드 영역, 이미지 영역, 이미지/텍스트 영역, 카드영역, 배너영역, 텍스트 영역, 푸터영역을 가지고 미디어 쿼리를 적용시켜서 페이지를 제작해 보았습니다.

 

 

완성된 사이트

 

만들기 전에 준비할 폴더 & 파일

  1. site1 (합쳐줄 사이트)
  2. assets, ico, img, js 폴더 만들어 준 후 index파일 만들기 

 

 

HTML

<head 설정하기>

<!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>사이트 만들기1</title>

    <!-- SEO 검색엔진에 노출 되게끔 해준다. -->
    <meta name="author" content="정유나">
    <meta name="description" content="정유나가 만든 사이트 튜토리얼입니다.">
    <meta name="keyword" content="정유나, 사이트, 사이트만들기, 튜토리얼">
    <meta name="robots" content="all">

    <!-- 파비콘 -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.png"/>  
    <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/favicon.png"/> 
    <link rel="apple-touch-icon" href="assets/ico/favicon.png"/>

    <!-- CSS -->
    <Link rel="stylesheet" href="assets/css/fonts.css">
    <Link rel="stylesheet" href="assets/css/reset.css">
    <Link rel="stylesheet" href="assets/css/common.css">
    <Link rel="stylesheet" href="assets/css/style.css">

    <!-- CSS(섹션별) -->
    <Link rel="stylesheet" href="assets/css/header.css">
    <Link rel="stylesheet" href="assets/css/slider.css">
    <Link rel="stylesheet" href="assets/css/image.css">
    <Link rel="stylesheet" href="assets/css/imgText.css">
    <Link rel="stylesheet" href="assets/css/card.css">
    <Link rel="stylesheet" href="assets/css/banner.css">
    <Link rel="stylesheet" href="assets/css/text.css">
    <Link rel="stylesheet" href="assets/css/footer.css">

</head>

head 만들어 주기

 

  1. index파일을 열어서 전체적인 구조를 잡아줍니다.
  2. 메타 태그를 사용해서 첫번재 메타 태그는 문자와 인코딩을 정의하고 두번째 태그는 internet Explorer의호환성 모드를 방지합니다. 세번째 태그는 뷰포트의 너비와 초기 배율을 정의할 수 있습니다.
  3. 메타 태그를 사용해서 검색엔진에 노출 될 수 있는 SEO를 설정해 줍니다. 사용자를 설정, 사이트에 대한 설명,  키워드, 봇이 모든걸 검색할 수 있도록 허용해 줍니다.
  4. 다음은 파비콘을 걸어주기 위해 피그마를 사용해서 114*114 사이즈로 peg로 저장해서 파비콘을 설정 해줍니다.
  5. 각 CSS를 설정할 수 있는 경로를 만들어 줍니다. 각각 font, reset, common,style을 설정해 줍니다.
  6. 다음은 섹션별 CSS인데 각 섹션에서 만들었던 CSS를 저장하고 @media를 줄 수 있게 끔 각 섹션의 CSS도 만들어 줍니다.

 

<body 설정하기>

<body>
    <div id="skip">
        <a href="#">해더 영억 바로가기</a>
        <a href="#">슬라이드 영역 바로가기</a>
        <a href="#">이미지 영역 바로가기</a>
        <a href="#">이미지/텍스트 영역 바로가기</a>
        <a href="#">카드 영역 바로가기</a>
        <a href="#">배너 영역 바로가기</a>
        <a href="#">텍스트 영역 바로가기</a>
        <a href="#">푸터 영역 바로가기</a>
    </div>
    <!-- //skip -->

    <header id="headerType" style="display: none;">
        <h1>사이트 로고</h1>
        <div class="header__inner">
            <h1 class="header__logo">2023FESTIVAL</h1>
            <nav class="header__menu">
                <ul>
                    <li><a href="#">안내</a></li>
                    <li><a href="#">음악</a></li>
                    <li><a href="#">아티스트</a></li>
                    <li><a href="#">역사</a></li>
                    <li><a href="#">예약</a></li>
                    <li><a href="#">이벤트</a></li>
                </ul>
            </nav>
            <div class="header__member">
                <a href="#">로그인</a>
            </div>
        </div>
    </header>
    <!-- //headerType -->

    <main id="mainType">
        <section id="sliderType" class="nexon hide">
            <h2>슬라이드 영역</h2>
            <div class="slider__inner">
                <div class="slider">
                    <div class="slider__info container ">
                        <span class="small">event</span>
                        <h3 class="title">FESTIVAL LABLE F.LAB</h3>
                        <p class="desc">F.LAB은 세계적으로 열리는 페스티벌 음악들을 공유하며 함께 페스티벌을 즐기고 있습니다. 
                            페스티벌에서 함께 즐긴 공연의 음원과 아티스트의 정보를 공유하고 있습니다.</p>
                        <div class="btn">
                            <a href="#">자세히 보기</a>
                            <a href="#">F.LAB</a>
                        </div>
                    </div>
                    <div class="slider__arrow">
                        <a href="#"><span class="blind">이전 이미지</span></a>
                        <a href="#"><span class="blind">다음 이미지</span></a>
                    </div>
                    <div class="slider__dot">
                        <a href="#" class="dot active"><span class="blind">첫번째 이미지</span></a>
                        <a href="#" class="dot"><span class="blind">두번째 이미지</span></a>
                        <a href="#" class="dot"><span class="blind">세번째 이미지</span></a>
                        <a href="#" class="play"><span class="blind">플레이</span></a>
                        <a href="#" class="stop"><span class="blind">정지</span></a>
                    </div>
                </div>

        </section>  
        <!-- //sliderType -->

        <section id="imageType" class="nexon section center">
            <h2 class="section__h2">DJ Festival</h2>
            <p class="section__desc">2023년 DJ 페스티벌이 시작 됩니다.</p>

            <div class="image__inner container">
                <article class="image">
                    <figure class="imge__header">
                        <img src="assets/img/imgeType01_02.jpg" alt="DJ">
                    </figure>
                    <div class="image__body">
                        <h3 class="title">DJ 페스티벌</h3>
                        <p class="desc">2023년 DJ 페스티벌이 시작 됩니다.세계 최고의 디제이들이 모여 있는 무대로 초대합니다</p>
                        <a href="#" class="btn">자세히보기</a>
                    </div>
                </article>
                <article class="image">
                    <figure class="imge__header">
                        <img src="assets/img/imgeType01_01.jpg" alt="페스티벌">
                    </figure>
                    <div class="image__body">
                        <h3 class="title">DJ 페스티벌</h3>
                        <p class="desc">2023년 DJ페스티벌 새로운 음원과 함께 찾아왔습니다.현장감 넘치는 음원을 play해보세요</p>
                        <a href="#" class="btn">자세히보기</a>   
                    </div>             
                </article>
            </div>
        </section> 
        <!-- //imageType -->

        <section id="imgTextType" class="nexon section gray">
            <h2 class="blind">이미지 텍스트 영역</h2>
            <div class="imgtext__inner container">
                <article class="text">
                    <span>NOTICE</span>
                    <h3>세계 각국 음악 페스티벌</h3>
                    <p>세계각국에서 열리고 있는 음악 페스티벌 입니다.
                        각국에서 열리는 페스티벌은 다음과 같습니다.</p>
                    <ul>
                        <li><a href="#">코첼라 (Coachella) - 미국 캘리포니아</a></li>
                        <li><a href="#">글래스톤베리 (Glastonbury) - 영국</a></li>
                        <li><a href="#">우드스톡 (Woodstock) - 미국 뉴욕</a></li>
                        <li><a href="#">로스키르 (Roskilde) - 덴마크</a></li>
                        <li><a href="#">프림버라 (Primavera Sound) - 스페인</a></li> 
                        <li><a href="#">라롤팔루자 (Lollapalooza) - 미국 시카고</a></li>
                        <li><a href="#">소나르 (Sonar) - 스페인 바르셀로나</a></li>
                        <li><a href="#">롤라팔루자 (Lollapalooza) - 미국에서 시작되어 현재는 다양한 국가에서 열리고 있다.</a></li>
                    </ul>
                </article>
                <article class="img i1">
                    <a href="#">페스티벌 종류 </a>
                </article>
                <article class="img i2">
                    <a href="#">세계 페스티벌</a>
                </article>
            </div>

        </section>
         <!-- //imgTextType -->
        
        <section class="card__wrap nexon section container">
            <h2 class="blind">카드 영역</h2>
            <div class="container">
                    <h2 class="section__h2">2023년 DJ Festival</h2>
                    <p class="section__desc">2023년 다시 돌아온 DJ Festival에 여러분을 초대합니다. 
                        세계 최고의 DJ이들이 모여 함께 즐기는 Festival 다양한 장르를 넘나드는 DJ의 세계로 빠져보세요! </p>
                        <div class="card__inner">
                    <article class="card">
                        <figure class="card__header">
                            <img src="../asset/img/cardType01.jpg" alt="페스티벌 장소 및 일시">
                        </figure>
                        <div class="card__body">
                            <h3 class="title">페스티벌 장소 및 일시</h3>
                            <p class="desc">공연 일정은 2023년 8월에 시작합니다.장소는 잠실 종합운동장에서 개최합니다. 일정과 장소를 한번더 체크해 주시고 2023년 개최된 DJ 페스티벌에 많은 관심과 사랑 부탁드립니다.</p>
                            <a href="#" class="btn">자세히보기</a>
                        </div>
                    </article>
                    <article class="card">
                        <figure class="card__header">
                            <img src="../asset/img/cardType02.jpg" alt="페스티벌 장소 및 일시">
                        </figure>
                        <div class="card__body">
                            <h3 class="title">예매시 주의사항</h3>
                            <p class="desc">본 공연은 비지정석 공연이며 한정 수량으로 판매 되고 있습니다.본 공연은 19세 이상 관람으로 제한되 있으니 19세 미만은 관람이 제한 되는 점 유의 부탁드리겠습니다.
                            </p>
                            <a href="#" class="btn">자세히보기</a>
                        </div>
                    </article>
                    <article class="card">
                        <figure class="card__header">
                            <img src="../asset/img/cardType03.jpg" alt="페스티벌 장소 및 일시">
                        </figure>
                        <div class="card__body">
                            <h3 class="title">페스티벌 장소 및 일시</h3>
                            <p class="desc">공연 일정은 2023년 8월에 시작합니다.장소는 잠실 종합운동장에서 개최합니다. 일정과 장소를 한번더 체크해 주시고 2023년 개최된 DJ 페스티벌에 많은 관심과 사랑 부탁드립니다.</p>
                            <a href="#" class="btn">자세히보기</a> 
                        </div>
                    </article>
            </div>  
        </section> 
        <!-- //cardType -->

        <section id="bannrType" class="nexon section banner__wrap center">
            <h2 class="blind">배너 영역</h2>
            <div class="banner__inner container">
                <h3>DJ Class 모집</h3>
                <p>어디서도 배운적 없던 DJ Class를 경험해 보세요!</p>
                <a href="#">jeeongyouna_@naver.com</a>
            </div>
        </section> 
        <!-- //bannrType -->

        <section id="textType" class="nexon section center">
            <h2 class="blind">텍스트 영역</h2>
                <div class="text__inner container">
                    <div class="text t1">
                        <h3 class="text__title">음원 리스트</h3>
                        <p class="text__desc">이번 페스티벌을 통해 발표한 음원 리스트입니다.
                            EDM, 하우스, 트렌스 장르로 구성되어 있으며 생생한 현장 라이브 음원까지 함께 발매 될 예정입니다.</p>
                            <a class="text__btn" href="#">더보기</a>
                    </div>
                    <div class="text t2">
                        <h3 class="text__title">라이브 현장</h3>
                        <p class="text__desc">2023년 DJ페스티벌을 라이브로 진행합니다. 현장을 라이브로 관람
                            하고 싶으신 분들은 인증을 하시고 2023년 뜨거운 현장감을 함께
                            즐기며 느끼시길 원합니다.</p>
                            <a class="text__btn" href="#">더보기</a>
                    </div>
                    <div class="text t3">
                        <h3 class="text__title">아티스트 인터뷰</h3>
                        <p class="text__desc">2023년 DJ페스티벌을 라이브로 진행합니다. 현장을 라이브로 관람
                            하고 싶으신 분들은 본인 인증을 통해 뜨거운 현장감을 함께 느끼시길 원합니다.</p>
                            <a class="text__btn" href="#">더보기</a>
                    </div>
                    <div class="text t4">
                        <h3 class="text__title">주의 사항</h3>
                        <p class="text__desc">이번 페스티벌을 주의사항은 다음과 같습니다. 먼저 많은 인파가
                            모여있으니 입장과 퇴장시 서로 서로 줄 간격을 지켜 주세요, 음식은 물만 반입이 가능합니다.</p>
                            <a class="text__btn" href="#">더보기</a>
                    </div>
                    <div class="text t5">
                        <h3 class="text__title">티켓예매 안내</h3>
                        <p class="text__desc">이번 페스티벌을 티켓안내는 인터파크 등 티켓 판매 홈페이지에
                            오픈 될 예정입니다. 티켓 발매를 불법예매로 발매할시 그에 맞는 처벌을 받을 수 있습니다.</p>
                            <a class="text__btn" href="#">더보기</a>
                    </div>
                    <div class="text t6">
                        <h3 class="text__title">2023 이벤트</h3>
                        <p class="text__desc">이번 2023년 페스티벌 이벤트는 추첨을 통해 아티스트가 발매한
                            CD와 더불어 친필싸인이 배송될 예정입니다. 원하던 아티스트를 적고 이벤트에 참여해 보세요!</p>
                            <a class="text__btn" href="#">더보기</a>
                </div>
            </div>
        </section> 
        <!-- //textType -->
    </main>
    <!-- //mainType -->

    <footer id="footerType" class="nexon section">
        <h2 class="blind">푸터영역</h2>
        <div class="footer__inner container">
            <div class="footer__menu">
                <div>
                    <h3>Festival Ticket</h3>
                    <ul>
                        <li><a href="#">티켓예매</a></li>
                        <li><a href="#">티켓예약</a></li>
                        <li><a href="#">티켓 유의사항</a></li>
                        <li><a href="#">현장 발권</a></li>
                    </ul>
                </div>
                <div>
                    <h3>Festival News</h3>
                    <ul>
                        <li><a href="#">DJ 인터뷰</a></li>
                        <li><a href="#">NEW MUSIC</a></li>
                        <li><a href="#">메거진</a></li>
                        <li><a href="#">DJ V LIVE</a></li>
                    </ul>
                </div>
                <div>
                    <h3>Festival Music</h3>
                    <ul>
                        <li><a href="#">음원 예약하기</a></li>
                        <li><a href="#"> 음원 구매하기</a></li>
                        <li><a href="#">음악 듣기</a></li>
                        <li><a href="#">음원 및 저작권</a></li>
                    </ul>
                </div>
                <div>
                    <h3>Festival F.lab</h3>
                    <ul>
                        <li><a href="#">F.lab 소개</a></li>
                        <li><a href="#"> 페스티벌 즐기는 법</a></li>
                        <li><a href="#"> F.lab 신청하기</a></li>
                        <li><a href="#">F.lab 사람들</a></li>
                    </ul>
                </div>
                <div>
                    <h3>Festival world</h3>
                    <ul>
                        <li><a href="#">페스티벌 종류</a></li>
                        <li><a href="#"> 세계 음악 역사</a></li>
                        <li><a href="#">페스티벌 역사</a></li>
                        <li><a href="#">떠나자 Festival</a></li>
                    </ul>
                </div>
                <div>
                    <h3>Festival 주의사항 </h3>
                    <ul>
                        <li><a href="#">주의사항</a></li>
                        <li><a href="#">유의사항</a></li>
                        <li><a href="#">에티켓</a></li>
                        <li><a href="#">모두가 즐기기 위한</a></li>
                    </ul>
                </div>
            </div>
            <div>
            <address class="footer__right">
                2023 youna의 Festival 사이트 F.lab<br>Enjoy Festival
            </address>
        </div>
    </div>
    </footer>
    <!-- //footerType -->
</body>

body만들어주기

 

  1. body 에 먼저 skip을 만들어 줍니다. 페이지에서 shift를 눌러주면 바로가기로 이동할 수 있는 경로를 만들어 줍니다.
  2. header, main, footer 3단 구조로 만들어 준 후 header에는 id=headerType을 만들어 줍니다.
  3. main에는 6개의 div를 만들어 준 후 슬라이드,이미지,이미지텍스트,카드,배너,텍스트 타입을 id를 부여해 만들어 줍니다.
  4. 전에 각 섹션에서 작업했던 html에서 inner부분을 복사해서 가져와서 붙혀줍니다.
  5. 구조에 맞게끔 container 속성을 넣어주고 h2에 영역을 적어준 글씨를 사라지게 하기위해 class를 사용해서 blind처리를 해줍니다.

 

 

CSS

 

전체적으로 들어갈 CSS와 섹션별로 들어갈 CSS를 작업해 줍니다.

 

 

 

<style. CSS>

@import url("header.css");
@import url("slider.css");
@import url("image.css");
@import url("imgText.css");
@import url("card.css");
@import url("banner.css");
@import url("text.css");
@import url("footer.css");

style CSS 설정하기

  1. @import를 사용해서 섹션의 CSS를 모아 줍니다.

 

 

<font. CSS>

@font-face {
    font-family: 'NexonLv1Gothic';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'NexonLv1Gothic';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.ttf') format("truetype");
    font-display: swap;
}
.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}

fons CSS 설정하기

 

  1. 폰트 사이트에서 font-face 주소를 가져온 후 붙혀줍니다. 
  2. 전체적으로 들어갈 nexon이라는 속성에 font-family와 font-weigth를 부여해줍니다.

 

 

<reset. CSS>

/* 여백 초기화 */
body, div, dl, dd, dt, ul, li, ol, h1, h2, h3, h4, h5, h6, pre, code, 
form, fieldset, legend, p, table, th, td, input, 
figure, figcaption, blockquote {
    margin: 0;
    padding: 0;
}

/* 폰트 초기화 */
body, button, input, select, table, textarea {
    font-family: 'NexonLv1Gothic', 'AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은고딕', 'dotum', '돋움';
}

/* 링크 초기화 */
a {
    text-decoration: none;
    color: #000;

}

/* 목록 초기화 */
li, ol, ul {
    list-style: none;
}

/* 제목 초기화 */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 1rem;
}

/* 폰트 스타일 */
em, address {
    font-style: normal;
}

/* 이미지 초기화 */
img {
    width: 100%;
    vertical-align: top;
}

/* 보더 초기화 */
img, fieldset, button {
    border: 0;
}

/* 클리어픽스 */
.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
    line-height: 0;
}
.clearfix::after{
    clear: both;
}

/* 블라인드 효과 */
.blind {
    position: absolute;
    clip: rect(0,0,0,0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

/* ir효과 */
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

/* 간격설정 */
.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;}

/* hide */
.hide {
    display: none;
}

<reset. CSS>

 

  1. 전체 적으로 CSS를 설정해줄 CSS를 설정 해줍니다.

 

 

<선택자. CSS media 쿼리>

 

  1. 섹션 CSS를 각 CSS를 설정해 줍니다.
  2. 각 CSS에 media커리를 설정 해 주는데 960px과 600px 될 떄를 설정 해줍니다.

 

image Type

@media (max-width:600px){
    .image__inner {
        flex-direction: column;
    }
    .image__inner .image {
        width: 100%;
        margin-bottom: 3%;
    }
    .image__body .title {
        font-size: 22px;
        margin-bottom: 10px;
    }
    .image__body .btn {
        padding: 10px 20px;
        font-size: 14px;
    }

imageType

width값이 960이 되면 설명이 위치가 이상하게 자리가 잡히므로 보이지 않게 지정합니다.

width 값이 600이 되면 수평 구조가 수직적인 구조로 변하도록 만듭니다. 이미지 크기는 100%를 준 후 margin-bottom을 3%를 주어서 수직적인 구조로 변한 이미지의 간격이 떨어 질 수 있도록 설정해 주며 폰트 사이즈를 변경 해줍니다.

그리고 버튼에 padding을 10px 20px 주고 여백을 주고 폰트 사이즈를 변경해 줍니다.

 

 

 

 

image/text Type

@media (max-width:960px){
    .image__body .desc {
        display: none;
    }
}
@media (max-width: 600px) {
    .imgtext__inner .img {
        width: 100%;
        margin-bottom: 3%;
    }
    .imgtext__inner .text h3 {
        font-size: 30px;
    }
    .imgtext__inner .text p {
        font-size: 16px;
    }

image/textType

image타입과 비슷하게 text를 width값을 100% 준 중앙에 정렬를 맞추어 줍니다. img여백을 생각해서 width을 49%로 지정하고 폰트 굵기를 300으로 설정해 줍니다.

 

 

 

card Type

@media (max-width: 600px){
    .card__inner {
        flex-wrap: wrap;
    }
    .card__inner .card {
        width: 100%;
        margin-bottom: 3%;
    }
    .section__h2 {
        text-align: center;
    }
    .section__desc {
        text-align: center;
        word-break: keep-all;
    }
    /* keep-all단어별로 끊김 */

cardType

width값이 960px이 되면 카드 마지막 사진이 보이지 않게 지정하고 600px이 되면 짤리는 부분이 단어로 끊기기 위해 word-break: keep-all를 설정 해줍니다. keep -all 은 단어별로 끊겨 주는 속성입니다.

 

 

 

bannerType

@media (max-width: 960px){
    .banner__inner h3 {
        font-size: 40px;
    }

}

@media (max-width: 600px){
    .banner__inner h3 {
        font-size: 30px;
    }
    .banner__inner p {
        margin-bottom: 50px;
    }

bannerType

배너는 폰트 사이즈만 조절 해 준 후 내용 부분 아래로 magin을 50px을 부여합니다.

 

 

 

 

textType

@media (max-width: 960px){
    .text__inner .text {
        width: 49%;
        
    }
}
@media (max-width: 600px){
    .text__inner .text {
        width: 100%;

textType

text Type은 960px 일때 width값을 49% 로 여백을 줘서 2줄씩 나오게 하고  600에선 100을 줘서 할줄로 나올 수 있게끔 설정 해줍니다.

 

 

 

footerType

@media (max-width:960px){
    .footer__menu {
        flex-wrap: wrap;
    }
    .footer__menu > div {
        width: 32.3333%;
        margin-bottom: 6%;
        text-align: center;
    }
}
@media (max-width:600px){
    .footer__menu > div {
        width: 49%;
    }

footerType

footerType은 flex-wrap:wrap주어 겹치는 부분이 생기면 아래로 여러줄이 되게 만들어 줍니다.  그리고 600이 되면 49%를 주어 여백을 줍니다.

 

 

<참고>

 

https://github.com/younajeong/web2023/blob/main/site/site1/index.html

 

GitHub - younajeong/web2023: 수업시간에 배운 사이트입니다.

수업시간에 배운 사이트입니다. Contribute to younajeong/web2023 development by creating an account on GitHub.

github.com