[TIL] 1112 LikeLion๐Ÿฆ FES 10

cnsrn1874ยท2021๋…„ 11์›” 12์ผ
0

ํ”ผ๊ทธ๋งˆ ์‹œ์•ˆ๊ณผ ๋งž์ถฐ๋ณด๊ธฐ

1. PerfectPixel

ํฌ๋กฌ์—์„œ ์•„๋ž˜์˜ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์„ ์„ค์น˜ํ•ด์ค€๋‹ค.

2. ํ”ผ๊ทธ๋งˆ ์บก์ณ

ํ”ผ๊ทธ๋งˆ์—์„œ ๋ฐฐ์œจ์„ 100%๋กœ ์กฐ์ •ํ•˜๊ณ  ์‹œ์•ˆ์„ ์บก์ณํ•œ๋‹ค.

์บก์ณํ•œ ๊ฒฐ๊ณผ๋ฌผ์„ ์ €์žฅํ•œ๋‹ค.

3. ๋ ˆ์ด์–ด ์ถ”๊ฐ€

๊ฒ€์‚ฌํ•˜๋ ค๋Š” HTML ๋ฌธ์„œ๋ฅผ LiveServer๋กœ ์—ฐ ํ›„ PerfectPixel์„ ์‹คํ–‰ํ•œ๋‹ค.
Add your first layer! ๋ฒ„ํŠผ์„ ํด๋ฆญํ•œ ๋’ค ์ €์žฅํ•œ ์‹œ์•ˆ์„ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.

์ž‘์—…ํ•œ ํŽ˜์ด์ง€์— ๊ฒน์ณ์„œ ์‹œ์•ˆ๊ณผ ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.

4. ์กฐ์ž‘๋ฒ•

  1. ๋ ˆ์ด์–ด on/off
  2. ๋ ˆ์ด์–ด ํ˜„์žฌ ์œ„์น˜์— ๊ณ ์ •
  3. ๋ ˆ์ด์–ด ์ƒ‰์ƒ ๋ฐ˜์ „
  4. ๋ ˆ์ด์–ด X ์ขŒํ‘œ (ํ‚ค๋ณด๋“œ๋กœ ์ด๋™ ๊ฐ€๋Šฅ)
  5. ๋ ˆ์ด์–ด Y ์ขŒํ‘œ (ํ‚ค๋ณด๋“œ๋กœ ์ด๋™ ๊ฐ€๋Šฅ)
  6. ๋ ˆ์ด์–ด ํฌ๊ธฐ ๋น„์œจ (๋ณธ์ธ์˜ ๊ฒฝ์šฐ 1๋กœ ํ•˜๋‹ˆ๊นŒ ์ผ์น˜ํ•จ)
  7. ๋ ˆ์ด์–ด ์ˆ˜ํ‰ ์ค‘์•™์— ๊ณ ์ • (์ˆ˜์ง์œผ๋กœ๋งŒ ์ด๋™ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ฆ)
  8. ํˆฌ๋ช…๋„ ์กฐ์ ˆ

5. ๋…ธ๊ฐ€๋‹ค ์‹œ์ž‘

์ด์ œ CSS๋ฅผ ํ•˜๋‚˜ํ•˜๋‚˜ ์กฐ์ ˆํ•˜๋ฉฐ ์‹œ์•ˆ๊ณผ ๋˜‘๊ฐ™์ด ๋งŒ๋“ค๋ฉด ๋œ๋‹ค.


BEM ๋ฐฉ๋ฒ•๋ก 

  • ๋Ÿฌ์‹œ์•„์˜ ๋„ค์ด๋ฒ„ ์–€๋ฑ์Šค(Yandex)์‚ฌ๊ฐ€ ๋งŒ๋“  CSS ์„ค๊ณ„ ๊ธฐ๋ฒ•์œผ๋กœ OOCSS์™€ ๊ฐ™์€ ๋ชจ๋“ˆ ๊ธฐ๋ฐ˜์˜ ๋ฐฉ๋ฒ•์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ๋‹ค.
  • ID ์„ ํƒ์ž์™€ ์š”์†Œ ์„ ํƒ์ž๋ฅผ ๊ถŒ์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค. z-index๋ฅผ 10๋‹จ์œ„๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๊ฐ€์ค‘์น˜ ๊ณ„์‚ฐ์„ ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•จ์ด๋‹ค.

Block

๋…๋ฆฝ์ ์œผ๋กœ ์กด์žฌํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ ๋‹จ์œ„๋กœ, block๋งŒ ๋–ผ์–ด์„œ ์•„๋ฌด๋ฐ๋‚˜ ๋ถ™์—ฌ๋†”๋„ ์ด์ƒํ•˜์ง€ ์•Š์€ ๋‹จ์œ„์ด๋‹ค.
.block

Element

block์„ ๊ตฌ์„ฑํ•˜๋Š” ๋‹จ์œ„๋กœ, block ์•ˆ์—์„œ๋งŒ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๋ฏ€๋กœ block์— ์˜์กด์ ์ด๋‹ค.
__๋ฅผ ๋ถ™์—ฌ์„œ ์—ฐ๊ฒฐํ•œ๋‹ค.
.block__element

Modifier

block์ด๋‚˜ element์˜ ์—ญํ• , ๋ชจ์–‘ ๋“ฑ์„ ๋‹ด๋‹นํ•˜์—ฌ block์ด๋‚˜ element์— ๋‹ค์–‘์„ฑ์„ ๋ถ€์—ฌํ•œ๋‹ค.
--๋ฅผ ๋ถ™์—ฌ์„œ ์—ฐ๊ฒฐํ•œ๋‹ค.
.block__element--modifier

์ฐธ๊ณ 

GetBEM
[CSS ๋ฐฉ๋ฒ•๋ก ] BEM ๋ฐฉ์‹
BEM ๋ฐฉ๋ฒ•๋ก 


CSS๋กœ checkbox๊พธ๋ฏธ๊ธฐ

์•„๋ž˜์ฒ˜๋Ÿผ ๊ธฐ๋ณธ ์ฒดํฌ๋ฐ•์Šค๊ฐ€ ์•„๋‹ˆ๋ผ ์ปค์Šคํ…€(or ์ด๋ฏธ์ง€)๋ฅผ ์ด์šฉํ•œ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ๋งŒ๋“ค์–ด๋ดค๋‹ค.

  1. ๊ธฐ๋ณธ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ์•ˆ ๋ณด์ด๊ฒŒ ๋งŒ๋“ ๋‹ค.
.form-login__checkbox-keepLoggedIn {
    display: none;
}
  1. ์ฒดํฌ๋ฐ•์Šค์˜ label ํƒœ๊ทธ์— ๊ฐ€์ƒ์š”์†Œ๋กœ ์ฒดํฌ๋˜์ง€ ์•Š์•˜์„ ๋•Œ์˜ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๋Š”๋‹ค.
.form-login__checkbox-keepLoggedIn + label::before {
    content: "";
    display: inline-block;
    background: url(../images/unchecked-box.png);
    width: 22px;
    height: 22px;
    background-size: 22px;
    vertical-align: -6px;
    margin: 0 8px 0 4px;
}
  1. ์ฒดํฌ๋ฐ•์Šค๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ์˜ ์ƒํƒœ๋ฅผ ์˜๋ฏธํ•˜๋Š” :checked ์†์„ฑ์„ ์ด์šฉํ•ด์„œ ์ฒดํฌ ๋˜์—ˆ์„ ๋•Œ์˜ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๋Š”๋‹ค.
.form-login__checkbox-keepLoggedIn:checked + label::before {
    background: url(../images/checked-box.png);
    width: 22px;
    height: 22px;
    background-size: 22px;
}
  1. ์™„์„ฑ
profile
๋‹น์‹ ์„ ํ•œ ์ค„๋กœ ์†Œ๊ฐœํ•ด๋ณด์„ธ์š”

0๊ฐœ์˜ ๋Œ“๊ธ€