[Front-end๐Ÿฆ] #12 Flex Project

15196 ๋‹จ์–ด frontCSStutorial projecthtmlCSS

1. ๋ณต์Šต

1-1. font

๋ณดํ†ต ttf ํŒŒ์ผ๋กœ ์ ์šฉํ•œ๋‹ค. ์›นํฐํŠธ๋กœ๋„ ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค.

์›นํฐํŠธ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ ๊นœ๋นก์ž„ ๋ฐฉ์ง€

1-2. flex ๋ณต์Šต

๊ธฐ๋ณธ ์†์„ฑ๋“ค์— ๋Œ€ํ•ด์„œ ๋ณต์Šตํ–ˆ๋‹ค. #6-2

margin-right: auto; ๋กœ ์žก์œผ๋ฉด ๊ฐ„๊ฒฉ์„ ์ž๋™์œผ๋กœ ์žก์•„์ค€๋‹ค.

flex-start, stretch์˜ ๋‹ค๋ฅธ ์  : ์ „์ž๋Š” element์˜ ๋†’์ด๋ฅผ ์‚ด๋ ค์„œ ๊ฐ€๊ณ , stretch๋Š” container์— ๋งž์ถฐ์„œ ๋Š˜๋ ค์คŒ.



2. holy grail layout

2-1. menu

๋ฉ”๋‰ด๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ, 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; ๋กœ ์ฃผ๋ฉด ํŽ˜์ด์ง€ ์•ˆ์— ์Šคํฌ๋กค์ด ๋˜ ์ƒ๊ธด๋‹ค.


2-2. layout

์†Œ์Šค์ฝ”๋“œ

๋‚˜์˜ ๊ฒฝ์šฐ๋Š” header, section(section>article, aside), footer ๋กœ ๊ตฌํš์„ ๋‚˜๋ˆˆ ๋’ค, section์— flex, flex-grow๋ฅผ ์ค˜์„œ ์–‘ ์˜†์œผ๋กœ ๋ฐฐ์น˜๋˜๊ฒŒ ํ–ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  @media ํƒœ๊ทธ๋กœ width ๊ฐ€ ์ค„์–ด๋“ค๋ฉด aside๊ฐ€ ๋ฐ‘์œผ๋กœ ๋‚ด๋ ค๊ฐ€๊ฒŒ ๋งŒ๋“ค์—ˆ๋‹ค. ๋ฐ˜์‘ํ˜•์„ ๋”ฐ๋กœ ์ฒ˜๋ฆฌํ–ˆ๋Š”๋ฐ,

์„ ์ƒ๋‹˜์€ ์ „์ฒด์˜ flex๋ฅผ ์ฃผ๊ณ  header, footer์— width: 100%, section>article 70%, aside 30%๋กœ ๊ตฌํ˜„ํ•˜์…จ๋‹ค.




3. JS challenge

๋…ธ๋งˆ๋“œ ์ฝ”๋”์˜ vanilla.js challenge ๊ฐ€ ์‹œ์ž‘๋˜๋Š” ๋‚ ์ด์—ˆ๋‹ค. ๋‹ค๋ฅธ ์ˆ˜๊ฐ•์ƒ๋ถ„์ด ์•Œ๋ ค์ค˜์„œ ๋“ฑ๋กํ–ˆ๋Š”๋ฐ, ํ•œ๋ฒˆ ๋“ค์–ด๋‘๋ฉด ๋ณธ ์ˆ˜์—…์—์„œ ๋“ค์„ ๋•Œ ๋Š๋‚Œ์ด ๋‹ค๋ฅผ ๊ฒƒ ๊ฐ™์•„์„œ ํ•œ ๋ฒˆ ํ›‘๋Š” ๊น€์— ๊ณ„ํš์„ ๋‚ด๊ฐ€ ์งœ์ง€ ์•Š์•„๋„ ๋‚˜์™€์žˆ๋Š” ์ฑŒ๋ฆฐ์ง€์— ๋„์ „ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. ์˜์ƒ๋„ ๊ธธ์ง€ ์•Š์•„์„œ ๋“ฃ๋Š” ๊น€์— ์ž๋ง‰ ๋„๊ณ  ์˜์–ด ๋“ฃ๊ธฐ ์‹ค๋ ฅ๋„ ํ–ฅ์ƒ ์‹œ์ผœ๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.

JavaScript
1. ํŽ˜์ด์ง€๋ฅผ interactive ํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด!
2. ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์— ๊ธฐ๋ณธ ๋‚ด์žฅ
3. ํ”„๋ก ํŠธ์—”๋“œ๋Š” html, css, javascript ๋ฐ–์— ์—†๋‹ค.
4. js ์—ญ์‹œ css์ฒ˜๋Ÿผ html ํŒŒ์ผ์— ์—ฐ๊ฒฐํ•ด์„œ ์‚ฌ์šฉํ•œ๋‹ค!

<body>
	<script src="app.js"></script>
</body>

4. ๋Š๋‚€์ 

  • ํ™•์‹คํžˆ flex๋Š” float ๋ณด๋‹ค ํŽธํ•˜๋‹ค. ๊ทธ์น˜๋งŒ ์„ธ๋กœ ์ค‘์•™ ์ •๋ ฌ ๊ฐ™์€ ๊ฒƒ์„ ์ œ์™ธํ•˜๋ฉด float์˜ ์ฐฉ์ฐฉ ์ •๋ฆฌํ•˜๋Š” ๊ฒƒ๋„ ์–ด๋ ต์ง„ ์•Š์•„์„œ ์•ž์œผ๋กœ ๊ฐˆ ํšŒ์‚ฌ์— ๋งž๊ฒŒ ์‚ฌ์šฉํ•˜๋ฉด ๋ ๋“ฏ!
  • ์ฝ”ํ…Œ์˜ ์ค‘์š”์„ฑ... ์— ๋Œ€ํ•ด ์–ธ๊ธ‰ํ•˜์…”์„œ ๋ฐœ๋“ฑ์ด ๋ถˆํƒ€๋Š” ์‚ฌ๋žŒ์ด ๋˜์—ˆ๋‹ค. ํ• ๊ฒŒ ๋„ˆ๋ฌด ๋งŽ๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