[Front-end๐Ÿฆ] #13 Grid Project

10363 ๋‹จ์–ด frontCSStutorial projecthtmlCSS

1. Grid

1-1. ๋ณต์Šต, holy grail layout

grid ์— ๋Œ€ํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ณต์Šตํ•˜๊ณ  ์–ด์ œ ๋งŒ๋“  holy grail layout ๋„ flex ๋Œ€์‹  grid๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋‹ค์‹œ ๋งŒ๋“ค์–ด ๋ณด์•˜๋‹ค. 001~003.html


1-2. grid + animation

004.html & ์ฐธ๊ณ ํ•œ codepen

๊ฑฐ์˜ ๋ณด์ž๋งˆ์ž 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์— ์ด๋ฏธ์ง€๊ฐ€ ๋“ค์–ด๊ฐ€๊ฒŒ ํ•œ ๋’ค ํ†ตํ†ต ํŠ€๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ฃผ๋ฉด ๋จ!

005.html


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์—๋„ ์žˆ๋‹ค
  • ํ‹€์— ๋ฐ•ํžŒ ์ฑ„๋กœ ์ฝ”๋”ฉํ•˜์ง€ ๋ง๊ณ  ์•Œ๋˜ ์š”์†Œ๋“ค๋„ ๊ถ๊ธˆํ•˜๋ฉด ์‹œํ—˜ํ•ด๋ณด์ž!!

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