“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
페이지 제작하기
페이지 제작할 때 만들었던 슬라이드 영역, 이미지 영역, 이미지/텍스트 영역, 카드영역, 배너영역, 텍스트 영역, 푸터영역을 가지고 미디어 쿼리를 적용시켜서 페이지를 제작해 보았습니다.
완성된 사이트
만들기 전에 준비할 폴더 & 파일
- site1 (합쳐줄 사이트)
- 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 만들어 주기
- index파일을 열어서 전체적인 구조를 잡아줍니다.
- 메타 태그를 사용해서 첫번재 메타 태그는 문자와 인코딩을 정의하고 두번째 태그는 internet Explorer의호환성 모드를 방지합니다. 세번째 태그는 뷰포트의 너비와 초기 배율을 정의할 수 있습니다.
- 메타 태그를 사용해서 검색엔진에 노출 될 수 있는 SEO를 설정해 줍니다. 사용자를 설정, 사이트에 대한 설명, 키워드, 봇이 모든걸 검색할 수 있도록 허용해 줍니다.
- 다음은 파비콘을 걸어주기 위해 피그마를 사용해서 114*114 사이즈로 peg로 저장해서 파비콘을 설정 해줍니다.
- 각 CSS를 설정할 수 있는 경로를 만들어 줍니다. 각각 font, reset, common,style을 설정해 줍니다.
- 다음은 섹션별 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만들어주기
- body 에 먼저 skip을 만들어 줍니다. 페이지에서 shift를 눌러주면 바로가기로 이동할 수 있는 경로를 만들어 줍니다.
- header, main, footer 3단 구조로 만들어 준 후 header에는 id=headerType을 만들어 줍니다.
- main에는 6개의 div를 만들어 준 후 슬라이드,이미지,이미지텍스트,카드,배너,텍스트 타입을 id를 부여해 만들어 줍니다.
- 전에 각 섹션에서 작업했던 html에서 inner부분을 복사해서 가져와서 붙혀줍니다.
- 구조에 맞게끔 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 설정하기
- @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 설정하기
- 폰트 사이트에서 font-face 주소를 가져온 후 붙혀줍니다.
- 전체적으로 들어갈 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>
- 전체 적으로 CSS를 설정해줄 CSS를 설정 해줍니다.
<선택자. CSS media 쿼리>
- 섹션 CSS를 각 CSS를 설정해 줍니다.
- 각 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