๐Ÿ’ปํŒจ์ŠคํŠธ์บ ํผ์ŠคX์•ผ๋†€์ž ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋ถ€ํŠธ์บ ํ”„_1์ฐจ๊ณผ์ œ ํšŒ๊ณ ์ž‘์„ฑ

๐Ÿ’ปํŒจ์ŠคํŠธ์บ ํผ์ŠคX์•ผ๋†€์ž ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋ถ€ํŠธ์บ ํ”„_1์ฐจ๊ณผ์ œ ํšŒ๊ณ ์ž‘์„ฑ
๐Ÿ’ปํŒจ์ŠคํŠธ์บ ํผ์ŠคX์•ผ๋†€์ž ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋ถ€ํŠธ์บ ํ”„_1์ฐจ๊ณผ์ œ ํšŒ๊ณ ์ž‘์„ฑ
Contents
๐Ÿ’ป HTML&CSS ํด๋ก  ์ฝ”๋”ฉ ๊ณผ์ œ ํšŒ๊ณ  ๋‚จ๊ธฐ๊ธฐ !
์ด๋ฒˆ ๊ณผ์ œ๋ฅผ ํ•˜๋ฉฐ
๐Ÿ”ฅ๊ทธ๋ž˜์„œ ์•ž์œผ๋กœ?
๋ฌด์—‡๋ณด๋‹ค ์ฆ๊ธฐ๊ธฐ !

๐Ÿ’ป HTML&CSS ํด๋ก  ์ฝ”๋”ฉ ๊ณผ์ œ ํšŒ๊ณ  ๋‚จ๊ธฐ๊ธฐ !


์‚ฌ์šฉ ์Šคํƒ
๊ฐœ๋ฐœ ๊ธฐ๊ฐ„
๋ฌด์Šจ ๊ณผ์ œ?
HTML, CSS, Netlify, SCSS, Swiper
2023-07/26~2023/07/29ๆ—ฅ
HTML๊ณผ CSS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ž์‹ ์ด ํด๋ก ํ•˜๊ณ  ์‹ถ์€ ์‚ฌ์ดํŠธ ์ฝ”๋”ฉํ•˜๊ธฐ
ย 
ย 

My Clone Site

  • ๋ณธ์ธ์ด Clone์„ ์‹œ๋„ํ•œ ์œ ํŠœ๋ธŒ ๋ฎค์ง ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค.
    • ์ตœ๋Œ€ํ•œ ๋ ˆ์ด์•„์›ƒ์„ ๋”ฐ๋ผํ•ด๋ณด๋ ค ์‹œ๋„๋ฅผ ํ•˜์˜€๊ณ , ๋ฐ˜์‘ํ˜• ํŽ˜์ด์ง€๋กœ ์ œ์ž‘ํ•˜์ง€ ๋ชปํ•˜์˜€๋‹ค. โ€”> ์•„์‰ฌ์› ๋˜ ์ 

๊ธฐ๋Šฅ์ ์œผ๋กœ ์ถ”๊ฐ€ํ•œ ์ 

  • ๊ฒ€์ƒ‰์ฐฝ ํด๋ฆญ ์‹œ, Animation ์š”์†Œ
  • Swiper ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•œ ์Šฌ๋ผ์ด๋“œ ์• ๋‹ˆ๋ฉ”์ด์…˜
  • SCSS ์ „์ฒ˜๋ฆฌ๊ธฐ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๊ธฐ!
ย 

