[Front-end๐ฆ] #13 Grid Project
1. Grid
1-1. ๋ณต์ต, holy grail layout
grid ์ ๋ํด ๊ฐ๋จํ๊ฒ ๋ณต์ตํ๊ณ ์ด์ ๋ง๋ holy grail layout ๋ flex ๋์ grid๋ฅผ ์ฌ์ฉํด์ ๋ค์ ๋ง๋ค์ด ๋ณด์๋ค. 001~003.html
1-2. grid + animation
๊ฑฐ์ ๋ณด์๋ง์ pespective๋ transform, transtion ์ค์ ๊ตฌํํ๋๊ฑฐ ์๋? ํ๊ณ ํธ๊ธฐ๋กญ๊ฒ ์์ํ๋๋ฐ, ๋ง๋๋ก ๋์ง ์์๋ค.
1. perspective ๋ฅผ ์ฃผ๋ฉด ํฌ๊ธฐ ์ฐจ์ด๊ฐ ์๊ฒจ์ rotate๋ง์ ์จ์ ํด๊ฒฐ | 2. ๊ทธ๋ฆผ์๋ฅผ after ์์๋ก ๋ง๋ค์ด์ ๋ฐ์ผ๋ก ๋ด๋ ธ๋๋ฐ, hover ์ผ ๋ z-index ๋ฌธ์ ๊ฐ ์์ด์ Transform ๋์ position์ ์ฌ์ฉํด์ ์ฌ๋ฆฌ๊ณ ๋ด๋ฆฌ๊ฒ ํ๋ค. | 3. ๊ทธ๋ฌ๋๋ ๊ทธ๋ฆผ์๊ฐ ๊ฐ์ด ์ฌ๋ผ๊ฐ์ position: fixed ๋ฅผ ์ฌ์ฉํ๋๋ ๊ทธ๋ฆผ์๊ฐ after๋ผ์ item ์ ์์์ด๋ผ item์ ๋ถ์ด๋ฒ๋ฆผ | 4. ๊ทธ๋ฆผ์๋ ๋ด๋ฆฌ๊ณ , ์์๋ ์ฌ๋ ค์ ํด๊ฒฐํ๋ค | 5. grid๋ฅผ ํ๋ ๋ ๋ง๋ค์ด์ ๋ฐ์ ๊น๋ ๊ฒ๋ ํ๋์ ๋ฐฉ๋ฒ์ด๋ค!
.board-item { /* relative๋ฅผ ๋ฃ์ด์ Stacking order ๋ฐฐ์น */ position: relative; top: 0; left: 0; width: 100px; height: 100px; transition: all .3s; } .board-item:hover { cursor: pointer; /* transform: translate(-10px, -10px); */ top: -15px; left: -15px; } .board-item::after { z-index: -1; content: ''; position: absolute; top: 10px; left: 10px; background-color: #999; width: 100px; height: 100px; transition: all .3s; } .board-item:hover::after { top: 25px; left: 25px; }
์บ๋ฆญํฐ ์ ๋๋ฉ์ด์ ๋ถ์ด๊ธฐ
ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ CSS๋ก ์ก์ผ๋ ค๋ฉด radio, checkbox + label ์ ์ฌ์ฉํ๋ค. checkbox๋ ์จ๊ธฐ๊ณ , label๋ง ๋ณด์ด๊ฒ ํ ๋ค, label ์์ฑ์ ๋ณํ๋ฅผ ์ฃผ๋ ๊ฒ!!
์ด์ ํด๋น label ํฌ๊ธฐ๋ฅผ ๋ง์ถ๊ณ , ์ธ์์ ๋ผ๋์ค๋ฒํผ checked์ด๋ฉด label์ ์ด๋ฏธ์ง๊ฐ ๋ค์ด๊ฐ๊ฒ ํ ๋ค ํตํต ํ๋ ์ ๋๋ฉ์ด์ ์ ์ฃผ๋ฉด ๋จ!
1-3. ๋์ด ์๋ ๊ณ์ฐ
width: calc(100%-200px); width: min(500px, 50vw); min-width: 500px;
iOS์์๋ ํญ์ ์ด๋ฐ์์ผ๋ก ๋ค๋ค์ด์... ๊ทผ๋ฐ html css๋ ์ฐ์ฐ์๊ฐ ์๋๊ฑฐ ๊ฐ์์ js ๋ค์ด๊ฐ๊ธฐ ์ ์ ์๋ ์ค ์์๋๋ฐ ๊ทธ๋ ์ด๋ฐ ๊ธฐ๋ฅ์ด ์์๋ฆฌ๊ฐ ์์ง...
2. ๋ก๊ทธ์ธ ์ฐฝ ์ฝ๋ ๋ฆฌ๋ทฐ
- input์ label ๊ผญ ๋ฌ๊ธฐ. | - ๊ณตํต์ ์ผ๋ก ์ธ๋งํ ๊ฒ์ module๋ก ๋ฌถ์ด๋๊ณ ํด๋น class๋ฅผ ๋ฐ๋ก๋ฐ๋ก ๊ฐ์ ธ๋ค ์ฐ๋ฉด์ ์์ ํ๋ค. | - ์์์๋ถํฐ ์์๋๋ก ๋งํฌ์ ์ด ์๋๋ผ ๋ ผ๋ฆฌ์ ์์๋๋ก!!! ๋ก๊ทธ์ธ ๋ฒํผ๊ณผ ๋ซ๊ธฐ ๋ฒํผ์ ๊ฐ์ด ๋ฌถ์ฌ ์๋ ๊ฒ์ด ๋ ผ๋ฆฌ์ ์์์ ๋ง๋ค. | - ์์ด์ฝ์ ๋ฒํผ ์์ background-image๋ก ๋ฃ๊ณ ๊ธ์จ๋ ๋ ๋ฆฌ๊ณ ์ถ๋ค๋ฉด ๋ฒํผ ์์ span ํ๊ทธ๋ก ๊ธ์จ๋ฅผ ์ฐ์.
- ์ด๋ฏธ์ง๋ inline ์ด๋ผ์ text ์ฒ๋ผ ๋ฏธ๋ฌ๋ฏธ๋ฌํ ๊ฐ๊ฒฉ์ด ์๊ธฐ๋๋ฐ baseline์ด ์์ด์ ์๊ธฐ๋ ํ์์ผ๋ก
display: block; width: 100%;
๋ก ์ฌ์ฉํ๊ฑฐ๋vertical-align: top;
์ ์ฃผ๋ฉด ํด๊ฒฐํ ์ ์๋ค!!! img, vertical-align
- before, after ๊ฐ์ ๊ฐ์ ์์์ content: url(img); ๋ฅผ ์ค ์๋ ์๋ค!!
3. JS Challenge
console.log('์ฝ์์ฐฝ์ log ์ฐ์ด์ค'); const a = 10; // ์์ let b = 20; // ๋ณ์. swift์์๋ ์ด๊ฒ ์์์ธ๋ฐ......๐ฑ
bool true, false; // bool์ ์๋ฌธ์. let point = null; // null : ๊ฐ์ด ์๋ค๊ณ ๋ช ์์ ์ผ๋ก ์๋ ค์ค, ํ์ด์ฌ None let something; // undefined : null๊ณผ ๋ค๋ฆ๐ฑ ๋ณ์๋ ๋ฉ๋ชจ๋ฆฌ์ ์๋๋ฐ, ๊ฐ์ด ์๋ ๊ฒ
const list = []; // ๋ค์ด๊ฐ๋ ๊ฐ์ type์ด ๋ค ๋ฌ๋ผ๋ ๋จ...๐ฑ list[3]; list.push(); // push๊ฐ ๊ธฐ๋ณธ.๐ฑ
// Object : ๋ค๋ฅธ ์ธ์ด dictionary ๋ฌธ๋ฒ....๐ฑ const player = { name: "ddosang", points: 10, update: "true" }; player.name, player["name"] // property์ ์ ๊ทผ. const์ฌ๋ ์์ property ๊ฐ์ ์์ ๊ฐ๋ฅ. player.lastName = "Lim"; // ์๋ ์์ฑ ๋ฃ์ผ๋ฉด ์๋ก ์์ฑ๋ ์ถ๊ฐ๋จ
- js ๋ camelCase ์ฌ์ฉํ๋ค.
- default๋ก const๋ฅผ ์ฐ๊ณ ๊ฐ์ ๋ฐ๊ฟ ์ผ์ด ์์ ๋ let์ผ๋ก ๋ฐ๊พผ๋ค. ์๋๋ ๋ณ์ var๋ง ์์๋ค.
always const, sometimes let, never var.
4. ๋๋์
<์๋ก ์๊ฒ ๋ ์ฌ์ค๋ค>
- grid-template ๋์ grid-area๋ฅผ ์ฌ์ฉํด์ ์ก์ ์ ์๋ค.
- transform๋ stacking order์ ๋ณํ๋ฅผ ์ค ์ ์๋ค.
- clac, min.. css์๋ ์๋ค
- ํ์ ๋ฐํ ์ฑ๋ก ์ฝ๋ฉํ์ง ๋ง๊ณ ์๋ ์์๋ค๋ ๊ถ๊ธํ๋ฉด ์ํํด๋ณด์!!
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([Front-end๐ฆ] #13 Grid Project), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ddosang/Front-end-13์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค