[Front-end๐Ÿฆ] #11 1๋งŒ ์‹œ๊ฐ„์˜ ๋ฒ•์น™ + ๋ฐ˜์‘ํ˜•

1. 1๋งŒ ์‹œ๊ฐ„์˜ ๋ฒ•์น™

์–ด์ œ ์ง„ํ–‰ํ•œ ์ˆ˜์—…์—์„œ @media ๋ฅผ ์ด์šฉํ•ด์„œ ๋ชจ๋ฐ”์ผ ์‚ฌ์ด์ฆˆ์— ๋งž์ถ˜ ํ™”๋ฉด ๊ตฌํ˜„์„ ๋ชปํ•˜๊ณ  ๋๋‚ด์„œ, ํ•ด๋‹น ๋ถ€๋ถ„๋ถ€ํ„ฐ ์ง„ํ–‰ํ–ˆ๋‹ค. ์ฝ”๋“œ ๋ฆฌ๋ทฐ์™€ ์ฝ”๋“œ์— ๊ด€๋ จ๋œ ๋‚ด์šฉ์€ #10์— ์ „๋ถ€ ์ •๋ฆฌํ•ด ๋‘์—ˆ๋‹ค.

1-1. ๊ฐ€์ด๋“œ ๋”ฐ๋ผ๊ฐ€๊ธฐ

์˜ค๋Š˜๋„ ํ•จ๊ป˜ ์ฒ˜์Œ๋ถ€ํ„ฐ ํ•ด๋‚˜๊ฐ€๋Š” ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰ํ–ˆ๋‹ค.

์ปดํ“จํ„ฐ ํ™”๋ฉด์— ๋งž์ถฐ์„œ ๋””์ž์ธ ์š”์†Œ๋“ค ํ”ฝ์…€์— ์ •ํ™•ํžˆ ๋งž์ถ”๊ณ ,
@media ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด์„œ max-width: 360px ์— ๋งž์ถ˜ ๋ฐ˜์‘ํ˜• ํŽ˜์ด์ง€๋ฅผ ์†๋ณด์•˜๋‹ค.

tipsโœจ

background-position ์œผ๋กœ background-image์˜ ์œ„์น˜๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
@media ํƒœ๊ทธ๋ฅผ ๋งจ ๋’ค๋กœ ๋„ฃ์–ด์•ผ ๋Œ€์‘ํ•˜๊ธฐ ํŽธํ•˜๋‹ค.

1-2. develop

๋ณต์Šต ๊ฒธ ๋งˆํฌ์—…๋ถ€ํ„ฐ CSS๊นŒ์ง€ ํ˜ผ์ž ๋‹ค์‹œ ์ง„ํ–‰ํ•ด ๋ดค๋”๋‹ˆ ๋ฒ„ํŠผ ์ƒ‰์ด ์•ˆ๋ฐ”๋€Œ๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ, ์œ„์—๋Š” 1๋ฒˆ์ฒ˜๋Ÿผ ์“ฐ๊ณ , ๋’ค์—๋Š” 2๋ฒˆ์ฒ˜๋Ÿผ ์ผ๋”๋‹ˆ ์ ์ˆ˜๊ฐ€ ๋‚ฎ์•„์„œ ์•ˆ๋จนํžˆ๋Š”๊ฑฐ์˜€๋‹ค.

1. ๋ถ€๋ชจ ์ž์‹ { /* ๊ณตํ†ต ์†์„ฑ */ }

2. ์ž์‹ { /* ๋‹ค๋ฅธ ์†์„ฑ */ }

์˜ค๋Š˜ ์ˆ˜์—…๊นŒ์ง€ ๋“ฃ๊ณ  ๋””์ž์ธ์„ ํ”ฝ์…€ ๋‹จ์œ„๋กœ ๋งž์ถ”๋Š” ๊ฒƒ๊นŒ์ง€๋Š” ์‹ค๋ฌด์˜ ๋ฒ”์œ„์ธ ๊ฒƒ ๊ฐ™์•„์„œ ์ œ์™ธํ•˜๊ณ , ๋” ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋งŒ๋“ค์–ด๋ณด๋ ค๊ณ  ํ–ˆ์œผ๋‚˜ ์‹ค๋ฌด์—์„œ๋Š” ์ž˜ ์•ˆ์“ฐ์ธ๋‹ค๊ณ  ํ•˜์—ฌ ๋‹ค๋ฅธ ๊ณต๋ถ€๋ฅผ ํ•˜๋Š”๊ฒŒ ๋‚˜์„ ๊ฒƒ ๊ฐ™์•„์„œ ๋‚˜์ค‘์— javascript๋ฅผ ๋ฐฐ์šด ํ›„์— ๋™์ž‘ํ•˜๊ฒŒ develop ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค!!!




2. CSS ์„ค๊ณ„ ๊ธฐ๋ฒ•

2-1. OOCSS (Object-Oriented)

๊ฐ์ฒด ์ง€ํ–ฅ - ๊ฐ์ฒด์— data + ๊ธฐ๋Šฅ

  1. ๊ตฌ์กฐ(width, height, padding, margin ...)์™€ ์Šคํ‚จ(font, color, ...)์„ ๋ถ„๋ฆฌ. ๊ตฌ์กฐ๊ฐ€ ์žฌํ™œ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋„๋ก.
  2. container ์™€ contents ๋ถ„๋ฆฌ : content style์ด container์— ์ข…์†๋˜์ง€ ์•Š๋„๋ก.

2-2. SMACSS (Scalable and Modular Architecture for CSS)

SMACSS : CSS๋ฅผ ์—ญํ• ๋ณ„๋กœ ๋ถ„๋ฆฌ
|
1. ๋ฒ ์ด์Šค : ํ‘œ์ค€ ์Šคํƒ€์ผ - ๊ณตํ†ต์ ์ธ font, img, reset, ... style

2. ๋ ˆ์ด์•„์›ƒ : header, main, footer, sidebar ๊ฐ™์€ ํฐ ํ‹€์„ ๊ตฌ์„ฑํ•˜๋Š” ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ๊ทœ์น™. id๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

3. ๋ชจ๋“ˆ : layout ์•ˆ์˜ ๋ชจ๋“  ์š”์†Œ๋“ค. id๋Š” ๊ฑฐ์˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , ์š”์†Œ ์„ ํƒ์ž๋„ ์ตœ์†Œํ™”(์ž์‹ ์š”์†Œ๋Š” ๊ฐ€๋Šฅ). ๋น„์Šทํ•œ ๋ชจ๋“ˆ์—์„œ๋„ ๋ชจ์–‘์ด ๋‹ค๋ฅด๋ฉด subclass๋ฅผ ๋งŒ๋“ ๋‹ค. subclass๋Š” ํ•œ๋ฒˆ ์ ์šฉ๋˜๋ฉด ๋ฐ”๋€Œ์ง€ ์•Š์Œ.

<!-- subclass: btn-long, btn-short -->
<a href="" class="btn btn-long">์•„์ด๋””/๋น„๋ฐ€๋ฒˆํ˜ธ ์ฐพ๊ธฐ</a>
<a href="" class="btn btn-short">๋กœ๊ทธ์ธ</a>

4. ์Šคํ…Œ์ดํŠธ : ๊ธฐ์กด ์Šคํƒ€์ผ์„ ๋ฎ์–ด์“ฐ๊ฑฐ๋‚˜ ํ™•์žฅํ•˜๋Š”๋ฐ ์‚ฌ์šฉ. javascript๋ฅผ ๋„ฃ์—ˆ๋‹ค ๋บ๋‹ค ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ ˆ์ด์•„์›ƒ, ๋ชจ๋“ˆ์—๋„ ๋ถ™์ผ ์ˆ˜ ์žˆ์Œ. class ์ด๋ฆ„์— is ์ ‘๋‘์‚ฌ ์‚ฌ์šฉ.

.is-active {
    background-color: bisque;
}
.is-active a {
/* ์ด๋ฏธ ํ™œ์„ฑํ™” ๋œ ํƒญ์„ ๋˜ ํด๋ฆญํ•˜์ง€ ์•Š๊ฒŒ */
    pointer-events: none;
    color: tomato;
}

5. ํ…Œ๋งˆ : ์‚ฌ์ดํŠธ์˜ ๋Š๋‚Œ์„ ์ „๋‹ฌํ•˜๋Š” ์ด๋ฏธ์ง€, ์ƒ‰์ƒ

.mod { border: blue; } /* SMACSS theme */
.mod { border: solid 1px; } /* module */

2-3. BEM (Block, Element, Modifier)

id, ์š”์†Œ ์„ ํƒ์ž ์“ฐ์ง€ ๋ง์ž. - ๊ฐ€์ค‘์น˜ ๊ณ„์‚ฐ์„ ์›ํ™œํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•จ.

block : ์–ด๋””์„œ๋‚˜ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅ - class ์ด๋ฆ„ ๋ช…ํ™•ํ•˜๊ฒŒ, kebab-case
element : block์„ ๊ตฌ์„ฑํ•˜๋Š” ์š”์†Œ - error__link
modifier : block์ด๋‚˜ element์˜ ๋ชจ์Šต์ด๋‚˜ ์ƒํƒœ ๋˜๋Š” ์›€์ง์ž„ (์š”์†Œ๊ฐ€ ํ™œ์„ฑํ™”๋œ ์ƒํƒœ, ์‚ฌ์ด์ฆˆ, ์ปฌ๋Ÿฌ ๋“ฑ๋“ฑ) - btn-move btn-move--size-small ๋‘ ๋ฒˆ์งธ ํด๋ž˜์Šค ์ด๋ฆ„์œผ๋กœ -- ์‚ฌ์šฉ!!




3. ๋กœ๊ทธ์ธ ์ฐฝ ๋งˆํฌ์—…

border-top, bottom ์ƒ‰์ด ์ด์ƒํ•ด์„œ ๋‹ค์‹œ ํ™•์ธํ•ด๋ดค๋Š”๋ฐ, ์›€์งค ์บก์ณ์˜ ๋ฌธ์ œ๋‹ค.

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

์˜ค๋Š˜์˜ ๊ณผ์ œ๋Š” 2๋ฒˆ์—์„œ ๋ฐฐ์šด CSS ์„ค๊ณ„ ๊ทœ์น™, naming ์„ ์ ์šฉํ•ด์„œ ๋กœ๊ทธ์ธ ์ฐฝ์„ ๋งŒ๋“ค์–ด๋ณด๋Š” ๊ฒƒ ์ด์—ˆ๋‹ค. 5์‹œ๋ถ€ํ„ฐ ์ง„ํ–‰ํ–ˆ๋Š”๋ฐ, ์ˆ˜์—… ๋๋‚˜๊ณ ๋„ ์•ˆ์‰ฌ๊ณ ... 8์‹œ๊นŒ์ง€ ๋‹ฌ๋ ค์„œ ๋๋ƒˆ๋‹ค.

BEM naming์„ ์ ์šฉํ•ด๋ดค๋Š”๋ฐ, ๋„ˆ๋ฌด.... ํด๋ž˜์Šค ์ด๋ฆ„์ด ๊ธธ์–ด์„œ..... ํ•˜๋‚˜ํ•˜๋‚˜ ์น˜๋‹ค๊ฐ€ ์˜คํƒ€ ๋‚  ๊ฒƒ ๊ฐ™์•„์„œ ๊ทธ๋ƒฅ html์— ์ž˜ ์จ๋†“๊ณ  ํ™”๋ฉด ๋ถ„ํ• ํ•ด์„œ ๋ณต์‚ฌํ•˜๋ฉด์„œ ์ ์šฉํ–ˆ๋‹ค. ํ™•์‹คํžˆ ๋ถ€๋ชจ๋ฅผ 2~3๊ฐœ depth๋‚˜ ๋ช…์‹œ ์•ˆํ•ด๋„ ๋˜๋Š” ๊ฒƒ์€ ํŽธํ–ˆ๋‹ค. ์ด๋ฏธ ์ด๋ฆ„์— ๋‹ค ๋“ค์–ด๊ฐ€์„œ ๊ทธ๊ฑฐ๋‚˜ ๊ทธ๊ฑฐ๋‚˜์ง€๋งŒ

์ฝ”๋”ฉ์ด ์žฌ๋ฐŒ์„ ๋•Œ ์˜ฌ๋ผ๊ฐ€๋Š” ๋ฌด์•„์˜ ๊ฒฝ์ง€์— ์ด๋ฅด๋Ÿฌ์„œ ๋‚ด๊ฐ€ ๋‚˜์˜ ์˜ํ˜ผ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋Š” ๋…ธ๋ž˜ ์•ˆํ‹€์–ด๋†“๊ณ  ์ฝ”๋”ฉํ•˜๋Š”์ง€๋„ ๋ชจ๋ฅด๊ณ  ํ–ˆ๋‹ค.

<๋ฌธ์ œ์ >

- ๐Ÿ” js๋ฅผ ์•ˆ๋ฐฐ์› ๊ธฐ ๋•Œ๋ฌธ์— :focus ๋ฅผ ์ด์šฉํ•ด์„œ ์Šคํƒ€์ผ์ด ์ž˜ ์ ์šฉ๋˜๋Š”์ง€๋งŒ ์‹œํ—˜ํ•ด ๋ณด์•˜๋‹ค. ์–ผ๋ฅธ ๋ฐฐ์›Œ์„œ ๋นจ๊ฐ„ ๊ธ€์”จ๊ฐ€ ์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜๊ฒŒ ํ•˜๊ณ  ์‹ถ๋‹ค.

- โœ๏ธ ํฐํŠธ ์ ์šฉ์ด ์•ˆ๋จ
[์ด์œ ](https://spoqa.github.io/2017/02/15/using-shs-as-webfonts.html) : ๋ฌด๋ฃŒ MDN์„ ์‚ฌ์šฉํ•ด์„œ ๊ต‰์žฅํžˆ ๋Š๋ฆฌ๋‹ค๊ณ  ํ•œ๋‹ค. ๋ ˆ์ด์•„์›ƒ ๊ตฌ์ถ•์„ ๊ณต๋ถ€ํ•˜๋Š”๊ฒŒ ๋ชฉ์ ์ด๋ผ ์ผ๋‹จ ๋’ค๋กœ ๋ฏธ๋ค˜๋‹ค.

- ๐Ÿ› SMACSS ๋ฅผ ์ ์šฉํ•˜๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ, ์–ด๋–ค ๊ฒƒ์ด ์–ด๋–ค ์†์„ฑ์ธ์ง€ ๋ชจ๋ฅด๋Š” ์ƒํƒœ๋กœ ์ฝ”๋“œ๋ฅผ ์ชผ๊ฐœ๋ฉด ๋‚˜์ค‘์— ๋ณด๊ธฐ ํ—ท๊ฐˆ๋ฆด ๊ฒƒ ๊ฐ™๋‹ค๋Š” ๋Š๋‚Œ์ด ๋“ค์—ˆ๋‹ค. ์ผ๋‹จ SMACSS ๋ฅผ ์กฐ๊ธˆ ๋” ๊ณต๋ถ€ํ•ด์•ผ๊ฒ ๋‹ค.



3. ๋Š๋‚€์ 

  • ํ”ฝ์…€ ์ •ํ™•ํ•˜๊ฒŒ ๋งž์ถ”๋Š” ๊ฑด ์ •๋ง.. ํž˜๋“ค์—ˆ๋‹ค. ์–ด๋–ค ์š”์†Œ๋ฅผ ์ด์šฉํ•ด์„œ ํ•  ์ง€๋Š” ์•„๋Š”๋ฐ 1~2px ๋” ๋ฐ€๊ณ  ํ•˜๋Š” ๊ณผ์ •์ด ๋„ˆ๋ฌด... ํž˜๋“ค์—ˆ๋‹ค. ํฌ๋กฌ extension Perfect Pixel๋กœ ์Šคํฌ๋ฆฐ์ƒท ํ•ด์„œ ํˆฌ๋ช…์œผ๋กœ ๋„์›Œ๋†“๊ณ  ๋น„๊ตํ•˜๋ฉด์„œ ๋งž์ถ”์—ˆ๋Š”๋ฐ ์ด๊ฑด ๋ฐฐ์šฐ๋Š” ๊ณผ์ • ๋™์•ˆ์€ ๋ณต์Šตํ•˜์ง€ ์•Š์•„๋„ ๋  ๊ฒƒ ๊ฐ™๋‹ค.
  • ๋ฐฑ์—”๋“œ์˜ ์ฒ ํ•™์ด ๋„˜์–ด์™€์„œ ๋งŒ๋“ค์–ด์ง„๊ฒŒ react.js, angular.js ๋ผ๊ณ  ํ•˜์…จ๋Š”๋ฐ, ์ฒซ ๋‚  ๋“ค์€ '๋ฐ์ดํ„ฐ'๊ฐ€ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๊ณ  ๊ทธ ๋ฐ์ดํŠธ์˜ ํ๋ฆ„์ด ํ”„๋ก ํŠธ๋กœ ๋„˜์–ด์™€์„œ ํ”„๋ก ํŠธ๊ฐ€ ์œ ๋งํ•˜๋‹ค๋Š” ์ด์•ผ๊ธฐ์™€ ๋™์ผํ•ด์„œ ๋†€๋ž๋‹ค.
  • ๊ฒฝ๋ ฅ ๊ณต๊ณ ์— ์ง€์›ํ•ด๋„ ๋˜๋ƒ๊ณ  ๋ฌผ์–ด๋ดค๋‹ค๊ฐ€ ๋‚ด๊ฐ€ ์˜์•„์˜ฌ๋ฆฐ ์ž‘์€ ๊ณต ์ฑ„์šฉ ๊ณต๊ณ  ๋ถ„์„์˜ ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋Š”๋ฐ, ๋‚ด๊ฐ€ ์ค€๋น„๊ฐ€ ๋๋ƒ ์•ˆ๋๋ƒ๋Š” ๋‚ด๊ฐ€ ๊ฒฐ์ •ํ•˜๋Š”๊ฒŒ ์•„๋‹ˆ๋‹ค!!! ๋ผ๋Š” ๋ง์ด ๋„ˆ๋ฌด ์ธ์ƒ๊นŠ์—ˆ๋‹ค. ์ž๊ฒฉ ์š”๊ฑด๊ณผ ์šฐ๋Œ€ ์‚ฌํ•ญ์ด ์–ด๋–ป๊ฒŒ ํ•ด์„๋˜๋Š”์ง€๊ฐ€ ๋„ˆ๋ฌด ์‹ ๊ธฐํ–ˆ๋‹ค. ์ด์ œ๋ถ€ํ„ฐ ์ด๋ ฅ์„œ ์ค€๋น„ํ•ด์„œ ๋‹ค ์“ธ๊ฑฐ๋‹ท!!!!
  • SMACSS ๊ฐ™์€ ๊ตฌ์กฐ๋ก ์€ ์•Œ์•„๋‘ฌ์„œ ๋‚˜์ ๊ฒŒ ์—†๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค๊ธฐ ๋•Œ๋ฌธ์— ํ•˜๋ฃจ์— ํ•œ ํŽ˜์ด์ง€์”ฉ ๋ฒˆ์—ญํ•˜๋ฉด์„œ ๊ณต๋ถ€ํ•ด๋ด์•ผ๊ฒ ๋‹ค. ๋งค์ผ์€ ๋ฌด๋ฆฌ๊ณ  ํ™” ๋ชฉ ์ž๊ธฐ ์ „์— ๋ด์•ผ๊ฒ ๋‹ค!!!

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