Real Site

  • ์‹ค์ œ ์œ ํŠœ๋ธŒ ๋ฎค์ง ํ™ˆํŽ˜์ด์ง€์ด๊ณ , ๊ฐ€์šด๋ฐ ์ปจํ…์ธ  ํ˜•์‹์€ ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฌถ์–ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค.
  • ์‹ค์ œ ํŽ˜์ด์ง€์™€ ๋™์ผํ•˜๊ฒŒ ํด๋ก ํ•˜์ง€ ๋ชปํ–ˆ๋˜ ๋ถ€๋ถ„๋“ค
    • ์ขŒ์ธก NavBar ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ–ˆ๋˜ ์ 
    • ๊ฒ€์ƒ‰์ฐฝ ํด๋ฆญ ์‹œ, ๊ฒ€์ƒ‰๊ธฐ๋ก ๋ ˆ์ด์•„์›ƒ ๋ฏธ๊ตฌํ˜„
    • ํ”„๋กœํ•„ ํด๋ฆญ ์‹œ, ํ”„๋กœํ•„ ๊ด€๋ จ ์„ค์ • ๋ ˆ์ด์•„์›ƒ ๋ฏธ๊ตฌํ˜„
    • ๋ณธ๋ฌธ์˜ ์ปจํ…์ธ ๋Š” ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์€๋ฐ, ์ด๋ฒˆ ๊ณผ์ œ์—์„œ ์‹œ๋„ํ•˜๋‹ค ๋ฐ˜์‘ํ˜•์œผ๋กœ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ•ด, ๊นจ์ง€๋Š” ํ˜„์ƒ์ด ๋‚˜ํƒ€๋‚˜ ๋ฏธ๊ตฌํ˜„
    • ๋งˆ์ง€๋ง‰์œผ๋กœ ์•„์‰ฌ์› ๋˜ ์ ์€, ์Šฌ๋ผ์ด๋“œ ๋ถ€๋ถ„์— ๋…ธ๋ž˜ ์•จ๋ฒ” ์ด๋ฏธ์ง€ Hover ์‹œ, ๋“ค์œผ๋Ÿฌ๊ฐ€๊ธฐ ๊ฐ€์ƒ์š”์†Œ ๋„ฃ๊ธฐ !
ย 

๐Ÿ’ก ์ด๋ ‡๊ฒŒ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ–ˆ๋˜ ๋ถ€๋ถ„๋“ค๊ณผ, ๋ฐ˜์‘ํ˜• ํŽ˜์ด์ง€๋กœ ์ œ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๋ฆฌํŒฉํ† ๋ง์„ ์‹œ๋„ํ•˜์˜€๊ณ , ๊ทธ ๊ธฐ๋ก์„ ๋‚จ๊ธฐ๊ธฐ ์œ„ํ•œ ํšŒ๊ณ ๋ก ์ž‘์„ฑ์ด๋‹ค.

ย 
ย 

๐Ÿคจ์šฐ์„ , ์ฒซ ๋ฒˆ์งธ๋กœ ์•„์‰ฌ์› ๋˜ ์ ์„ ๋ณด์ž.

... header.nav_list { display: flex; ... // ์™ผ์ชฝ nav div.nl_left { display: flex; align-items: center; ... .menu_bar_wrap { display: flex; justify-content: center; ... transition: background-color 0.3s; .menu_bar { width: 20px; height: 20px object-fit: contain; } } .menu_bar_wrap:hover { background-color: rgb(48, 48, 48); cursor: pointer; } } ...

SCSS Review

Clone Site์˜ SCSS ์ฝ”๋“œ ไธญ ์ผ๋ถ€๋ถ„์ด๋‹ค. ์šฐ์„  SCSS๋Š” ์ด๋ฒˆ์— ์ฒ˜์Œ์œผ๋กœ ์‚ฌ์šฉํ•ด๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค. SCSS๋Š” CSS์˜ ์ „์ฒ˜๋ฆฌ๊ธฐ ๋„๊ตฌ์ด๋ฉฐ, ์ด๊ฒƒ์˜ ํŠน์ง•์œผ๋กœ๋Š”
  1. Nesting(์ค‘์ฒฉ)๊ธฐ๋Šฅ - ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š๊ณ , ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅ.
  1. $(์žฌํ™œ์šฉ) ๊ธฐ๋Šฅ - ๋ณ€์ˆ˜ ์•ž์— $๋ฅผ ๋ถ™์—ฌ, ๊ณตํ†ต๋œ ์†์„ฑ ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅ.
  1. @import ๊ตฌ๋ฌธ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  1. @mixin์œผ๋กœ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  โ€”> @include + ํ•จ์ˆ˜๋ช…์œผ๋กœ ์„ ์–ธํ•œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉ ๊ฐ€๋Šฅ.
์ด์™ธ์—๋„ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๊ธฐ๋Šฅ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.
ย 

ํ•˜์ง€๋งŒ,

๋ณธ์ธ์ด ์ž‘์„ฑํ–ˆ๋˜ SCSS ์ž‘์„ฑ๋ฒ•์€ ์ด๊ฒƒ์„ ์ œ๋Œ€๋กœ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๊ณ , ๋‚จ๋ฐœํ•ด๋‚ธ ์Šคํƒ€์ผ๋ง์ด ์•„๋‹๊นŒ ์‹ถ์—ˆ๋‹ค.
โ“
๊ทธ๋Ÿผ ์–ด๋–ค ๋ถ€๋ถ„์ด ๋ฌธ์ œ์˜€์„๊นŒ? ์ฝ”๋“œ๋ฆฌ๋ทฐ๋ฅผ ํ•ด๋ณด์ž.
์šฐ์„  ์œ„์— ์˜ฌ๋ฆฐ ์ฝ”๋“œ์ฒ˜๋Ÿผ
... .menu_bar_wrap { display: flex; justify-content: center; ... .menu_bar { width: 20px; height: 20px; object-fit: contain; } ... ๋‚ด๋ถ€ ํด๋ž˜์Šค ์•ˆ์—, ๋˜ ๋‚ด๋ถ€ ํด๋ž˜์Šค ๋ช…์œผ๋กœ ์Šคํƒ€์ผ์„ ์ž…ํ˜”๋‹ค.
ํ•˜์ง€๋งŒ ๊ตณ์ด ์ด๋Ÿด ํ•„์š” ์—†์ด, ๊ทธ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉ๋˜์–ด์ง„ ํƒœ๊ทธ๋กœ ๋Œ€์‹ ํ•˜๋ฉด ๋˜๋Š” ๊ฒƒ์ด๋‹ค.
  • ๋ณธ์ธ์ด ํ•œ ๋ฐฉ์‹์€ ๋ฌผ๋ก , CSS ํŒŒ์ผ ๋‚ด์—์„œ, ์–ด๋–ค ํด๋ž˜์Šค ๋ช…์— ์–ด๋–ค ์†์„ฑ์ด ์‚ฌ์šฉ๋˜์—ˆ๋Š” ์ง€ ๊ธˆ๋ฐฉ ํ•„ํ„ฐ๋งํ•ด ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ด ์žˆ๋‹ค.
    • ํ•˜์ง€๋งŒ, ์–ด๋”˜๊ฐ€ ์ง€์ €๋ถ„ํ•ด ๋ณด์ด๋Š” CSS ํŒŒ์ผ์ด ๋  ์ˆ˜๋„ ์žˆ๋‹ค. ์‹ฌ์ง€์–ด, ์‚ฌ์šฉ๋˜์–ด์ง„ ํด๋ž˜์Šค ๋ช… ์•ˆ์— ๊ทธ ํด๋ž˜์Šค ๋ช…์ด ๋˜์žˆ๊ณ  ํ•˜๋‹ค๋ณด๋‹ˆ, SCSS ํŒŒ์ผ์—์„œ๋Š” ์ฐพ์•„๋ณผ ์ˆœ ์žˆ์–ด๋„, CSS ํŒŒ์ผ์—์„œ ์›ํ•˜๋Š” ๋ถ€๋ถ„์„ ์ฐพ๊ธฐ๋ž€, ์‰ฝ์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค.
โ—
๊ทธ๋Ÿผ ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์–ด๋–ค ๋ฐฉ์‹์„ ์ฑ„ํƒํ•ด์•ผ ํ• ๊นŒ?

๋‚˜๋ฆ„์˜ ํ•ด๊ฒฐ์ฑ…

๊ฐ™์€ ์กฐ์›๋ถ„๋“ค์˜ ํด๋ก  ์ฝ”๋”ฉ ๋ฆฌ๋ทฐ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๊ทธ ๋ฐฉ์‹์„ ์–ด๋Š์ •๋„ ์•Œ๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ,
โœจ ์šฐ์„  ์ฒซ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์œผ๋กœ -
<div class ="container"> <div class="container_two"> </div> </div>
์ด๋Ÿฐ ์ฝ”๋“œ๊ฐ€ ์žˆ์„ ๋•Œ
.container{ ... .container_two{ ... } } ๊ธฐ์กด์—๋Š” ์ด๋Ÿฐ์‹์œผ๋กœ ์ž‘์„ฑํ–ˆ๋‹ค๋ฉด, ํŠน์ • ์ง€์–ด์ค˜์•ผํ•  ๋•Œ์—๋Š” ๋งž๋Š” ๋ฐฉ๋ฒ•์ด์ง€๋งŒ, ์ €๋ ‡๊ฒŒ ํ•œ ๊ฐ€์ง€ ์š”์†Œ๋งŒ ๋“ค์–ด๊ฐ€ ์žˆ๋Š” ์ฝ”๋“œ๋“ค์ด๋ผ๋ฉด? .container{ ... div{ ... } } ์ด๋Ÿฐ ์‹์œผ๋กœ ์ž‘์„ฑํ•˜๋ฉด ์กฐ๊ธˆ ๋” ๊น”๋”ํ•œ ๋ชจ์Šต์„ ๋ณผ ์ˆ˜ ์žˆ๊ณ , CSS๋กœ ์ปดํŒŒ์ผ ๋˜๋ฉด์„œ ์กฐ๊ธˆ ๋” ํ”Œ๋ ‰์„œ๋ธ” ํ•˜๊ฒŒ ์ปดํŒŒ์ผ ๋˜๋Š” ๋ชจ์Šต์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ๐Ÿ‘“
ย 
ย 

๐Ÿ™„ ๋‘ ๋ฒˆ์งธ๋กœ ์•„์‰ฌ์› ๋˜ ์ ์„ ์ ์–ด๋ณด์ž !

โญ
๋‘ ๋ฒˆ์งธ๋Š” ๋ฐ”๋กœ, SCSS ํŒŒ์ผ๋“ค์„ ์กฐ๊ธˆ ๋” ๋‚˜๋ˆ ์„œ ์ปดํŒŒ์ผ ํ–ˆ์œผ๋ฉด ์–ด๋• ์„๊นŒ? ๋ผ๋Š” ์•„์‰ฌ์›€์ด ๋‚จ์•˜์—ˆ๋‹ค!
์ด๋Ÿฐ ์•„์‰ฌ์›€์ด ์žˆ์—ˆ๊ณ , ์‹ค์ œ๋กœ ๊ฐ™์€ ์กฐ์›๋ถ„๋“ค์˜ ํ”ผ๋“œ๋ฐฑ ไธญ
notion image
notion image

์ด ๋‘ ๋ถ€๋ถ„์€ ๋งฅ๋ฝ์ƒ ๋น„์Šทํ•œ ํ”ผ๋“œ๋ฐฑ์ด์–ด์„œ ๋ฌถ์—ˆ์Šต๋‹ˆ๋‹ค.

๋ฌผ๋ก , ํ•‘๊ณ„๋ฅผ ๋Œ€์ž๋ฉด ์‹ค์ œ ๊ฐœ๋ฐœ์—์„œ๋Š” ์ด๋Ÿฐ ์‹์œผ๋กœ ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ๋Œ€์ถฉ ์ง“๊ณ , ํŒŒ์ผ ๋“ฑ์˜ ๊ตฌ์กฐ๋ฅผ ๋‚จ๋ฐœํ•˜์ง„ ์•Š๊ธฐ๋„ ํ•˜์ง€๋งŒ,
์ด๋ฒˆ ๊ณผ์ œ์—์„œ๋Š” ๋‹จ์ˆœํžˆ ํด๋ก ์— ๋ชฉ์ ์„ ๋” ๋‘” ๊ฐœ๋ฐœ์ด์—ˆ๋‹ค ๋ณด๋‹ˆ, ์–ด๋Š์ƒŒ๊ฐ€ ํด๋” ๊ตฌ์กฐ๋„ ์ •๋ฆฌ๊ฐ€ ๋˜์ง€ ์•Š๊ณ  ์†๋Œ€๊ธฐ ์–ด๋ ค์›Œ์ง„ ๊ฒฝ์šฐ๊ฐ€ ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ์ด๋Ÿฐ ๋ถ€๋ถ„๋„ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์•˜๊ธฐ์—, ์กฐ๊ธˆ ๋” ์ข‹์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด
  • ์ธ๋ผ์ธ์œผ๋กœ ์ž‘์„ฑ๋œ JSํŒŒ์ผ์„ ๋”ฐ๋กœ ๋ชจ๋“ˆํ™” ํ•˜์˜€๊ณ ,
  • ๋˜ํ•œ SCSS ํŒŒ์ผ ํ•˜๋‚˜์— ๋ชฝ๋•… ๋•Œ๋ ค๋ฐ•์€ CSS ํŒŒ์ผ์„ ๊ฐ ๋ถ€๋ถ„์— ๋งž์ถ”์–ด ์„ธ๋ถ„ํ™”ํ•˜์—ฌ ํŒŒ์ผ์„ ๋‚˜๋ˆด๊ณ , @import ๊ตฌ๋ฌธ์„ ์ด์šฉํ•ด ํ•˜๋‚˜์˜ SCSS ํŒŒ์ผ์—์„œ CSS ํŒŒ์ผ๋กœ ์ปดํŒŒ์ผ ๋˜๋„๋ก ์ˆ˜์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.
ย 

๐Ÿ˜‰ ์„ธ ๋ฒˆ์งธ๋กœ ์•„์‰ฌ์› ๋˜ ์ ์„ ์ ์–ด๋ณด์ž!

โญ
์ด ๋ถ€๋ถ„์€ ๋ฉ˜ํ† ๋‹˜๊ป˜์„œ ๋‚จ๊ฒจ์ฃผ์‹  ํ”ผ๋“œ๋ฐฑ ๋‚ด์šฉ ไธญ ์ผ๋ถ€์ž…๋‹ˆ๋‹ค.
notion image
notion image

์ฒ˜์Œ์— ์ œ๊ฐ€ ์ƒ๊ฐํ–ˆ์„ ๋•Œ, Main์— Merge๊นŒ์ง€ ์ง„ํ–‰๋˜๋Š” ํ”„๋กœ์ ํŠธ์ธ ์ค„ ์ฐฉ๊ฐํ•ด์„œ, ์ตœ์ƒ์œ„ root ํŒŒ์ผ์—์„œ ๊ฐœ๋ฐœ์„ ํ•˜๊ฒŒ๋˜๋ฉด, ํ˜ผ๋™์ด ๋ ๊นŒ ๋”ฐ๋กœ ํด๋”๋ง์„ ํ•˜๋‚˜ ๋งŒ๋“ค์–ด ๊ณผ์ œ๋ฅผ ์ˆ˜ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

  • ์ด ๋ถ€๋ถ„์€, ์‹ค์ œ Merge๊นŒ์ง€ ์ง„ํ–‰์ด ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ํ™•์ธ ์ดํ›„, ์ตœ์ƒ์œ„ ํด๋”๋กœ ์˜ฎ๊ฒจ๋‘์—ˆ๊ณ , ์ถ”ํ›„ ์žˆ์„ ๊ณผ์ œ์—์„œ๋„ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ํ•ด๋‚˜๊ฐˆ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์œผ๋กœ๋Š”, ํƒœ๊ทธ์˜ default๊ฐ’์ธ ๋ถ€๋ถ„์—๋„ CSS๊ฐ€ ์ ์šฉ์ด๋˜์–ด์žˆ๋‹ค๊ฑฐ๋‚˜, CSS ์†์„ฑ์„ ์ค‘๋ณต์ ์œผ๋กœ ์ž‘์„ฑํ•œ ๋ถ€๋ถ„๋“ค์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

  • ์ด ๋ถ€๋ถ„์€ ์ œ๊ฐ€ ์‹ค์ œ ํด๋ก  ํŽ˜์ด์ง€๋ฅผ ๋ณด๋ฉด์„œ ๋ ˆ์ด์•„์›ƒ ๋ฐ CSS๋ฅผ ๋งŒ๋“ค์–ด๊ฐ€๋Š” ๊ณผ์ •์—์„œ, ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์–ด๋–จ๊นŒ, ์ €๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ ๊นŒ? ์ด๋Ÿฐ ๋ฐฉ์‹์„ ๊ฑฐ์น˜๋ฉด์„œ ์ƒ๊ธด ๋ฏธ์ˆ™ํ•จ์ด์ž โ€˜๋Œ€์ถฉโ€™ ํ–ˆ๋‹ค๋ผ๊ณ  ์ƒ๊ฐ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
    • ์ด๋Ÿฐ ์ค‘๋ณต์ ์ธ ๋ถ€๋ถ„๋“ค์€ ์ตœ๋Œ€ํ•œ ์ฐพ์•„์„œ, ์‚ญ์ œ๋ฅผ ํ•˜์˜€๊ณ , ๋ฌผ๋ก  ๊ฐ€์žฅ ๋ฐ‘์—์„œ ์„ ์–ธ๋œ CSS๊ฐ€ ์ ์šฉ๋œ๋‹ค๊ณ  ํ•  ์ง€๋ผ๋„, Clean Code์ด์ง„ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ถฉ๋ถ„ํ•œ ๋ฆฌํŒฉํ† ๋ง ๊ณผ์ •์„ ๊ฑฐ์ณค์Šต๋‹ˆ๋‹ค.
    • ๋‹ค์Œ ๊ณผ์ œ์—์„ , ์กฐ๊ธˆ ๋” ์‹œ๊ฐ„์„ ์ž˜ ํ™œ์šฉํ•ด๋‚˜๊ฐ€๋ฉด์„œ, ๋ฆฌํŒฉํ† ๋ง์„ ํ•  ๋ถ€๋ถ„๊นŒ์ง€ ๋ฏธ๋ฆฌ ์ƒ๊ฐ์„ ์กฐ๊ธˆ์”ฉ ํ•ด๋‘์–ด์•ผ ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ•˜๊ฒŒ ๋์Šต๋‹ˆ๋‹ค.
ย 

๐Ÿ˜‚ ๋„ค ๋ฒˆ์งธ ์•„์‰ฌ์› ๋˜ ์ 

โญ
๊ฐ™์€ ์กฐ์›๋ถ„๋“ค ์ค‘ ํ•œ ๋ถ„๊ป˜์„œ ๋‚จ๊ฒจ์ฃผ์‹  ํ”ผ๋“œ๋ฐฑ์ด์—ˆ์Šต๋‹ˆ๋‹ค.
notion image

์‚ฌ์‹ค, ์ €๋Š” ์‹ค์ œ ๊ฐœ๋ฐœ์„ ํ•˜์—ฌ ๋Ÿฐ์นญํ•˜๋Š” ์„œ๋น„์Šค๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด, ์ฝ”๋“œ์— ์ฃผ์„์„ ๋‹ฌ์•„๋‘๊ณ  ์ง€์†์ ์œผ๋กœ ๊ด€์ฐฐ์„ ํ•˜๋Š” ํŽธ์ž…๋‹ˆ๋‹ค.

  • ์ €๋Ÿฐ ๋ถ€๋ถ„์€ ๋งŒ์•ฝ Button์ด๋ผ๋Š” ํƒœ๊ทธ๋ฅผ ์ผ์„ ๋•Œ์™€ ๋‹จ์ˆœํžˆ Div ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ค์–ด์„œ ์ง์ ‘ ๋ฒ„ํŠผ์„ ๋งŒ๋“ค์—ˆ์„ ๋•Œ์˜ ์ฐจ์ด๋ฅผ ๊ด€์ฐฐํ•˜๊ธฐ ์œ„ํ•ด ์จ๋‘์—ˆ๊ณ , ๋”ฐ๋กœ ์–ด๋”˜๊ฐ€์— ์ž‘์„ฑ์„ ํ•ด๋‘๋ฉด์„œ ์ฝ”๋”ฉ์„ ํ•˜๋Š” ํŽธ์ด ์•„๋‹ˆ๋ผ,
    • ์ €๋Ÿฐ ๋ถ€๋ถ„๋“ค์ด ์€๊ทผํžˆ ๋งŽ์Šต๋‹ˆ๋‹ค.
  • CSS ์ ์ธ ๋ถ€๋ถ„์—์„œ๋„ 1์•ˆ), 2์•ˆ) ๋“ฑ๋“ฑ๋„ ๊ฐ€๋”์”ฉ ๋‚จ๊ฒจ๋‘๋Š” ํŽธ์ด๊ณ ,
  • ๋งŒ์•ฝ ํ˜‘์—…์„ ํ•˜๋Š” ๋‹จ๊ณ„์—์„œ๋Š”, ๋ฌผ๋ก  PR๊ณผ์ •์„ ๊ฑฐ์น˜๊ธด ํ•˜์ง€๋งŒ, ์ฝ”๋“œ์— ์ฃผ์„์„ ๋‹ฌ์•„๋‘ฌ ์กฐ๊ธˆ ๋” ๋””ํ…Œ์ผ์ ์œผ๋กœ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ๋„ ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. (ex: ์ฝ”๋“œ ํ•œ์ค„์˜ ์„ค๋ช…๋ฌธ, ๋ชจ๋ฅด๋Š” ์ , ์งˆ๋ฌธ)

๊ทธ๋ž˜์„œ ์‚ฌ์‹ค, ์ €๋Ÿฐ ๋ถ€๋ถ„์€ ๋ฐฐํฌ๋ฅผ ํ•œ ์ดํ›„๋‚˜, ์‹ค์ œ ๋Ÿฐ์นญ ์ดํ›„์—์„œ๋Š” ์ „๋ถ€๋‹ค ์ง€์›Œ์•ผ๋˜๋Š” ์ฃผ์„์ด๊ธด ํ•˜์ง€๋งŒ, ์•„์ง์€ ๊ฐ€๋ฒผ์šด ์ฃผ์ œ์ด๊ธฐ์— ๋”ฐ๋กœ ์ œ๊ฑฐํ•˜์ง„ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

ย 

์ด๋ฒˆ ๊ณผ์ œ๋ฅผ ํ•˜๋ฉฐ

โœ…
๊ฐœ์ธ์ ์œผ๋กœ ์•„์‰ฌ์›€์ด ๋งŽ์ด ๋‚จ๋Š” ๊ณผ์ œ ์ˆ˜ํ–‰์ด์—ˆ๋‹ค.
  • ์ฃผ์–ด์ง„ ์‹œ๊ฐ„์€ ๋งŽ์•˜์ง€๋งŒ, ์ƒ๊ฐ๋ณด๋‹ค ๊ทธ ์‹œ๊ฐ„์„ ์ž˜ ํ™œ์šฉํ•˜์ง€ ๋ชปํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
  • ๋˜ํ•œ, ์ด๋ฒˆ์—๋Š” ๋ฌด์–ธ๊ฐ€ ํ•œ๋ฒˆ์— ํ•˜๋“œ์ฝ”๋”ฉ์œผ๋กœ ๋กํ•˜๊ณ , ๋ก ์ปค๋ฐ‹ํ•œ ๊ณผ์ •์ด ๋œ ๊ฒƒ ๊ฐ™์•„ ๊ทธ ๋ถ€๋ถ„์— ๋Œ€ํ•œ ์•„์‰ฌ์›€๋„ ๋‚จ์•˜์Šต๋‹ˆ๋‹ค.
ย 
โญ
์ข‹์•˜๋˜ ์ 
  • ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ํ•˜๋“œ์ฝ”๋”ฉ์œผ๋กœ ์‹œ๋„ํ•ด๋ณด๊ธฐ๋„ ํ•˜์˜€๊ณ , SCSS๋ผ๋Š” CSS ์ „์ฒ˜๋ฆฌ๊ธฐ ๋„๊ตฌ๋„ ๋„์ž…ํ•ด์„œ ์‚ฌ์šฉํ•ด ๋ณด์•„์„œ, SCSS์— ๋Œ€ํ•ด ์•Œ๊ฒŒ ๋˜์—ˆ๋˜ ๊ฒƒ
  • Swiper ๊ธฐ๋Šฅ๋„ ์ฒ˜์Œ ๋„์ž…ํ•ด ์‚ฌ์šฉํ•ด๋ณด๋ฉด์„œ, ๋‹ค๋ฅธ Event๋‚˜ Animation ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฐ ๋„๊ตฌ์—๋„ ์†์„ ๋Œˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ !
  • ์กฐ์› ๋ถ„๋“ค์˜ ๋ฆฌ๋ทฐ ๋ฐ ๋ฉ˜ํ† ๋‹˜์˜ ํ”ผ๋“œ๋ฐฑ ๊ณผ์ •์„ ํ†ตํ•œ ์ž๊ธฐ ๋ฐ˜์„ฑ ๋ฐ ๋ฐœ์ „์„ ์ด๋ฃฐ ์ˆ˜ ์žˆ์—ˆ๋‹ค๋Š” ์  ๋“ฑ์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

ย 

๐Ÿ”ฅ๊ทธ๋ž˜์„œ ์•ž์œผ๋กœ?

๐Ÿ˜พ
์•ž์œผ๋กœ ๋‹ฌ๋ผ์งˆ ์  ๋“ฑ์— ๋Œ€ํ•œ ๋‚ด์šฉ ๋ฐ ํšŒ๊ณ  ์ •๋ฆฌ.

์•ž์œผ๋กœ์˜ ๊ณผ์ œ ์ˆ˜ํ–‰ ๊ธฐ๊ฐ„ ๋™์•ˆ์—๋Š”, ์กฐ๊ธˆ ๋” ํด๋ฆฐํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ , ์กฐ๊ธˆ ๋” โ€˜๋‚ดโ€™๊ฐ€ ์•„๋‹Œ โ€˜๋‚จโ€™์ด ๋ณด๊ธฐ ํŽธํ•œ ์ฝ”๋“œ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ !

ย 

๋˜ํ•œ, ์ฝ”๋”ฉ ๊ณผ์ •์—์„œ ํด๋” ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐํ™”๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์ •๋ฆฌํ•˜๊ธฐ !

ย 

๋‹ค์–‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํƒ๊ตฌ ๋ฐ ์‚ฌ์šฉํ•ด๋ณผ ์˜ˆ์ • !

ย 

๋งˆ์ง€๋ง‰์œผ๋กœ, ์ฝ”๋”ฉ ๊ณผ์ • ไธญ ํ•œ๋ฒˆ์— ๋ชจ๋“  ๋‚ด์šฉ์„ Add โ†’ Commit โ†’ Push ํ•˜์ง€ ๋ง๊ธฐ!

  • ์กฐ๊ธˆ ๋” ์„ธ๋ถ„ํ™”ํ•ด์„œ, ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ ๋‹จ์œ„๋กœ ๋‚ด์šฉ์„ Commit ํ•˜๋Š” ์Šต๊ด€์„ ๊ธฐ๋ฅด๊ธฐ !!
ย 
ย 
ย 

๋ฌด์—‡๋ณด๋‹ค ์ฆ๊ธฐ๊ธฐ !

ย 
Share article