Welcome to Visit!!
Let's get it
์น ๊ฐ๋ฐ์๋ก์ ์๋ก์ด ์ฌ์ ์ ์์ํด ๋ณด๊ฒ ์ต๋๋ค.
์ฌ๋ฌ๋ถ๋ค์ ๋ฐฉ๋ฌธ์
์ง์ฌ์ผ๋ก ํ์ํฉ๋๋ค
์น ๊ฐ๋ฐ์๋ก์, ๋ค์ํ ๊ฐ๋ฐ ์ง์์ ๋ค๋ฃจ๋
๋ธ๋ก๊ทธ๋ฅผ ๋ง๋ค์ด๋ณด๊ฒ ์ต๋๋ค. ๐
์ถ์ฒ ์นดํ ๊ณ ๋ฆฌ ๐
๋ธ๋ก๊ทธ์ ์๋ ์นดํ ๊ณ ๋ฆฌ๋ฅผ ์ฝ๊ฒ ์ฐพ์๋ณด์ธ์
์ฐธ๊ณ ํ๋ ์น์ฌ์ดํธ ๋ชฉ๋ก ๐ป
ํ์๊ฐ ์์ฃผ ์ฐธ๊ณ ํ๋ ์น์ฌ์ดํธ๋ฅผ ๋๋ฌ๋ณด์ธ์.
CSS ์คํ์ผ๋ง ๐จ
์น ๊ฐ๋ฐ์ ํ ๋ ์ฌ์ฉํ๋ CSS ์ฌ์ฉ๋ฐฉ๋ฒ์ ํ์ธํด๋ณด์ธ์.
๋ชฉ์ฐจ CSS๋ HTML ํ๊ทธ๋ฅผ ๊พธ๋ฏธ๊ฑฐ๋ ํจ๊ณผ๋ฅผ ๋ฃ์ด ์ฃผ๋ ๋ฑ, ๋์์ธ ์์๋ฅผ ์ถ๊ฐํ ๋ ์ฌ์ฉํ๋ ์ ์ฒ๋ฆฌ ๊ณผ์ ์ ์๋ฏธํ๋ค. ํ๋ก์ ํธ์ ๊ท๋ชจ๊ฐ ์ปค์ง๊ณ ๋ฐ์ํ ์น์ ๊ตฌํํ ๋ CSS๋ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๊ณ ์ ์ง๋ณด์๊ฐ ์ด๋ ต๋ค๋ ๋จ์ ์ด ์๋ค. ํ์ง๋ง SCSS๋ CSS์ ๋ฌ๋ฆฌ ์ฝ๋์ ์ฌํ์ฉ์ฑ์ ๋์ด๊ณ , ๊ฐ๋ ์ฑ์ ์ฌ๋ ค ์ฃผ๊ธฐ ๋๋ฌธ์ ์ ์ฉํ๋ค. ํนํ ๋ณ์๋ฅผ ํ์ฉํ์ฌ ์ฝ๋๋ฅผ ์์ฑํ ์ ์๋๋ก ์ง์ํ๊ธฐ ๋๋ฌธ์ ์ฝ๋์ ๊ฐ๋ ์ฑ์ ๋์ฌ์ฃผ๊ณ ๋ฐ์ํ ์น ์์ฑ์ ๋ ์์ํ๊ฒ ๋ง๋ค ์ ์๋ค. ๊ทธ๋ผ SCSS๋ฅผ ์ด์ฉํ์ฌ ๋ฐ์ํ ์น์ ๊ฐ๋ฐํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์. SCSS๋ฅผ ์ด์ฉํ ๋ฐ์ํ ์น ๊ฐ๋ฐ. SCSS์์ ๋ฐ์ํ ์ฌ์ด์ฆ ์ฌ์ฉ๋ฒ. ์ฐ์ SCSS์์ ๋ณ์๋ฅผ ์ค์ ํ๊ณ @mixin์ ์ฌ์ฉํ์ฌ ๋ฐ๊ณผ ๊ฐ์ด ์์ฑํ๋ค. SCSS $pc2000: 2000px..
๋ชฉ์ฐจ ๋ฐ๋ก ์ ํฌ์คํ ์์ ํ ์คํธ์ ๊ทธ๋ผ๋ฐ์ด์ ์ ์ ์ฉํ๋ ๋ฒ์ ๋ํด ์์๋ณด์๋ค. ๊ทธ๋ ๋ค๋ฉด ์ด๋ฒ์๋ border์ ๊ทธ๋ผ๋ฐ์ด์ ์ ์ ์ฉํ๋ ๋ฒ์ ๋ํด์ ํฌ์คํ ํด๋ณด๊ฒ ๋ค. ์์ ํ์ผ ์์ฑํ๊ธฐ 1. Index.html ์์ index.html์ body ๋ถ๋ถ ์์ ๋ฐ์ ์ฝ๋๋ฅผ ์์ฑํ๋ค. HTML 2. Style.css ์์ฑ. ์ฐ์ HTML์ CSS๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์ถ๊ฐํ์ฌ ๋ฐ์ค๋ค์ ์ ์ค์์ ์์น์ํจ๋ค. CSS html { display: flex; align-items: center; justify-content: center; height: 100vh; } ์ดํ .box1 ๋ถ๋ถ์ ๋ค์๊ณผ ๊ฐ์ด CSS๋ฅผ ์์ฑํ๋ค. CSS .box1 { width: 200px; height: 200px; border: 5px solid..
๋ชฉ์ฐจ ์น ๊ฐ๋ฐ์ ํ๋ค๋ณด๋ฉด, ๋์์ธ์ ์ธ ์ธก๋ฉด์์ ๋ง์ค์(...)์ ์ฌ์ฉํด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค. ์๋ํ๋ฉด ์ด๋ ๊ฒ ๋ง์ค์ํ๋ฅผ ์ฌ์ฉํด์ผ ๋์์ธ์ด ๋ ๊น๋ํด ๋ณด์ด๊ธฐ ๋๋ฌธ์ด๋ค. ๋ง์ค์ CSS ๋ฌธ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค. CSS overflow: hidden; : ๋ฐ์ค์์ ๋์ณ๋ ํ ์คํธ ์จ๊ธฐ๊ธฐ white-space: nowrap; : ์ค๋ฐ๊ฟ์ด ์์ด์ง text-overflow: ellipsis; : ... ๋ง์ค์ ํจ๊ณผ -webkit-line-clamp : '๊ธ์'; : '๊ธ์'์ ์ต๋ ๋ผ์ธ์๋ฅผ ๊ฒฐ์ -webkit-box-orient: vertical; : ์์ญ ๋ฐ์ค์ ๋ด์ ์ ๋ ฌ์ ์์ง์ผ๋ก ๋ง๋ ๋ค. word-break: break-all; : ์ด์ ์ด ์ ์ง๋์ง ์๊ณ ๋์ด์ ธ์ ์ค๋ฐ๊ฟ ๋จ 1. ํ์ค๋ง ๋ํ๋ด๊ธฐ ๊ฒฐ๊ณผ) Lorem, i..
๋ชฉ์ฐจ ์น ๊ฐ๋ฐ์ ํ๋ค๋ณด๋ฉด ๊ฐ๋์ ์ฌ์ฉํ๋ ํ ์คํธ์ ๊ทธ๋ผ๋ฐ์ด์ ํจ๊ณผ๋ฅผ ๋ฃ๋ ๊ฒ์ด ํท๊ฐ๋ฆด ๋๊ฐ ์์ด์ ์ง๊ธ ์์ฑํด๋ณด๊ณ ์ ํ๋ค. ์ฐ์ ํ ์คํธ์ ์ ์ฉ๋๋ ๊ทธ๋ผ๋์ธํธ ์์ฑ์ ๋ค์๊ณผ ๊ฐ๋ค. CSS # ์ด ์์ฑ์ ๊ทธ๋ผ๋ฐ์ด์ ์ ๋ฃ์ด์ฃผ๋ ์์ฑ์ด๋ค. background: linear-gradient(๋ฐฉํฅ, #์์ ์ฝ๋, #์์ ์ฝ๋, #์์ ์ฝ๋,... , #์์ ์ฝ๋); # ์ด ์์ฑ์ ์์์ ๋ฐฐ๊ฒฝ์ด ์ด๋๊น์ง ์์ ์ฑ์ธ์ง ์ ํ๋ ์์ฑ์ด๋ค. -webkit-background-clip: text; # ํ ์คํธ ๋ฌธ์์ ์ฑ์ฐ๊ธฐ ์์ ์ง์ ํ๋ ์์ฑ์ผ๋ก, ์ด ์์ฑ์ด ์ง์ ๋์ง ์๋๋ค๋ฉด color์ ์์์ ๋ฐ๋ผ๊ฐ๋ค. -webkit-text-fill-color: transparent; ๊ทธ๋ผ, ์ด ๋ด์ฉ์ ๋ฐํ์ผ๋ก ํ ์คํธ์ ๊ทธ๋ผ๋ฐ์ด์ ์ ์ ์ฉํ..
Guest Book
๋ธ๋ก๊ทธ๋ฅผ ๋ฐฉ๋ฌธํด์ฃผ์
์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
์์ ๋กญ๊ฒ ๋๊ธ ๋ฌ์์ฃผ์ธ์ ~
Tag Page
์ํ์๋ ํ๊ทธ๋ฅผ ํด๋ฆญํด๋ณด์ธ์.
Light Dev
Light Dev์์ ๊ณต๋ถํ ๋ด์ฉ์ ์ ๋ฆฌํฉ๋๋ค.
[Npm] ๐ Npm vs Yarn ๋ช ๋ น์ด ๋น๊ต ๋ณธ๋ฌธ
๋ชฉ์ฐจ
Npm, Yarn ๋น๊ต.
๐ฏ Npm (Node Package Manager)
- ๋ ธ๋ ํจํค์ง ๋งค๋์
- ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ ์ํ ํจํค์ง ๊ด๋ฆฌ์
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์ ํ๊ฒฝ node.js์ ๊ธฐ๋ณธ ํจํค์ง ๊ด๋ฆฌ์
๐ฏ Yarn ์ ์ฅ์
- ๋ค์ด๋ก๋ํ ํจํค์ง ์บ์
- ์ด์ ๋ณ๋ ฌํ ๋ฆฌ์์ค ํ์ฉ ๊ทน๋ํ๋ก ์ค์น ์๊ฐ ๋จ์ถ
- ์ฝ๋ ์คํ์ ์ค์น๋ ํจํค์ง ๋ฌด๊ฒฐ์ฑ ํ์ธ
- ์ด์ ์ ํจํค์ง ์ค์นํ ๊ฒฝ์ฐ ์คํ๋ผ์ธ์ผ๋ก ์ฌ์ค์น
๋ช ๋ น์ด ๋ชจ์
Npm ๋ช ๋ น์ด ๋ชจ์
๋งํฌ ํ์ด์ง๋ฅผ ์ฐธ๊ณ ํ์ฌ ์์ฑํ์์ต๋๋ค.
# package.json์ ๋ชจ๋ ์ค์น
npm install
npm i
# ์์กด์ฑ์ผ๋ก ์ถ๊ฐ
npm install {module_name} --save
# ๊ฐ๋ฐ ์์กด์ฑ์ผ๋ก ์ถ๊ฐ
npm install {module_name} --save-dev
npm install {module_name} -D
# ์ ์ญ์ผ๋ก ์ถ๊ฐ
npm install {module_name} --global
npm install {module_name} -g
# ์
๋ฐ์ดํธ
npm update --save
# ๋ชจ๋ ์ญ์
npm uninstall {module_name} --save
npm uni
# ์บ์ ์ญ์
npm cache clean
# ์ค์น๋ ๋ชจ๋ ๋ฒ์ ํ์ธ
npm outdated
# ํน์ ๋ฒ์ ๋ชจ๋ ์ค์น
npm install {module_name}@{version}
Yarn ๋ช ๋ น์ด ๋ชจ์
๋งํฌ ํ์ด์ง๋ฅผ ์ฐธ๊ณ ํ์ฌ ์์ฑํ์์ต๋๋ค.
# package.json์ ๋ชจ๋ ์ค์น
yarn
# ์์กด์ฑ์ผ๋ก ์ถ๊ฐ
yarn add {module_name}
# ๊ฐ๋ฐ ์์กด์ฑ์ผ๋ก ์ถ๊ฐ
yarn add {module_name} --dev
yarn add {module_name} -D
# ์ ์ญ์ผ๋ก ์ถ๊ฐ
yarn global add {module_name}
# ์
๋ฐ์ดํธ
yarn upgrade
# ๋ชจ๋ ์ญ์
yarn remove {module_name}
# ์บ์ ์ญ์
yarn cache clean
# ์ค์น๋ ๋ชจ๋ ๋ฒ์ ํ์ธ
yarn outdated
# ํน์ ๋ฒ์ ๋ชจ๋ ์ค์น
yarn add {module_name}@{module_version}
Npm & Yarn ๋น๊ต
Npm
๊ณผ Yarn
๋ช
๋ น์ด๋ฅผ ๋น๊ตํ์ฌ ์์ฑํ์์ต๋๋ค.
# package.json์ ๋ชจ๋ ์ค์น
npm install
yarn
# ์์กด์ฑ์ผ๋ก ์ถ๊ฐ
npm install {module_name} --save
yarn add {module_name}
# ๊ฐ๋ฐ ์์กด์ฑ์ผ๋ก ์ถ๊ฐ
npm install {module_name} --save-dev
yarn add {module_name} --dev
# ์ ์ญ์ผ๋ก ์ถ๊ฐ
npm install {module_name} --global
yarn global add {module_name}
# ์
๋ฐ์ดํธ
npm update --save
yarn upgrade
# ๋ชจ๋ ์ญ์
npm uninstall {module_name} --save
yarn remove {module_name}
# ์บ์ ์ญ์
npm cache clean
yarn cache clean
# ์ค์น๋ ๋ชจ๋ ๋ฒ์ ํ์ธ
npm outdated
yarn outdated
# ํน์ ๋ฒ์ ๋ชจ๋ ์ค์น
npm install {module_name}@{module_version}
yarn add {module_name}@{module_version}
์ด ๊ธ์ด ์ข์ผ์ จ๋ค๋ฉด ๊ตฌ๋ & ์ข์์
์ฌ๋ฌ๋ถ์ ๊ตฌ๋
๊ณผ ์ข์์๋
์ ์์๊ฒ ํฐ ํ์ด ๋ฉ๋๋ค.
์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค
๋ง์ผ ๋์์ด ๋์
จ์ผ๋ฉด ๊ณต๊ฐ๊ณผ ๊ตฌ๋
๋ฒํผ ํด๋ฆญ ๋ถํ๋๋ฆฝ๋๋ค.
์ถ๊ฐ์ ์ธ ์ง๋ฌธ์ฌํญ์ด๋ ์ดํด๊ฐ ์๋๋ ์ ์ด ์์ผ๋ฉด ๋๊ธ๋ก ์ ์ด์ฃผ์ธ์.
ยฉ Copyright 2023 Light