์ฌ์ดํธ ๋ง๋ค๊ธฐ : ์ค์ ์ ํ 01
๊ทธ๋์ ๋ฐฐ์ ๋ ํค๋(๋ฐ์ํ ์ ์ฉ ๋ฉ๋ด๋ฐ ํฌํจ), ์นด๋, ์ด๋ฏธ์ง, ์ด๋ฏธ์ง/ํ ์คํธ, ํ ์คํธ, ์ฌ๋ผ์ด๋, ํธํฐ ์ ํ์ ํ ๊ณณ์ ๋ชจ์ ๋ณธ๊ฒฉ์ ์ผ๋ก ์น ํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
Figma
HTML ์์ค
ํค๋, ์ฌ๋ผ์ด๋, ์ด๋ฏธ์ง, ์ด๋ฏธ์ง/ํ ์คํธ, ์นด๋, ๋ฐฐ๋, ํ ์คํธ, ํธํฐ ์์ผ๋ก ์์ญ์ด ์ด๋ฃจ์ด์ ธ ์๋ค. (โป ์ค์์ฃผ์!)
์ฝ๋ ํผ์ณ๋ณด๊ธฐ
<body>
<div id="skip">
<a href="#headerType">ํค๋ ์์ญ ๋ฐ๋ก๊ฐ๊ธฐ</a>
<a href="#sliderType">์ฌ๋ผ์ด๋ ์์ญ ๋ฐ๋ก๊ฐ๊ธฐ</a>
<a href="#imageType">์ด๋ฏธ์ง ์์ญ ๋ฐ๋ก๊ฐ๊ธฐ</a>
<a href="#imgTextType">์ด๋ฏธ์ง/ํ
์คํธ ์์ญ ๋ฐ๋ก๊ฐ๊ธฐ</a>
<a href="#cardType">์นด๋ ์์ญ ๋ฐ๋ก๊ฐ๊ธฐ</a>
<a href="#bannerType">๋ฐฐ๋ ์์ญ ๋ฐ๋ก๊ฐ๊ธฐ</a>
<a href="#textType">ํ
์คํธ ์์ญ ๋ฐ๋ก๊ฐ๊ธฐ</a>
<a href="#footerType">ํธํฐ ์์ญ ๋ฐ๋ก๊ฐ๊ธฐ</a>
</div>
<!-- // skip : ์นํ์ค ์ค์ ์ํด ๋ง๋ค์ด์ค -->
<header id="headerType">
<h1>web site</h1>
</header>
<!-- // headerType -->
<main id="mainType">
<section id="headerType" class="header__wrap nexon">
<div class="header__inner">
<h1 class="header__logo">
<a href="#">๋ณ๋น์ ๋นต๊ต์ค <em>Baking Class</em></a>
</h1>
<div class="header__menu">
<ul>
<li class="active"><a href="#headerType">MAIN</a></li>
<li><a href="#imageType">NOTICE</a></li>
<li><a href="#imgTextType">CERTIFICATION</a></li>
<li><a href="#cardType">CLASS</a></li>
<li><a href="#bannerType">YOUTUBE</a></li>
<li><a href="#textType">GOAL</a></li>
</ul>
</div>
<div class="header__member">
<a href="#">SIGN IN</a>
</div>
<div class="header__ham">
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<section id="sliderType" class="slider__wrap scroll">
<h2 class="blind">์ฌ๋ผ์ด๋ ์์ญ</h2>
<!-- <div class="slider__inner">
<div class="slider">
<div class="slider__img">
<div class="desc container">
<span>BAKING CLASS</span>
<h3>AWESOME BAKING CLASS</h3>
<p>
ํ๋ฅญํ ์ ๋นต์ฌ๊ฐ ๋๊ณ ์ถ์ผ์ ๊ฐ์? <br>
๋ณ๋น์ ๋นต๊ต์ค์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค!
</p>
<div class="btn">
<a href="#">์์ธํ ๋ณด๊ธฐ</a>
<a href="#" class="black">์ฌ์ดํธ ๋ณด๊ธฐ</a>
</div>
</div>
</div>
<div class="slider__arrow">
<a href="#" class="left"><span class="ir">์ด์ ์ด๋ฏธ์ง</span></a>
<a href="#" class="right"><span class="ir">๋ค์ ์ด๋ฏธ์ง</span></a>
</div>
<div class="slider__dot">
<a href="#" class="dot active"><span class="ir">1</span></a>
<a href="#" class="dot"><span class="ir">2</span></a>
<a href="#" class="dot"><span class="ir">3</span></a>
<a href="#" class="play"><span class="ir">ํ๋ ์ด</span></a>
<a href="#" class="stop"><span class="ir">์ ์ง</span></a>
</div>
</div>
</div> -->
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="desc container">
<span>BAKING CLASS</span>
<h3>AWESOME BAKING</h3>
<p>
ํ๋ฅญํ ์ ๋นต์ฌ๊ฐ ๋๊ณ ์ถ์ผ์ ๊ฐ์? <br>
๋ณ๋น์ ๋นต๊ต์ค์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค!
</p>
<div class="btn">
<a href="#">์์ธํ ๋ณด๊ธฐ</a>
<a href="#" class="black">์ฌ์ดํธ ๋ณด๊ธฐ</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="desc container">
<span>BAKING CLASS</span>
<h3>AWESOME BAKING</h3>
<p>
ํ๋ฅญํ ์ ๋นต์ฌ๊ฐ ๋๊ณ ์ถ์ผ์ ๊ฐ์? <br>
๋ณ๋น์ ๋นต๊ต์ค์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค!
</p>
<div class="btn">
<a href="#">์์ธํ ๋ณด๊ธฐ</a>
<a href="#" class="black">์ฌ์ดํธ ๋ณด๊ธฐ</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="desc container">
<span>BAKING CLASS</span>
<h3>AWESOME BAKING</h3>
<p>
ํ๋ฅญํ ์ ๋นต์ฌ๊ฐ ๋๊ณ ์ถ์ผ์ ๊ฐ์? <br>
๋ณ๋น์ ๋นต๊ต์ค์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค!
</p>
<div class="btn">
<a href="#">์์ธํ ๋ณด๊ธฐ</a>
<a href="#" class="black">์ฌ์ดํธ ๋ณด๊ธฐ</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<!-- // sliderType -->
<section id="imageType" class="image__wrap nexon section scroll container">
<h2>๋ณ๋น์ ๋นต๊ต์ค ๊ฐ๊ฐ ์์๐</h2>
<p>๋ณ๋น์ ๋นต๊ต์ค์ด ์ฌ ๊ฒจ์ธ์ ๊ฐ๊ฐํฉ๋๋ค. ์๊ฐ์ ์ฒญ ๊ธฐํ๋ ์ง๊ธ ๋ฟ์ด๋ ์๋๋ฅด์ธ์!</p>
<div class="image__inner">
<article class="image img1">
<h3 class="image__title">Class A</h3>
<p class="image__desc">
12์ 17์ผ๋ถํฐ 23๋
3์ 18์ผ๊น์ง ์ฝ 3๊ฐ์๋์ ์งํ๋๋ฉฐ,
์
๋ฌธ์ ๋๋์ด์ ๋ง์ถฐ ์ ๋นต์ ๊ธฐ์ด์ ํฌ์ปค์ค๋ฅผ ๋๊ณ ์ฐจ๊ทผ์ฐจ๊ทผ ์์
์ด ์ด๋ฃจ์ด์ง๋๋ค.
</p>
<a class="image__btn" href="#" title="์์ธํ ๋ณด๊ธฐ">
์์ธํ ๋ณด๊ธฐ
</a>
</article>
<article class="image img2">
<h3 class="image__title">Class B</h3>
<p class="image__desc">
12์ 22์ผ๋ถํฐ 23๋
6์ 21์ผ๊น์ง ์ฝ 6๊ฐ์๋์ ์งํ๋๋ฉฐ,
๋ฒ ์ดํน ์
๋ฌธ ์ ๊ณผ+์ ๋นต ๊ธฐ๋ฅ์ฌ์ ์ค๋ฌด์์์ ๊ธฐ๋ณธ๊ธฐ, ์ ์กฐ ๊ธฐ์ ์ต๋ ๊ณผ์ ์ธ ๋์ ํธ '์ฌ๋ฒ ์ด์ง',
์ผ์ดํฌ๋์์ธ ์๊ฒฉ์ฆ ๊ณผ์ ๊น์ง ์ค๋ฌด ๋ํ์ '์ฌ๋ง์คํฐ' ๊ต์ก์ ๋ชฉํ๋ก ํ๋ ํํฐ์
ฐ ์์ฑ ๊ณผ์ ์
๋๋ค.
</p>
<a class="image__btn" href="#" title="์์ธํ ๋ณด๊ธฐ">
์์ธํ ๋ณด๊ธฐ
</a>
</article>
</div>
</section>
<!-- // imageType -->
<section id="imgTextType" class="imgText__wrap nexon section scroll gray">
<h2 class="blind">์๊ฒฉ์ฆ ๊ณผ์ </h2>
<div class="imgText__inner container">
<div class="imgText__txt">
<span>CERTIFICATION</span>
<h3>์๊ฒฉ์ฆ ๊ณผ์ </h3>
<p>์๊ฐ ์ค, ์ทจ๋ ๊ฐ๋ฅํ ์๊ฒฉ์ฆ ๋ชฉ๋ก์
๋๋ค.</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>
</div>
<div class="imgText__img img1">
<a href="#">์์ธํ ๋ณด๋ฌ๊ฐ๊ธฐ</a>
</div>
<div class="imgText__img img2">
<a href="#" class="blue">ํ๋ท ๋ฐ๋ก๊ฐ๊ธฐ</a>
</div>
</div>
</section>
<!-- // imgTextType -->
<section id="cardType" class="card__wrap nexon section scroll container">
<h2>๊ณผ์ ์๊ฐ</h2>
<p>๊ธฐ์ด ๊ณผ์ ๋ถํฐ ์ฌํ ๊ณผ์ ๊น์ง, ๊ทธ๋ฆฌ๊ณ ๋๋ง์ ์ ๋นต ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋ค๊ธฐ๊น์ง์ ๊ณผ์ ์ ์๊ฐํฉ๋๋ค.</p>
<div class="card__inner">
<article class="card">
<!-- ์ด๋ฏธ์ง ๋ฃ์ ๋ ๊ทธ๋ฅ imgํ๊ทธ ์ฐ์ง๋ง๊ณ figure ํ๊ทธ ์์ ๋ฃ์ด์ ์จ์ผ ์นํ์ค ์ค์ํ๊ฑฐ์ -->
<figure class="card__header">
<img src="assets/img/cardType/card_bg01.jpg" alt="์ ๋นต ๊ธฐ์ด ๊ฐ์">
</figure>
<div class="card__body">
<h3 class="title">์ ๋นต ๊ธฐ์ด ๊ฐ์</h3>
<p class="desc">
์ ๋นต์ ๊ธฐ์ด๊ฐ ๋๋ ๊ฐ์์
๋๋ค. ์ด์ฌ์๋ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๊ฐ์๊ฐ ์งํ๋๋ฉฐ
์ด๋ฐ์๋ ์ด๋ก ๊ฐ์๋ถํฐ ์์ํด ์ค๋ฐ๋ถํฐ๋ ์ค์ต์ ์์ํ์ฌ ์ ๋นต์ ๊ธฐ์ด๋ฅผ ์ตํ๋๋ก ํฉ๋๋ค.
</p>
<a class="btn" href="#">
๋ ์์ธํ ๋ณด๊ธฐ
<span aria-hidden="true"> <!-- ์๊ฐ์ฅ์ ์ธ์ฉ ์คํฌ๋ฆฐ๋ฆฌ๋๊ธฐ๊ฐ ํ์์๋ ๋ถ๋ถ์ ์ฝ์ง ๋ชปํ๋๋ก ๋ง์์ฃผ๋ ๊ธฐ๋ฅ -->
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="assets/img/cardType/card_bg02.jpg" alt="์ ๋นต ์ฌํ ๊ณผ์ ">
</figure>
<div class="card__body">
<h3 class="title">์ ๋นต ์ฌํ ๊ณผ์ </h3>
<p class="desc">
์ด์ ๊ธฐ์ด ๊ฐ์๊ฐ ๋๋ฌด ์ฌ์ ์์ํ๋ค๊ณ ๋๊ปด์ง ์ฆ์ ์ฌํ๊ณผ์ ์ ๋ค์ด๊ฐ๊ฒ ๋ ๊ฒ๋๋ค.
์์ค์ ํ๋งค๋๊ณ ์๋ ์ ๊ณผ์ ๋นต๋ค์ ์ง์ ๋ง๋ค์ด๋ณด๋ ์๊ฐ์ ๊ฐ๊ฒ ๋ฉ๋๋ค.
</p>
<a class="btn" href="#">
๋ ์์ธํ ๋ณด๊ธฐ
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="assets/img/cardType/card_bg03.jpg" alt="๋๋ง์ ์ ๋นต ํฌํธํด๋ฆฌ์ค ๋ง๋ค๊ธฐ">
</figure>
<div class="card__body">
<h3 class="title">๋๋ง์ ์ ๋นต ํฌํธํด๋ฆฌ์ค ๋ง๋ค๊ธฐ</h3>
<p class="desc">
์ด์ ๋นต์ง ์ฐฝ์
ํด๋ ๋ฌธ์ ์์ ์ ๋์ ์ค๋ ฅ์ ๊ฐ์ถ๊ฒ ๋์
จ์ ๊ฒ๋๋ค! ์ด์ ๋ ๋ฅ์ํด์ง ์ ๋นต ์ค๋ ฅ์
๋๋ง์ ๊ฐ์ฑ์ ๋ํ์ฌ ํผํผํ ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋ค์ด๋ณด์์!
</p>
<a class="btn" href="#">
๋ ์์ธํ ๋ณด๊ธฐ
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
</div>
</section>
<!-- // cardType -->
<section id="bannerType" class="banner__wrap nexon section scroll">
<h2 class="blind">๋ฐฐ๋ ์์ญ</h2>
<div class="banner__inner">
<h3 class="title">๊น์ ๋นต ์ ํ๋ธ</h3>
<p class="desc">
๋ณ๋น์ ๋นต๊ต์ค ์ ๋ช
๊ฐ์ฌ ๊น์ ๋นต์ ์ ํ๋ธ ์ฑ๋์
๋๋ค!
<a href="https://www.youtube.com/c/CozyRain" title="์ ํ๋ธ ํ์ด์ง๋ก ์ด๋">https://www.youtube.com/c/kim_baking</a>
</p>
</div>
</section>
<!-- // bannerType -->
<section id="textType" class="text__wrap nexon section scroll container">
<span>GOAL</span>
<h2 class="mb70">๊ฐ์ ๋ชฉํ์ ๋ํด ์ค๋ช
ํฉ๋๋ค.</h2>
<div class="text__inner">
<div class="text t1">
<h3 class="text__title">ํํ์ ๋ง ํํ</h3>
<p class="text__desc">
๋นต๊ณผ ๊ณผ์์ ๊ณ ์ ํํ์ ๋ง์
ํํํ๋ ๋ฐฉ๋ฒ์ ์ต๋ํ๊ณ ๋ ์ํผ๋ฅผ
์ ํํ๊ฒ ์ดํดํ๋ฉฐ ๊ธฐ์ด ์กฐ๋ฆฌ ๊ธฐ์ ์
์ต๋ํ ์ ์์ต๋๋ค.
</p>
<a class="text__btn" href="#">๋๋ณด๊ธฐ</a>
</div>
<div class="text t2">
<h3 class="text__title">์ ๊ณผ/์ ๋นต์ฌ ์๊ฒฉ์ฆ ์ทจ๋</h3>
<p class="text__desc">
์ํ๋๋น์ ๋ง์ถ ์ฒด๊ณ์ ์ธ ์ค๊ธฐ ์์
์งํ์ผ๋ก ์ ๊ณผ/์ ๋นต์ฌ ์๊ฒฉ์ฆ ํฉ๊ฒฉ์
์ํ ์ทจ๋ ๋
ธํ์ฐ๋ฅผ ํ์คํ๊ฒ
์ ์ํฉ๋๋ค.
</p>
<a class="text__btn" href="#">๋๋ณด๊ธฐ</a>
</div>
<div class="text t3">
<h3 class="text__title">1์๊ฐ ์ด๋ด์ ๋น ๋ฅด๊ฒ ๋ง๋ค๊ธฐ</h3>
<p class="text__desc">
์ง๊ธ๋ ์ฌ๋ฃ๋ก ์๊ตฌํ๋ ํ๋ชฉ์
์ํ๊ธฐ๊ฐ(1์๊ฐ์ด๋ด)์ 1์ธ๋ถ์
๋ง๋ค์ด๋ด๋ ์ค๊ธฐ ์ํ ํํ๋ก ์งํํ
์ ์๊ฒ ์ค๋นํฉ๋๋ค.
</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">๋ง๋๊ฒ ๋จน๊ธฐ</h3>
<p class="text__desc">
๋ง์๊ฒ ๋ง๋ ๋นต์ ๋ง๋๊ฒ ๋จน๋ ๊ฒ๋ ์ค์ํฉ๋๋ค.
์ฌ๊ธฐ๊น์ง ์ค์
จ๋ค๋ฉด '๋ด๊ฐ ๋ง๋ ๊ฒ ๋ง๋?' ์ถ์ ์ ๋๋ก
๋นต์ ๋ง์ด ๋ฌด์ฒ ๋ง์์ ๊ฒ์
๋๋ค.
</p>
<a class="text__btn" href="#">๋๋ณด๊ธฐ</a>
</div>
</div>
</section>
<!-- // textType -->
</main>
<!-- // mainType -->
<footer id="footerType" class="footer__wrap nexon section gray">
<h2 class="blind">ํธํฐ ์์ญ</h2>
<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="#">1:1 ๋ฌธ์</a></li>
</ul>
</div>
<div>
<h3>์๊ฐํ ์กฐํ</h3>
<ul>
<li><a href="#">ํด๋์คA</a></li>
<li><a href="#">ํด๋์คB</a></li>
<li><a href="#">ํด๋์คC</a></li>
<li><a href="#">ํด๋์คD</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>
</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>
<div class="footer__right">
โ2022 Byeolbit Jeppang Kyoshil<br>
All rights reserved.
</div>
</div>
</footer>
<!-- // footerType -->
</body>
CSS ์์ค
๊ฐ ์์ญ๋ณ CSS ์ฝ๋์ด๋ค.
common ์์ ๋ฑ์ CSS ์ฝ๋๋ ํ๋จ์ [์๋ณธ ์ฌ์ดํธ ๋ณด๊ธฐ] ๋ฒํผ์ ๋๋ฌ ํ์ด์ง ์์ค๋ฅผ ์ฐธ์กฐํ ๊ฒ.
ํค๋ & ๋ฐ์ํ ์ ์ฉ ๋ฉ๋ด๋ฐ ์์ญ
/* headerType */
.header__inner {
/* height: 70px; */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content:space-between;
padding: 20px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 10000;
background: #fff;
backdrop-filter: blur(10px);
box-shadow: 0 0 4px #999;
}
.header__logo {
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
}
.header__logo a {
color: rgb(80, 80, 80);
}
.header__logo em {
font-size: 16px;
font-weight: 400;
color: rgb(130, 130, 130);
}
.header__menu {
text-align: center;
}
.header__menu li {
display: inline;
}
.header__menu li a {
padding: 8px 30px;
margin: 0 5px;
transition: background-color 0.3s;
}
.header__menu li.active a {
background: rgb(80, 80, 80);
border-radius: 5px;
color: #fff;
}
.header__menu li a:hover {
background: rgb(130, 130, 130);
border-radius: 5px;
color: #fff;
}
/* ๋ก๊ทธ์ธ ๋ฒํผ */
.header__member {
text-align: right;
}
.header__member a {
font-size: 16px;
border: 1px solid rgb(80, 80, 80);
padding: 8px 30px;
border-radius: 50px;
transition: all 0.3s ease;
}
.header__member a:hover {
background: rgb(80, 80, 80);
color: #fff;
}
/* ํ๋ฒ๊ฑฐ ๋ชจ์ ๋ฉ๋ด ๋ฒํผ */
.header__ham {
position: absolute;
right: 10px;
top: 12px;
z-index: 1000;
width: 50px;
height: 50px;
display: none;
cursor: pointer;
}
.header__ham span {
display: block;
background: rgb(80, 80, 80);;
width: 30px;
height: 2px;
border-radius: 3px;
margin-left: 10px;
margin-top: 5px;
transition: 0.25s margin 0.25s, 0.25s transform; /* margin์ ๋๋ ์ด */
}
.header__ham span:nth-child(1) {
margin-top: 18px;
}
.header__ham.active span {
transition: 0.25s margin, 0.25s transform 0.25s; /* transform์ ๋๋ ์ด */
}
.header__ham.active span:nth-child(1) {
margin-top: 25px;
margin-bottom: -7px;
transform: rotate(45deg);
}
.header__ham.active span:nth-child(2) {
transform: rotate(45deg);
}
.header__ham.active span:nth-child(3) {
transform: rotate(135deg);
margin-top: -2px;
}
/* ๋ฐ์ํ */
@media (max-width: 1300px) {
.header__ham {
display: block;
}
.header__member {
margin-right: 50px;
}
.header__menu {
position: fixed;
right: -100%;
top: 69px;
background: #fff;
width: 60%;
height: 100vh;
padding: 20px;
text-align: right;
transition: right 0.4s ease-in;
font-size: 16px;
}
.header__menu ul li {
display: block;
margin: 20px;
}
.header__menu ul li a {
padding: 10px;
white-space: nowrap;
}
.header__menu.active {
right: 0;
}
.header__menu.overlay {
}
}
@media (max-width: 600px) {
.header__logo {
font-size: 24px;
}
.header__logo em {
display: none;
}
.header__member {
width: 40%;
}
.header__member a {
padding: 8px 20px;
}
}
์ฌ๋ผ์ด๋(swiper) ์์ญ
/* swiper */
.swiper-slide {
background: url(../img/sliderType/slider_bg01.jpg) no-repeat center / cover;
}
.swiper-slide .desc {
width: 1160px;
margin: 0 auto;
padding: 100px 20px;
box-sizing: border-box;
}
.swiper-slide .desc span {
font-size: 16px;
background: #fff;
padding: 1px 14px 0 14px;
border-radius: 30px;
text-transform: uppercase;
margin-bottom: 16px;
display: inline-block;
}
.swiper-slide .desc h3 {
font-size: 85px;
font-weight: 300;
line-height: 1;
color: #fff;
text-transform: uppercase;
margin-bottom: 16px;
margin-left: -8px;
text-shadow: 0 0 5px #666;
}
.swiper-slide .desc p {
font-size: 20px;
font-weight: 300;
color: #fff;
line-height: 1.35;
margin-bottom: 60px;
text-shadow: 0 0 5px #666;
}
.swiper-slide .desc .btn a {
font-size: 16px;
background: #fff;
padding: 12px 40px;
display: inline-block;
transition: all 0.3s ease;
}
.swiper-slide .desc .btn a.black {
background: rgb(60, 60, 60);
color: #fff;
}
.swiper-slide .desc .btn a:hover {
border-radius: 50px;
}
.swiper-button-next {
background-position: -50px 0;
}
.swiper-button-next, .swiper-button-prev {
width: 30px !important;
height: 56px !important;
background-image: url(../img/sliderType/slider_icon.svg);
}
.swiper-button-next:after,
.swiper-button-prev:after {
opacity: 0;
}
.swiper-pagination-bullet {
width: 16px !important;
height: 16px !important;
background-image: url(../img/sliderType/slider_icon.svg) !important;
background-position: -20px -70px !important;
background-color: transparent !important;
opacity: 1 !important;
}
.swiper-pagination-bullet-active {
background-position: 0 -70px !important;
}
/* ๋ฐ์ํ */
@media (max-width: 960px) {
.swiper-slide .desc {
width: 100%;
text-align: center;
}
.swiper-slide .desc h3 {
font-size: 70px;
}
}
@media (max-width: 600px) {
.swiper-slide .desc {
padding: 80px 0;
}
.swiper-slide .desc h3 {
font-size: 40px;
}
.swiper-slide .desc p {
font-size: 16px;
margin-bottom: 50px;
}
.swiper-slide .desc .btn a {
padding: 10px 25px;
}
}
์ด๋ฏธ์ง ์์ญ
/* imageType */
#imageType > p {
font-size: 22px;
padding: 0 20px;
word-break: keep-all;
line-height: 1.6;
}
.image__inner {
display: flex;
justify-content: space-between; /* ๊ฐ๊ฒฉ ๋จ์ด๋จ๋ฆฌ๊ธฐ */
flex-wrap: wrap;
width: 100%;
}
.image {
width: 49%;
height: 370px;
padding: 200px 30px 30px 30px;
color: #fff;
box-sizing: border-box;
}
.image.img1 {
background-image: url(../img/imageType/imageType01_bg01.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.image.img2 {
background-image: url(../img/imageType/imageType01_bg02.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.image__title {
font-size: 32px;
margin-bottom: 10px;
text-shadow: 0 0 4px rgb(80,80,80);
/* 1์ค */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image__desc {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
font-weight: 300;
text-shadow: 0 0 4px rgb(80,80,80);
/* 2์คํจ๊ณผ : ๊ธ์ด ๋์ณ๋ 2์ค์ ๋์ง ์๋๋ก ํด์ค */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-right: 30px;
}
.image__btn {
background: rgb(80,80,80);
color: #fff;
padding: 10px 15px;
font-size: 16px;
font-weight: 300;
display: inline-block;
transition: all 0.3s ease;
}
.image__btn:hover {
background: #fff;
color: #000;
}
/* ๋ฐ์ํ */
@media (max-width: 960px) {
.image__inner .image {
margin: 0 auto;
width: 98%;
}
.image:first-child {
margin-bottom: 30px;
}
#imageType > h2 {
font-size: 40px;
}
#imageType > p {
font-size: 18px;
margin-bottom: 60px;
}
}
@media (max-width: 600px) {
#imageType > h2 {
font-size: 30px;
}
#imageType > p {
font-size: 16px;
margin-bottom: 50px;
}
.image__inner .image {
width: 96%;
margin: 0 auto;
padding: 210px 20px 20px 20px;
}
.image:first-child {
margin-bottom: 20px;
}
.image__title {
font-size: 24px;
}
}
์ด๋ฏธ์ง/ํ ์คํธ ์์ญ
/* imgTextType */
.imgText__inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.imgText__inner > div {
width: 32%;
/* height: 500px; */
}
.imgText__txt {}
.imgText__txt span {
font-size: 16px;
color: #666;
text-decoration: underline;
text-underline-position: under;
margin-bottom: 20px;
display: block;
}
.imgText__txt h3 {
font-size: 50px;
font-weight: 300;
margin-bottom: 10px;
}
.imgText__txt p {
font-size: 18px;
font-weight: 300;
line-height: 1.5;
color: #666;
margin-bottom: 40px;
}
.imgText__txt ul {
font-size: 18px;
font-weight: 300;
line-height: 2;
}
.imgText__txt ul li {
position: relative;
padding-left: 20px;
}
.imgText__txt ul li a {
color: #666;
}
.imgText__txt ul li a:hover {
text-decoration: underline;
}
.imgText__txt ul li::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
left: 5px;
top: 9px;
background: #666;
}
.imgText__img {
border-radius: 10px;
position: relative;
}
.imgText__img a {
position: absolute;
left: 30px;
bottom: 30px;
background-color: rgb(136, 119, 74);
color: #fff;
font-size: 16px;
padding: 8px 25px;
border-radius: 30px;
display: inline-block;
transition: all 0.3s ease;
}
.imgText__img a.blue {
background-color: rgb(45, 83, 69);
color: #fff;
}
.imgText__img a:hover,
.imgText__img a.blue:hover {
background-color: #fff;
color: rgb(80, 80, 80);
}
.imgText__img.img1 {
background: url(../img/imgTextType/imgText_bg01.jpg) no-repeat center / cover;
}
.imgText__img.img2 {
background: url(../img/imgTextType/imgText_bg02.jpg) no-repeat center / cover;
}
/* ๋ฐ์ํ */
@media (max-width: 960px) {
.imgText__inner {
flex-wrap: wrap;
}
.imgText__inner > .imgText__txt {
width: 96%;
height: auto;
text-align: center;
margin: 0 auto;
}
.imgText__inner > .imgText__img {
width: 48%;
height: 300px;
padding: 10px;
margin: 0 auto;
box-sizing: border-box;
}
.imgText__txt > h3 {
font-size: 40px;
}
.imgText__txt > p {
margin-bottom: 60px;
}
.imgText__txt ul {
display: none;
}
.imgText__txt ul li::before {
display: none;
}
.imgText__img a {
left: 20px;
bottom: 20px;
}
}
@media (max-width: 600px) {
.imgText__inner > .imgText__txt {
margin-bottom: 20px;
}
.imgText__inner > .imgText__img {
width: 96%;
height: 200px;
}
.imgText__inner > .imgText__img.img1 {
margin-bottom: 20px;
}
.imgText__txt > span {
font-size: 14px;
margin-bottom: 10px;
}
.imgText__txt > h3 {
font-size: 30px;
}
.imgText__txt > p {
font-size: 16px;
}
.imgText__txt ul {
font-size: 16px;
}
}
์นด๋ ์์ญ
/* cardType */
.card__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* ๊ฐ๊ฒฉ ๋จ์ด๋จ๋ฆฌ๊ธฐ */
}
.card {
width: 32%;
background: #fff;
}
.card__body {
padding: 24px;
background: #f5f5f5;
}
.card__body .title {
font-size: 22px;
padding-bottom: 10px;
/* ํ ์ค ํจ๊ณผ */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 30px; /* ์ ๋ชฉ ๊ธธ์ด์ ธ๋ ํ ์ค ์ ์ง */
}
.card__body .desc {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
padding-bottom: 20px;
color: #666;
/* 4์คํจ๊ณผ : ๊ธ์ด ๋์ณ๋ 4์ค์ ๋์ง ์๋๋ก ํด์ค */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* 4์ค๊น์ง ์ ํ */
-webkit-box-orient: vertical;
}
/* ๋ฐ์ํ */
@media (max-width: 960px) {
.card__inner {
justify-content: space-around;
}
#cardType > h2 {
font-size: 40px;
}
#cardType > p {
font-size: 18px;
line-height: 1.6;
}
.card__body .desc {
margin-bottom: 16px;
/* 3์คํจ๊ณผ */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
padding-bottom: 0;
}
}
@media (max-width: 600px) {
#cardType > h2 {
font-size: 30px;
}
#cardType > p {
font-size: 16px;
padding: 0px 20px;
}
.card__inner .card {
width: 96%;
margin-bottom: 20px;
}
.card__body {
padding: 20px;
}
.card__body .title {
font-size: 20px;
}
.card__body .desc {
font-size: 16px;
}
}
๋ฐฐ๋ ์์ญ
/* bannerType */
.banner__inner {
background-image: url(../img/bannerType/banner_bg01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
padding: 120px 0;
color: #fff;
}
.banner__inner .title {
font-size: 50px;
line-height: 1;
font-weight: 300;
margin-bottom: 40px;
}
.banner__inner .desc {
font-size: 24px;
line-height: 1.5;
font-weight: 300;
}
.banner__inner .desc a {
color: #fff;
display: block;
}
.banner__inner .desc a:hover {
text-decoration: underline;
}
.banner__inner .small {
font-size: 16px;
text-decoration: underline;
}
@media (max-width: 960px) {
.banner__inner {
padding: 100px 0;
}
.banner__inner .title {
font-size: 40px;
}
.banner__inner .desc {
font-size: 18px;
}
}
@media (max-width: 600px) {
.banner__inner {
padding: 80px 0;
}
.banner__inner .title {
font-size: 30px;
margin-bottom: 20px;
}
.banner__inner .desc {
font-size: 16px;
}
}
ํ ์คํธ ์์ญ
/* textType */
.text__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text {
width: 32%;
margin-bottom: 2%;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
transition: background-color 0.4s ease;
}
.text:hover {
background-color: #f5f5f5;
}
.text__title {
font-size: 24px;
line-height: 1;
margin-bottom: 10px;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
padding-top: 75px;
}
.text__title::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
border-radius: 50%;
background: url(../img/textType/text_icon.svg);
}
.text.t1 .text__title::before {
background-position: 0 0;
}
.text.t2 .text__title::before {
background-position: -60px 0;
}
.text.t3 .text__title::before {
background-position: -120px 0;
}
.text.t4 .text__title::before {
background-position: -180px 0;
}
.text.t5 .text__title::before {
background-position: -240px 0;
}
.text.t6 .text__title::before {
background-position: -300px 0;
}
.text__desc {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
/* 3์คํจ๊ณผ : ๊ธ์ด ๋์ณ๋ 4์ค์ ๋์ง ์๋๋ก ํด์ค */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 3์ค๊น์ง ์ ํ */
-webkit-box-orient: vertical;
color: #666;
margin-bottom: 20px;
}
.text__btn {
font-size: 16px;
line-height: 1;
text-decoration: underline;
text-underline-position: under; /* ํ
์คํธ์ ์ธ๋๋ผ์ธ ๊ฐ๊ฒฉ ๋ฒ๋ ค์ค */
color: #666;
}
/* ๋ฐ์ํ */
@media (max-width: 960px) {
.text {
width: 48%;
margin: 10px auto;
background: #f5f5f5;
}
#textType > h2 {
font-size: 40px;
}
.text__title {
font-size: 22px;
}
.text__desc {
font-size: 18px;
}
}
@media (max-width: 600px) {
#textType > h2 {
font-size: 30px;
}
.text__title {
font-size: 20px;
}
.text__desc {
font-size: 16px;
}
.text {
width: 96%;
margin: 10px auto;
}
}
ํธํฐ ์์ญ
/* footerType */
.footer__menu {
padding-bottom: 70px;
display: flex;
justify-content: space-between;
}
.footer__menu > div h3 {
font-size: 18px;
margin-bottom: 20px;
}
.footer__menu li a {
font-size: 14px;
color: #666;
margin-bottom: 10px;
display: block;
}
.footer__right {
border-top: 1px solid #d9d9d9;
text-align: center;
padding-top: 40px;
color: #666;
line-height: 1.5;
}
/* ๋ฐ์ํ */
@media (max-width: 960px) {
.footer__menu {
display: none;
}
.footer__right {
padding-top: 0;
border-top: 0;
}
.footer__wrap {
padding: 40px 0;
}
}
CSS ์์ค : ๋ฐ์ํ ๋ฒ๊ทธ ํด๊ฒฐํ๊ธฐ
๋ฐ์ํ(๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ PC ์ ์ฉ ํ๋ฉด) ๋ฒ๊ทธ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์๋์ ๊ฐ์ ์ฝ๋๋ฅผ ์ ๋ ฅํด์ฃผ์๋ค.
<style>
/* Windows์์ ํ์ด์ง ์ด๋ ์ ์น๋ทฐํ๋ฉด ํ๋ค๋ฆผ ๋ฒ๊ทธ ์์ ์ค */
body{
overflow: overlay;
}
/* ํ๋ฒ๊ฑฐ ๋ชจ์ ๋ฉ๋ด ํด๋ฆญ ์ ์คํฌ๋กค๋ฐ๋ฅผ ์์ ์ค */
body.fixed {
overflow: hidden;
height: 100vh;
}
</style>
JS ์์ค
์ฒซ๋ฒ์งธ๋ก๋ ์คํฌ๋กค์ ์ด๋ํ ๋๋ง๋ค ํ์ฌ ์์นํ ๋ฉ๋ด์ active ํจ๊ณผ๋ฅผ ์ ์ฉ์ํค๋ ์คํฌ๋ฆฝํธ๋ฅผ ์ ๋ ฅํ์๊ณ , ๋๋ฒ์งธ๋ ์คํฌ๋กค ์ด๋์ ๋ถ๋๋ฝ๊ฒ ํ๊ธฐ ์ํด behavior:"smooth"๋ฅผ ์ ์ฉํ์์ผ๋ฉฐ, ๋ง์ง๋ง์ผ๋ก๋ ๋ฐ์ํ ์ ์ฉ ํ๋ฒ๊ฑฐ ๋ชจ์ ๋ฉ๋ด ๋ฒํผ๊ณผ ํด๋น ๋ฒํผ์ ํด๋ฆญ(๋๋ ํฐ์น)ํ๋ฉด ๋ฉ๋ด ๋ฐ๋ฅผ ๋ํ๋๊ฒ ํ๊ณ , X ๋ฒํผ์ ๋๋ฅด๋ฉด ์ฌ๋ผ์ง๊ฒ ํ๋๋ก ์คํฌ๋ฆฝํธ๋ฅผ ์ง ๋์๋ค.
<script>
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
document.querySelectorAll(".scroll").forEach((element, index) => {
if(scrollTop >= element.offsetTop-500){
document.querySelectorAll(".header__menu li").forEach(li => {
li.classList.remove("active");
});
document.querySelector(".header__menu li:nth-child("+(index+1)+")").classList.add("active");
};
});
});
// ์คํฌ๋กค ์ด๋
document.querySelectorAll("#headerType .header__inner .header__menu li a").forEach(li => {
li.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth" // ์ด๋ ๋ถ๋๋ฝ๊ฒ
});
});
});
// ๋ฉ๋ด ๋ฒํผ (๋ฐ์ํ)
const btnHam = document.querySelector(".header__ham");
const btnMenu = document.querySelector(".header__menu");
const btnMenuList = btnMenu.querySelectorAll(".header__menu ul li a");
btnHam.addEventListener("click", () => {
btnHam.classList.toggle("active");
btnMenu.classList.toggle("active");
document.body.classList.toggle("fixed");
});
// ๋ฐ์ํ์์ ๋ฉ๋ด ๋ฒํผ ๋๋ฅด๋ ์ฆ์ ๋ฉ๋ด์ฐฝ ๋ซํ๊ฒ ํ๊ธฐ
btnMenuList.forEach((list) => {
list.addEventListener("click", () => {
document.body.classList.remove("fixed");
btnHam.classList.remove("active");
btnMenu.classList.remove("active");
});
});
</script>
์ต์ข ๊ฒฐ๊ณผ
'Site' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[์ฌ์ดํธ ๋ง๋ค๊ธฐ] ํธํฐ ์ ํ 01 (7) | 2022.09.05 |
---|---|
[์ฌ์ดํธ ๋ง๋ค๊ธฐ] ๋ฐฐ๋ ์ ํ 01 (6) | 2022.09.05 |
[์ฌ์ดํธ ๋ง๋ค๊ธฐ] ์ฌ๋ผ์ด๋ ์ ํ 01 (7) | 2022.09.05 |
[์ฌ์ดํธ ๋ง๋ค๊ธฐ] ์ด๋ฏธ์ง/ํ ์คํธ ์ ํ 01 (8) | 2022.09.01 |
[์ฌ์ดํธ ๋ง๋ค๊ธฐ] ํค๋ ์ ํ 01 (4) | 2022.09.01 |
๋๊ธ