이제까지 한 레이아웃을 합쳐보겠습니다.
일단 site1에 index.html을 만들어 기본 셋팅을 해주겠습니다.
사이트 만들기 1
index.html 기본 셋팅
<!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/font.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">
</head>head 안쪽에 SEO(검색 엔진 최적화), 파비콘, CSS를 연동시켜 기본 셋팅을 해주겠습니다.
파비콘은 경로에 맞게 저장을 해주셔야 합니다.
SEO?
SEO란 검색 엔진 최적화(Search Engine Optimization)의 약어로, 웹사이트를 검색 엔진에서 노출시키기 위한 기술적인 작업을 말합니다. 검색 엔진은 웹사이트의 컨텐츠를 수집하고 분석하여 검색 결과에 반영하는데, 이때 SEO는 검색 엔진의 알고리즘에 맞추어 웹사이트의 구조, 컨텐츠, 키워드 등을 최적화하여 검색 엔진에서 상위 노출되도록 하는 것입니다. 이를 통해 검색 엔진에서 웹사이트에 대한 노출과 방문자 유입을 증가시켜 비즈니스나 브랜드의 홍보에 활용할 수 있습니다.
기본 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;
}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;
}common.css
/* skip */
#skip {
position: relative;
z-index: 1000000;
}
#skip a {
background-color: #000;
color: #fff;
position: absolute;
left: -400PX;
top: 0;
padding: 20px 40px;
}
#skip a:active,
#skip a:focus {
left: 0;
}
/* container */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
/* bg */
.gray {
background-color: #f5f5f5;
}
/* section */
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: #ff4191;
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;
}
/* 미디어쿼리 */
@media (max-width: 1200px){
.container {
width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 960px){
.section {
padding: 100px 0;
}
.section__h2 {
font-size: 40px;
margin-bottom: 10px;
}
.section__desc {
font-size: 18px;
margin-bottom: 40px;
}
}
@media (max-width: 600px){
.section {
padding: 80px 0;
}
.section__h2 {
font-size: 30px;
}
.section__desc {
font-size: 16px;
}
}style.css에는 import방식으로 각 구역의 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");이렇게 적어주고 create file을 통해 각 구역의 css파일을 만들어줍시다~!
구조 짜주기
skip 부분 짜주기
<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 -->skip?
Skip 태그는 웹 페이지에서 웹 접근성을 개선하기 위한 태그 중 하나입니다. 시각 장애인이 웹 페이지를 사용할 때, 화면 낭독기를 통해 웹 페이지를 읽어 들이게 되는데, Skip 태그를 사용하면 본문 내용보다 먼저 중요한 부분으로 바로 이동할 수 있도록 도와줍니다.
Skip 태그는 HTML5에서 새롭게 추가된 태그이며, 일반적으로 웹 페이지 상단에 배치됩니다. 예를 들어, Skip 태그를 사용하여 메뉴 바로 아래 본문 내용으로 바로 이동할 수 있도록 설정할 수 있습니다. 이렇게 하면 시각 장애인들이 웹 페이지를 더 효율적으로 사용할 수 있게 되어 웹 접근성을 개선할 수 있습니다.
이제 크게 header, main, footer 세 가지로 나누어 보겠습니다.
header
<header id="headerType" style="display: none;">
<h1>사이트 로고</h1>
</header>
<!-- //headerType -->main
<main id="mainType">
<section id="sliderType">
<h2 class="blind">슬라이드 영역</h2>
<!-- //sliderType -->
<section id="imageType">
<h2 class="blind">이미지 영역</h2>
</section>
<!-- //imageType -->
<section id="imgTextType">
<h2 class="blind">이미지텍스트 영역</h2>
</section>
<!-- //imgTextType -->
<section id="cardType">
<h2 class="blind">카드 영역</h2>
</section>
<!-- //cardType -->
<section id="bannerType">
<h2 class="blind">배너 영역</h2>
</section>
<!-- //bannerType -->
<section id="textType">
<h2 class="blind">텍스트 영역</h2>
</section>
<!-- //textType -->
</main>
<!-- //mainType -->footer
<footer id="footerType">
<h2 class="blind">푸터 영역</h2>
</footer>
<!-- //footerType -->이렇게 구조를 먼저 짠 다음에 전에 했던 유형들의 구조를 가져와서 붙여줍니다. 여기서 주의할 점은 처음에 CSS로 설정했던 공통요소를 잘 활용하여 이름 옆에 붙여줘야합니다.
<header id="headerType" style="display: none;">
<h1>사이트 로고</h1>
</header>
<!-- //headerType -->
<main id="mainType">
<section id="sliderType" class="nexon">
<h2 class="blind">슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__info container">
<span class="small">event</span>
<h3 class="title">Custom making</h3>
<p class="desc">향기의 원료, 어울리는 향기의 조합, 만드는 방법, 추후 보관 방법 등등 커스텀 향수에 관한 모든 정보를 공유합니다.</p>
<div class="btn">
<a href="#">자세히보기</a>
<a href="#">상담신청</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>
<!-- <div class="slider"></div>
<div class="slider"></div> -->
</div>
</section>
<!-- //sliderType -->
<section id="imageType" class="nexon section center">
<h2 class="section__h2">향수, 그 날의 기분</h2>
<p class="section__desc">여러 가지 향을 조향하여 자신만의 향수를 만들 수 있습니다.</p>
<div class="image__inner container">
<article class="image">
<figure class="image__header">
<img src="assets/img/imageType01_01.jpg" alt="자신이 원하는 향 ">
</figure>
<div class="image__body">
<h3 class="title">자신이 원하는 향</h3>
<p class="desc">좋아하는 향의 이미지를 떠올려보세요.그리고 그 이미지와 관련된 계열을 생각해봅시다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="assets/img/imageType01_02.jpg" alt="비슷한 이미지의 향">
</figure>
<div class="image__body">
<h3 class="title">비슷한 이미지의 향</h3>
<p class="desc">서로 비슷한 계열의 향을 섞어보세요.이미지가 어우러지면서 원하는 향을 만들 수 있습니다.</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 class="desc1">향수의 원료는 여러 가지가 있습니다. 이 중 몇 가지를 예로 들어보면 다음과 같습니다.</p>
<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>
<p class="desc2">물론 이 외에도 다양한 향기 원료가 있으며, 이러한 향기 원료를 조합하여 다양한 종류의 향수를 만들어 낼 수 있습니다.</p>
</article>
<article class="img i1">
<a href="#">꽃 원료</a>
</article>
<article class="img i2">
<a href="#">시트러스 원료</a>
</article>
</div>
</section>
<!-- //imgTextType -->
<section id="cardType" class="section nexon">
<div class="container">
<h2 class="section__h2">향수, 그 날의 기분</h2>
<p class="section__desc">향수는 보통 향기로 연결되어 있는데, 향수의 이미지는 여러 가지로 표현될 수 있습니다.향수나 화장품의 조향은 소비자에게
매우 중요한 요소 중 하나입니다. 좋은 향기는 사용자에게 기분 좋은 감정을 전달하고, 제품의 매력을 높여주기 때문입니다.</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_01.jpg" alt="프로방스 향수">
</figure>
<div class="card__body">
<h3 class="title">프로방스 향수</h3>
<p class="desc">프로방스 지역의 풍부한 자연과 농촌 생활을 상기시키는 이미지를 가지고 있습니다. 라벤더와 같은 식물성 향료를 사용하여 경쾌하고 상쾌한 느낌을 줍니다.</p>
<a href="#" class="btn">자세히보기
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_02.jpg" alt="우디 향수">
</figure>
<div class="card__body">
<h3 class="title">우디 향수</h3>
<p class="desc">우드(목재)의 향기를 기반으로한 향수로, 자연스럽고 편안한 느낌을 주며, 특히 남성용 향수에 많이 사용됩니다. 우디 향수는 호불호가 많이 갈리는 향입니다. </p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_03.jpg" alt="프레시 향수">
</figure>
<div class="card__body">
<h3 class="title">프레시 향수</h3>
<p class="desc">신선하고 경쾌한 이미지를 가지고 있으며, 그레이프푸르트, 레몬, 라임 등의 시트러스 향료를 사용하여 만듭니다. 보통 봄과 여름철에 많이 사용됩니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</div>
</section>
<!-- //cardType -->
<section id="bannerType">
<h2 class="blind" class="nexon section center">배너</h2>
<div class="banner__inner">
<div class="banner">
<div class="banner__info section center nexon">
<h3>조향에 관한 유튜브</h3>
<p>다양한 조향에 관한 지식은<br>유튜브를 통해 더욱 자세히 확인할 수 있습니다.</p>
<address class="right"><a href="#">https://youtu.be/TLsRyJuJ04o</a></address>
</div>
</div>
</div>
</section>
<!-- //bannerType -->
<section id="textType" class="nexon center section">
<span class="section__small">notice</span>
<h2 class="section__h2 mb70">향수 종류에 따른 지속력</h2>
<div class="text__inner container">
<div class="text t1">
<h3 class="text__title">오드퍼퓸(EDP)</h3>
<p class="text__desc">오드퍼퓸(EDP)은 향수의 농도가 가장 높은 제품 중 하나로, 향수 성분의 농도가 약 15-20% 정도입니다. 따라서, 오드퍼퓸은 다른 향수에 비해 더 진하고 집중적인 향을 가지며, 오래 지속됩니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">오드코롱(EDC)</h3>
<p class="text__desc">오드코롱(Eau de Cologne)은 가장 가벼운 향수 중 하나이며, 향수 성분의 농도는 일반적으로 2-5% 정도입니다. 오드코롱은 보통 상쾌하고 가벼운 향을 가지고 있습니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">오드파르펨(EDP)</h3>
<p class="text__desc">오드파르펨(Eau de Parfum)은 오드투왓과 오드퍼퓸 사이의 향수 등급으로, 일반적으로 향수 성분의 농도는 약 10-15% 정도입니다.오드파르펨은 보통 일상적인 사용에 적합합니다. </p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">오드투왓(EDT)</h3>
<p class="text__desc">오드투왓(EDT)은 향수의 농도가 높은 제품 중 하나이며, 오드퍼퓸보다는 더 가벼운 향을 가지고 있습니다. 일반적으로, 향수 성분의 농도는 약 5-15% 정도입니다.</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">코롱(Cologne)</h3>
<p class="text__desc">코롱은 오드코롱과 비슷한 의미로 사용되지만, 보통 향수 성분의 농도가 더 낮은 제품을 일컫습니다. 따라서, 코롱은 보통 더 가벼운 향을 가지고 있으며, 지속력도 상대적으로 짧습니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</section>
<!-- //textType -->
</main>
<!-- //mainType -->
<footer id="footerType" class="section gray">
<div class="footer__inner container">
<div class="footer__menu">
<div>
<h3>향수 사이트</h3>
<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>
</ul>
</div>
<div>
<h3>향수 공방</h3>
<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>
</ul>
</div>
<div>
<h3>향료의 이미지</h3>
<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>
</ul>
</div>
<div>
<h3>조향 TIP</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>오브제</h3>
<ul>
<li><a href="#">공병 디자인</a></li>
<li><a href="#">라벨 디자인</a></li>
<li><a href="#">선물 포장</a></li>
</ul>
</div>
<div>
<h3>이용 정보</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>
<address class="footer__right">
2023 여다슬 향수 사이트 Portfolio is Power<br>All Right Reserved
</address>
</div>
</footer>
<!-- //footerType -->
미디어 쿼리 설정
이제 각 구역의 CSS까지 넣어줬다면, 각 구역마다 미디어 쿼리를 통해 반응형까지 처리해보도록 하겠습니다.
✨imageType 미디어 쿼리
@media (max-width: 960px){
.image__body .desc {
display: none;
}
}
@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;
}
}✨imgTextType 미디어 쿼리
@media (max-width: 960px){
.imgText__inner .text {
width: 100%;
text-align: center;
}
.imgText__inner .img {
width: 49%;
}
.imgText__inner .text h3 {
font-size: 40px;
margin-bottom: 10px;
}
.imgText__inner .text p {
font-size: 18px;
margin-bottom: 40px;
}
.imgText__inner .text ul {
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;
}
}✨cardType 미디어 쿼리
@media (max-width: 960px){
.card__inner .card {
width: 49%;
}
.card__inner .card:last-child {
display: none;
}
}
@media (max-width: 600px){
.card__inner {
flex-wrap: wrap;
}
.card__inner .card {
width: 100%;
margin-bottom: 3%;
}
.section__h2 {
text-align: center;
}
.section__decs {
text-align: center;
word-break: 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;
}
}✨textType 미디어 쿼리
@media (max-width: 960px){
.text__inner .text {
width: 49%;
}
}
@media (max-width: 600px){
.text__inner .text {
width: 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%;
}
}
각각 max-width를 960px일때, 600px일 때로 설정해 반응형으로 처리해주었습니다.
완성된 페이지와 코드
728x90
반응형
