๋ณดํต ttf ํ์ผ๋ก ์ ์ฉํ๋ค. ์นํฐํธ๋ก๋ ๋ง์ด ์ฌ์ฉํ๋ค.
์นํฐํธ ๋ถ๋ฌ์ฌ ๋ ๊น๋นก์ ๋ฐฉ์ง
๊ธฐ๋ณธ ์์ฑ๋ค์ ๋ํด์ ๋ณต์ตํ๋ค. #6-2
margin-right: auto; ๋ก ์ก์ผ๋ฉด ๊ฐ๊ฒฉ์ ์๋์ผ๋ก ์ก์์ค๋ค.
flex-start, stretch์ ๋ค๋ฅธ ์ : ์ ์๋ element์ ๋์ด๋ฅผ ์ด๋ ค์ ๊ฐ๊ณ , stretch๋ container์ ๋ง์ถฐ์ ๋๋ ค์ค.
๋ฉ๋ด๋ฅผ ๋๋ ์ ๋, sub-๋ฉ๋ด๊ฐ ๋์ค๋ ํํ์ layout์ ํจ๊ป ๊ฐ๋ฐํ๋ค. 005.html
PC ํ๊ฒฝ์์๋ ๋ฉ๋ด๊ฐ ๋์ค๊ณ , ํด๋ฆญํ๋ฉด sub-menu ๊ฐ ๋์ค๊ณ , ๋ชจ๋ฐ์ผ์์๋ ๋ฉ๋ด ๋ฒํผ๋ง ํ๋ ๋์ค๊ณ ๋ฒํผ์ ๋๋ฌ์ผ ๋ฉ๋ด ํญ๋ชฉ์ด ๋์ค๊ฒ! ํ๋ layout์ด๋ค. flex๋ฅผ ์ฌ์ฉํ๋๊น ์์ด์ฝ์ position์ ์์ฃผ๊ณ order๋ก ์ฌ๋ฆด ์ ์์ด์ ์์ฒญ ํธ๋ฆฌํ๋ค.
.subitem { display: block; } .icon { display: none; } @media screen and (max-width: 800px) { .icon { display: block; order: 10; line-height: 35px; font-size: 25px; } .item { order: 20; width: 100%; text-align: center; } .subitem { display: none; } }
<!-- ํต์ฌ ๋ถ๋ถ๋ง ๊ฐ์ถ๋ฆผ! --> nav>ul>li <li class="item has-submenu"> <a href="#">BLOG</a> <ul class="submenu"> <li class="subitem"><a href="#">HTML</a></li> <li class="subitem"><a href="#">CSS</a></li> <li class="subitem"><a href="#">JAVASCRIPT</a></li> <li class="subitem"><a href="#">INFRA</a></li> <li class="subitem"><a href="#">NODE</a></li> </ul> </li> <li class="item"> <a href="#">CONTACT</a> </li> <!-- mobile ํ๊ฒฝ์์ ๋ฒํผ ํ๋๋ก๋ง ๋์ํ๊ฒ๋. --> <li class="icon"> <!-- icon ์ฌ์ฉ. --> <a href="#"><i class="fas fa-bars"></i></a>
modal vs pop-up
modal: url์ด ์๊ณ , ๋ค์ ๋ด์ฉ์ ๋ฐฐ๊ฒฝ๋ง ์ค ๊ฒ.
pop-up: ์์ ์๋ก์ด ์ฐฝ์ผ๋ก ๋จ๋ ๊ฒ.
overflow: auto;
๋ก ์ฃผ๋ฉด ํ์ด์ง ์์ ์คํฌ๋กค์ด ๋ ์๊ธด๋ค.
๋์ ๊ฒฝ์ฐ๋ header, section(section>article, aside), footer ๋ก ๊ตฌํ์ ๋๋ ๋ค, section์ flex, flex-grow๋ฅผ ์ค์ ์ ์์ผ๋ก ๋ฐฐ์น๋๊ฒ ํ๋ค. ๊ทธ๋ฆฌ๊ณ @media ํ๊ทธ๋ก width ๊ฐ ์ค์ด๋ค๋ฉด aside๊ฐ ๋ฐ์ผ๋ก ๋ด๋ ค๊ฐ๊ฒ ๋ง๋ค์๋ค. ๋ฐ์ํ์ ๋ฐ๋ก ์ฒ๋ฆฌํ๋๋ฐ,
์ ์๋์ ์ ์ฒด์ flex๋ฅผ ์ฃผ๊ณ header, footer์ width: 100%, section>article 70%, aside 30%๋ก ๊ตฌํํ์ จ๋ค.
๋ ธ๋ง๋ ์ฝ๋์ vanilla.js challenge ๊ฐ ์์๋๋ ๋ ์ด์๋ค. ๋ค๋ฅธ ์๊ฐ์๋ถ์ด ์๋ ค์ค์ ๋ฑ๋กํ๋๋ฐ, ํ๋ฒ ๋ค์ด๋๋ฉด ๋ณธ ์์ ์์ ๋ค์ ๋ ๋๋์ด ๋ค๋ฅผ ๊ฒ ๊ฐ์์ ํ ๋ฒ ํ๋ ๊น์ ๊ณํ์ ๋ด๊ฐ ์ง์ง ์์๋ ๋์์๋ ์ฑ๋ฆฐ์ง์ ๋์ ํ๊ธฐ๋ก ํ๋ค. ์์๋ ๊ธธ์ง ์์์ ๋ฃ๋ ๊น์ ์๋ง ๋๊ณ ์์ด ๋ฃ๊ธฐ ์ค๋ ฅ๋ ํฅ์ ์์ผ๋ณด๊ธฐ๋ก ํ๋ค.
JavaScript
1. ํ์ด์ง๋ฅผ interactive ํ๊ฒ ๋ง๋ค๊ธฐ ์ํด!
2. ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ณธ ๋ด์ฅ
3. ํ๋ก ํธ์๋๋ html, css, javascript ๋ฐ์ ์๋ค.
4. js ์ญ์ css์ฒ๋ผ html ํ์ผ์ ์ฐ๊ฒฐํด์ ์ฌ์ฉํ๋ค!<body> <script src="app.js"></script> </body>