[Front-end๐ฆ] #16.5 ์ฝํ + ํ๋ก์ ํธ ๋ณต์ต
1. Winter Coding Test
ํ๋ก๊ทธ๋๋จธ์ค ๋ฌธ์ ํ๋ ค๊ณ ๋ค์ด๊ฐ๋ค๊ฐ ๋ฉ์ธ ๋ฐฐ๋์ ์์ด์ ์ง์ํ ์ํฐ์ฝํ ! 205์ ๋ฐ์๋ค...
SQL์ ๋๋ฌด ์ค๋๋ง์ ๋ด์ ์์ด๋ฒ๋ ค์ ์ฌ์ค ์๊ด ์์๊ณ ... ๋๋จธ์ง 3๊ฐ๋ง ํ์ ํ๋๋ฐ, 1๋ฒ์ ๋ก์ง์ ๋ง๊ฒ ์งฐ๋ค๊ณ ์๊ฐํ๋๋ฐ test case 1๊ฐ ๋นผ๊ณ ์ ๋ถ time-out ๋์ 10์ ๋ฐ์๊ณ , 2๋ฒ์ ๊ณ ๋ คํ์ง ๋ชปํ ๊ฒฝ์ฐ๊ฐ ์์ด์ ํ๊ฐ ๋นผ๊ณ ์ ๋ถ ํต๊ณผ 95์ , 3๋ฒ์ ๋ฑ๋ด๋ ๋ฌธ์ ์ ์์ ๋ ๋ฐฉํฅ๋๋ก ํ๋ฉด time-out ๋ ๊ฒ ๊ฐ์๋๋ฐ ์ฌ์ผ๋ก ๊ทธ๋ ๊ฒ ์ ๊ทผ์ ์ํด์ 100์ ๋ฐ์๋ค.
๋์ผ ๋ชจ๋ํฐ๋ ์๋ผ์ ๋ ธํธ๋ถ์ ๋ชจ๋ํฐ์ ์ฐ๊ฒฐํด์ ํ์๋๋ฐ ์ ๊น ์ ๊ฑด๋๋ ธ๋ค๊ฐ ์ฐ๊ฒฐ ๋๊ฒจ์ ํ์ ๊ณต์ ๋ ๋๊ธฐ๋....... ๋๋จํ ์ผ์ด ์์๋ค. ์์ผ๋ก๋ ๊ทธ๋ฅ ๋ ธํธ๋ถ์ผ๋ก ๋ณด๋๊ฐ ๋ชจ๋ํฐ ์ธ๊ฑฐ๋ฉด hdmi ์ผ์ด๋ธ์ ์ ๊ฑฐ ์ฌ์์ผ๊ฒ ๋ค...
2. Login Modal
- ๋ฒํผ๋ง๋ค
cursor: pointer;
๋ฅผ ์ฃผ๋ ๊ฒ๋ณด๋ค reset.css ์์ ์ฃผ๋ ๊ฒ์ด ๋ซ์ง ์์๊น ํ๋๋ฐ, ๊ทธ๋ ๊ฒ ์คฌ๋๋ ์๋ผ์ ์ฐพ์๋ดค๋๋, ๋ฒํผ์ ๊ต์ฅํ ์ค๋๋ ์์์ด๊ธฐ ๋๋ฌธ์ ์ปค์๋ฅผ ๋ฐ๊พธ์ง ์์๋ ๊ธฐ๋ณธ ์คํ์ผ๋ง์ผ๋ก๋ ๋๋ฌ์ผํ๋๊ฑธ ์๊ธฐ ๋๋ฌธ์ default cursor๋ฅผ ์ฌ์ฉํ๋ค๊ณ ํ๋ค. ๊ตณ์ด ์ฃผ๊ณ ์ถ์ผ๋ฉด class ์ ์ค์ผํ๋ค.
Why don't button HTML elements have a CSS cursor pointer by default?
- ์์ ์๊ฐ์ ๋ญ๊ฐ ๊ผฌ์ฌ์ ์ ์ฉ์ด ์๋์๋๋ฐ.. ์ ์ง live server ๋ฌธ์ ์ผ์๋ ์๊ฒ ๋ค๋ ์๊ฐ์ด ๋ ๋ค. live server ์ผ ๊ฒ๋ณด๋ค ๋ฐ์ ์๋ ๊ฒ์ ์๋ ๊ฒฝ๋ก๋ก ์ง์ ํ๋๋ ์ด๋ฏธ์ง๋ฅผ ๋ชป ๋ถ๋ฌ์ค๋๋ผ...
- JS challenge์์ ๋ฐฐ์ด ๋ด์ฉ์ ์ ์ฉํด์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด modal ์ฐฝ์ด ๋จ๊ฒ ํ๋๋ผ html ๊ตฌ์กฐ๊ฐ ์กฐ๊ธ ๋ฐ๋์๋ค. ๊ทธ๋๋ ๊ฐ์ธ๋ ๋ถ๋ถ๋ง ๋ฐ๋๊ฑฐ๋ผ BEM naming์ ํฐ ์์ ์ด ์์ง ์์๋ค.
๋คํ์ด๋ค...
- ์ฌ๋งํ๋ฉด ๋ฐ๊นฅ container ์ height ๋ content ๋์ด์ ์ข ์๋๊ฒ CSS๋ฅผ ์์ ํ๋ค.
3. Vending Machine
3-1. ์ฝ๋ ๋ฆฌ๋ทฐ ๋ฐ์ ๋ด์ฉ ๋ฏ์ด๋ณด๊ธฐ.
tipsโจ
- *{box-sizing : border-box} ์๋จ์ ๋ฃ์ด์ ํธํ๊ฒ ๊ฐ์!!
|- flex-basis๋ ์ข์ง๋ง width๋ก ์ฌ์ฉํด์ ๋ฐ์ํ์ ์ก์ ๋ width๊ฐ ์๋จน๋ ์ผ์ด ์๋๋ก ํ์!
|- ์ค๋ฅธ์ชฝ ์น์ ์ grid๋ก
grid-template-rows: 50px 474px; gap : 20px;
๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ ๊ฒ ์ค๋ฅธ์ชฝ ์๋ ์์์ margin-top, height ์ค์ ์ ์๋ตํ ์ ์๋ค.
|- txt-item์์ ๋ฒํผ์ฒ๋ผ ๋ณด์ด๊ณ ์ถ์ ๋, line-height, width ๊ฐ์ ์ฃผ๋ ๊ฒ๋ณด๋ค padding ์ ์ ์ฉํ๋ฉด ๊ฐ๋จํด์ง๋ค!!
|- ๋ฐ์ํ์์ main display๋ flex ์์ฑ์ ๋ณ๊ฒฝํ์ง ์๊ณ block์ผ๋ก ์ค์๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ๋ค!!
๊ฐ์ ์ ๐
- ๋ธ๋ญ ์์๋ margin: 0 auto; ๋ก ๊ฐ์ด๋ฐ ์ ๋ ฌ ๊ฐ๋ฅ! ์ด๋ ๊ฒ ํ๋ฉด ๋ฏธ๋์ด ์ฟผ๋ฆฌ์์๋ ๋ค์ ์กฐ์ ์ ์ํด๋ ๋จ.
.tit-app { /* position: relative; top: 0; left: calc(50% - 193px); */ /* ๊ฐ์ */ margin: 0 auto; background-image: url('../img/logo.png'); width: 386px; height: 180px; background-size: 386px 180px; }
- block ์์๋ ์์์ ๋์ด์ ํฉ(min-height, height)์ด ๊ณง ๋ถ๋ชจ์ ๋์ด๋ก ์๋ ์ค์ ๋๊ธฐ ๋๋ฌธ์ height, min-height, align-items๋ ์๋ตํ์! (์๋ํ๋ ์คํ์ผ์ด ์์ ๊ฒฝ์ฐ ์ถ๊ฐ!)
|- ๊ฐ์ฅ ๋ฐ๊นฅ์ชฝ์ padding ์ ์ค์ ๋์ด๋ฅผ ๊ฒฐ์ ํ๋๊ฑด ์ข์ง๋ง wrap ํ๋ ํ๊ทธ๋ค์ margin์ ์ฌ์ฉํด์ ์กฐ์ ํ์. margin-bottom์ ๋ง์ง ๊ฒน์นจ ํ์ ๋๋ฌธ์ ์๋จนํ๋, .app(๊ฐ์ฅ ๋ฐ๊นฅ ํ๊ทธ)์ padding-bottom์ ์ฐ์.
|- ์์์ width๋ฅผ ์ง์ ํ๊ธฐ ๋ณด๋ค๋ ๋ถ๋ชจ์ width๋ฅผ ๋ฃ์ด์ ์์์ ์ก์. height๋ ์๋ตํ์.
|- .back-sold-out img๋ ๋ถ๋ชจ position์ด absolute๋ผ์ position์ ์ค์ ํ์ง ์์๋ ๋๋ค.
|- inline์์์ธ๋ฐ block์ด๊ณ ์ถ์ ๊ฒ์ block ๋ณด๋ค๋ inline-block ์ผ๋ก ์ฃผ๋ ๊ฒ์ด ์ข๋ค.
|- button tag ์์ ์์๋ค์ ์๋ ์ค์ ์ ๋ ฌ!
|- cont-myitems strong์ ์์ ๋ strong์ด ์์ผ๋๊น, ์ง๊ณ ์์ ์ ํ์๋ฅผ ์ฌ์ฉํ์.
|- txt-total(strong)์ width 100%๋ก ๋๋น๋ฅผ ์ค์ ํด์ผ text-align์ด ์ ์ฉ๋๋ค.
|- ๋ฐ์ํ์ ์ํด min-width๊ฐ์ #app์ ์ค์ผํฉ๋๋ค.
3-2. ์ ๋ฆฌ
- width ๋ ์์์ด ๋ถ๋ชจ์ ์ข ์๋๊ฒ ์ค์ ํ๊ณ , ์์ ์์์๋ padding ๊ฐ์ ์ ๊ทน ์ด์ฉํ์.
- ์ ์ฒด height ๋ ์์์ height์ ์ข ์๋๋๋ก ์ค์ ํ์.
- ๋์์ธ์ ๋์จ ๊ฐ์ ๋ฐ๋ก padding-bottom์ผ๋ก ๋จน์ด์ง ๋ง๊ณ ,100vh๋ก ์ค์ ํ๊ณ ์ ๋นํ ๊ฐ๊ฒฉ์ ์ฃผ์.
- inline ์์๊ฐ block ์ฒ๋ผ ๋์ํ๊ฒ ํ๊ณ ์ถ์ ๋๋ inline-block์ ์ด์ฉํ์.
4. ์์ ํ๊ณ
fact - ๋ฌด์จ ์ผ์ด ์์๋์ง, ๋ญ ํ๋์ง
- ์ฝ๋ฉ ํ ์คํธ๋ฅผ ๋ณด๊ณ ......
- ์งํํ๊ณ ์๋ ๋๊ฐ์ง ํ๋ก์ ํธ(Vending Machine, Login Modal)๋ฅผ ๋ณต์ตํ๊ณ
- ์ฝ๋ ๋ฆฌ๋ทฐ ๋ฐ์ ๋ด์ฉ์ ์ ๋ฆฌํ๊ณ ์ฝ๋๋ฅผ ๊ณ ์ณ๋ณด์๋ค.
feeling - ๋ฌด์์ ๋๊ผ๋์ง,
finding - ์ด๋ค ์ธ์ฌ์ดํธ๊ฐ ์์๋์ง
- ์ฝ๋ฉ ํ ์คํธ๋ฅผ ๋ณด๊ณ ... ๊ณต๋ถ๊ฐ ๋ ํ์ํ๋ค๊ณ ๋๊ผ๋ค. ๊ทธ๋ฆฌ๊ณ 3๋ฒ ๋ฌธ์ ๋ฅผ ์๊ฐ๋ณด๋ค ์ ํผ ์ ์ ๋ง์กฑ์ค๋ฝ๋ค!! ๊ณ์ ์ต์ํด์ง์.
- ์ฝ๋ ๋ฆฌ๋ทฐ ๋ฐ์ ๊ฒ์ ๋ณด๋๊น ๊ฐ์ ํ๋ฉด์ด ๋์๋ ๊ฒฝ๋ ฅ์๋ค ์ฌ์ด์ ์์ธ ํจ์จ์ ์ธ ๋ฐฉ์์ ์ ํด์ ธ์๋ค๋ ์๊ฐ์ด ๋ค์๋ค.
future action - ์ก์ ํ๋์ด ์๋์ง
- ๋ฉํ ๋์ ์กฐ๊ธ... ํ๋์๊ฒ ์ง๋ง... ๊ณผ์ ์ด ๋๋๋ฉด ๋ฐ๊ธฐ ํ๋๋๊น!! ์ฝ๋๋ฆฌ๋ทฐ๋ฅผ ๋ ๋ง์ด ์๋ขฐํด์ผ๊ฒ ๋ค.
- ์ฝ๋ฉ ํ ์คํธ ๊ฐ์์์ ์ง๊ธ๊น์ง ํผ ~์๋ฃ๊ตฌ์กฐ๊น์ง ์น์ ์ ๋ฌธ์ ๋ฅผ ์ผ์ฃผ์ผ์ 5~10๊ฐ์ฉ ๋ค์ ํ๊ธฐ
- ์คํฐ๋์์ ํ๋ ๋ฌธ์ ๋ค๋ 2๊ฐ ์ด์์ ์ธ์ด๋ก ํ๊ธฐ
- dfs, bfs ๋ฑ ์ด๋ ค์ด ๋ฌธ์ ๋ ์๋ฃ ์ฐพ์๋ณด๊ณ , ๊ฐ์ ๋ฃ๊ณ ํ์ด๋ณด๊ธฐ
feedback
์ถํ ์ถ๊ฐ ์์ .
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([Front-end๐ฆ] #16.5 ์ฝํ + ํ๋ก์ ํธ ๋ณต์ต), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ddosang/Front-end-16.5์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค