์ฌ์ดํธ ๋ง๋ค๊ธฐ : ํธํฐ ์ ํ STUDY 01
์ด๋ฒ ํฌ์คํ ์์๋ Figma์์ ๋ง๋ ํธํฐ ์ ํ ์น์ ์ HTML๊ณผ CSS ์ฝ๋๋ก ์ฎ๊ธฐ๋ ์์ ์ ํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
Figma
๋จผ์ ๋ง๋ค๊ณ ์ ํ๋ ์น ์ฌ์ดํธ์ ๋ชจ์์ Figma๋ผ๋ ํ๋ก๊ทธ๋จ์ ์ด์ฉํ์ฌ ์๋์ ๊ฐ์ด ๋ง๋ค์ด์ฃผ๋๋ก ํ์.
HTML ์์ค
์น ํ์ค ์ค์๋ฅผ ์ํด ์๋งจํฑ ํ๊ทธ๋ฅผ ์ ๊ทน ์ฌ์ฉํ๋๋ก ํ์. ul>li ํ์์ผ๋ก ๋ง๋ค๋๋ก ํ๋ค.
<body>
<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="#">ํจ๋ด๋์ค ์ฌ์ดํธ</a></li>
<li><a href="#">ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธ</a></li>
</ul>
</div>
<div>
<h3>ํค๋ ์์ญ</h3>
<ul>
<li><a href="#">๋ฉ๋ด ์ ํ 01</a></li>
<li><a href="#">๋ฉ๋ด ์ ํ 02</a></li>
</ul>
</div>
<div>
<h3>์ฌ๋ผ์ด๋ ์์ญ</h3>
<ul>
<li><a href="#">์ฌ๋ผ์ด๋ ์ ํ 01</a></li>
<li><a href="#">์ฌ๋ผ์ด๋ ์ ํ 02</a></li>
</ul>
</div>
<div>
<h3>์ด๋ฏธ์ง ์์ญ</h3>
<ul>
<li><a href="#">์ด๋ฏธ์ง ์ ํ 01</a></li>
<li><a href="#">์ด๋ฏธ์ง ์ ํ 02</a></li>
<li><a href="#">์ด๋ฏธ์ง/ํ
์คํธ ์ ํ 01</a></li>
<li><a href="#">์ด๋ฏธ์ง/ํ
์คํธ ์ ํ 02</a></li>
<li><a href="#">ํ
์คํธ ์ ํ 01</a></li>
</ul>
</div>
<div>
<h3>์ปจํ
์ธ ์์ญ</h3>
<ul>
<li><a href="#">์นด๋ ์ ํ 01</a></li>
<li><a href="#">์นด๋ ์ ํ 02</a></li>
<li><a href="#">์นด๋ ์ ํ 03</a></li>
</ul>
</div>
<div>
<h3>ํธํฐ ์์ญ</h3>
<ul>
<li><a href="#">ํธํฐ ๋ฉ๋ด ์ ํ 01</a></li>
<li><a href="#">ํธํฐ ์ปจํ
ํธ ์ ํ 02</a></li>
<li><a href="#">ํธํฐ ์ด๋ฉ์ผ ์ ํ 03</a></li>
</ul>
</div>
</div>
<div class="footer__right">
โ2022 Byeolbit Jeppang Kyoshil<br>
All rights reserved.
</div>
</div>
</footer>
<!-- // footerType -->
</body>
CSS ์์ค
ํธํฐ ๋ฉ๋ด๋ฅผ display: flex๋ก ๋๋ํ ์ ๋ ฌํ๋ค. CSS ๊ณตํต ์์, ํฐํธ ์ ๋ณด ๋ฑ์ ๋ฐ๋ก ๋นผ ๋์๊ธฐ ๋๋ฌธ์ ์์ธํ ๋ณด๊ณ ์ถ๋ค๋ฉด ํ๋จ์ CSS ์์ค ๋ณด๊ธฐ ๋ฒํผ์ ๋๋ฅผ ๊ฒ.
<style>
.footer__menu {
display: flex;
}
.footer__menu > div {
width: 16%;
}
.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;
}
</style>
์ต์ข ๊ฒฐ๊ณผ
'Site' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[์ฌ์ดํธ ๋ง๋ค๊ธฐ] ์ค์ ์ ํ 01 (4) | 2022.09.13 |
---|---|
[์ฌ์ดํธ ๋ง๋ค๊ธฐ] ๋ฐฐ๋ ์ ํ 01 (6) | 2022.09.05 |
[์ฌ์ดํธ ๋ง๋ค๊ธฐ] ์ฌ๋ผ์ด๋ ์ ํ 01 (7) | 2022.09.05 |
[์ฌ์ดํธ ๋ง๋ค๊ธฐ] ์ด๋ฏธ์ง/ํ ์คํธ ์ ํ 01 (8) | 2022.09.01 |
[์ฌ์ดํธ ๋ง๋ค๊ธฐ] ํค๋ ์ ํ 01 (4) | 2022.09.01 |
๋๊ธ