๋ชฉ๋ก๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (115)

let's get IT with DAVINA ๐Ÿ’ป

Position

Position ๋ฌธ์„œ ์ƒ์— ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ง€์ •ํ•œ๋‹ค. top, right, bottom, left ์†์„ฑ์„ ํ†ตํ•ด ์š”์†Œ์˜ ์ตœ์ข… ์œ„์น˜๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค. ์‚ฌ์šฉ๋ฒ• ๊ธฐ์ค€์„ ์žก๋Š”๋‹ค. (ex. position: relative;) ์ด๋™์‹œํ‚จ๋‹ค. (ex. top: 50px;) block : ํ•œ ์ค„ ๋ชจ๋‘ ์ฐจ์ง€ (๋Œ€ํ‘œ element - , ) inline : ์ฝ˜ํ…์ธ  ํฌ๊ธฐ ๋งŒํผ๋งŒ ์ฐจ์ง€ (๋Œ€ํ‘œ element - ) ๊ฐ’ ์˜๋ฏธ static ๊ธฐ์ค€ ์—†์Œ (๋ฐฐ์น˜ ๋ถˆ๊ฐ€๋Šฅ / ๊ธฐ๋ณธ๊ฐ’) relative ์š”์†Œ ์ž๊ธฐ ์ž์‹ ์„ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ absolute ๋ถ€๋ชจ(์กฐ์ƒ) ์š”์†Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ fixed ๋ทฐํฌํŠธ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ stickey ์Šคํฌ๋กค ์˜์—ญ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ Relative ์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜ํ•œ๋‹ค. ์š”์†Œ ์ž๊ธฐ ์ž์‹ ์˜ ์›๋ž˜ ์œ„..

DEV_IN/CSS 2023. 2. 9. 04:57
์ฐœ ๊ธฐ๋Šฅ (์œ„์‹œ๋ฆฌ์‹œํŠธ)

ํ˜ธํ…” ์นดํ…Œ๊ณ ๋ฆฌ list ํ™”๋ฉด์—์„œ ์ข‹์•„์š”๋œ ํ˜ธํ…”์ด ์ฑ„์›Œ์ง„ํ•˜ํŠธ๋กœ ํ‘œ์‹œ ํ•„์š” → BE์—์„œ isLike ์™€ ๊ฐ™์€ํ•„๋“œ๋ช…์œผ๋กœ ๊ตฌ๋ถ„ํ•ด์ค˜์•ผํ•จ ํ˜ธํ…” list ์กฐํšŒํ™”๋ฉด์—์„œ like๊ฐ€ ์ „์—ญ์œผ๋กœ ๊ด€๋ฆฌ๋˜๊ฒŒ ๋˜๋ฉด ํ˜ธํ…”๋ณ„ "์ข‹์•„์š”" ์ƒํƒœ ํ‘œ์‹œ๊ฐ€(ํ•œ๊ฐœ ๋ˆ„๋ฅด๋ฉด ์ „์ฒด ์ƒํƒœ๊ฐ€ ๋‹ค ๋ฐ”๋€Œ๊ฒŒ ๋จ) ํž˜๋“œ๋ฏ€๋กœ ๊ฐœ๋ณ„ ์ƒํƒœ๋กœ ๊ด€๋ฆฌ๊ฐ€๋Šฅํ•˜๋„๋ก ์ˆ˜์ •ํ•ด์•ผํ•˜๋Š” ์ƒํ™ฉ ์œ„์‹œ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€์—์„œ๋Š” ํ˜ธํ…” ํ•˜ํŠธ ์ฑ„์›Œ์ง„์ƒํƒœ๋กœ ํ‘œ์‹œ ๋ฉ”์ธ ํ”„๋กœ์ ํŠธ๋•Œ์˜ ์ƒํ™ฉ → BE์— isLike ๊ตฌ๋ถ„์ด ์•ˆ๋˜์–ด ์žˆ์—ˆ์œผ๋ฉฐ, → wishlist์—์„  data์ •๋ณด๋“ค์ด ์žˆ์—ˆ์Œ ⇒ ๋”ฐ๋ผ์„œ, ์ข‹์•„์š”๋ฅผ ๋ˆŒ๋ €๋Š”์ง€ ์•ˆ๋ˆŒ๋ €๋Š”์ง€๋ฅผ ํŒ๋‹จํ•˜๋Š”๊ฒƒ๋ณด๋‹ค ์œ„์‹œ๋ฆฌ์ŠคํŠธ์— ์žˆ๋Š” ํ˜ธํ…”์ด ์ „์ฒด๋ฆฌ์ŠคํŠธ์˜ ํ˜ธํ…” id๊ฐ’๊ณผ ์ผ์น˜ํ•  ๊ฒฝ์šฐ ์ข‹์•„์š”๊ฐ€ ๋˜์–ด์žˆ๋Š” ์ƒํƒœ & ์œ„์‹œ๋ฆฌ์ŠคํŠธ์— ์—†์œผ๋ฉด ์ข‹์•„์š”๊ฐ€ ์•ˆ๋˜์–ด์žˆ๋Š” ์ƒํƒœ๋กœ ๊ตฌ๋ถ„ 1. WishList data..

Project/์™œ ๊ฐ€? 2023. 2. 8. 22:03
Git VS Github

Git๊ณผ Github ์‚ฌ์šฉ๋ฒ•์„ ๋ธ”๋กœ๊น…ํ•˜๋ฉฐ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ๋ถ„๋ฅ˜ํ•˜๋Š”๋ฐ ๋ฌธ๋“ ์ด ๋‘˜์˜ ์ฐจ์ด๋ฅผ ๋ช…ํ™•ํžˆ ์•Œ๊ณ  ์žˆ๋Š”์ง€ ๊ถ๊ธˆํ•ด์กŒ๋‹ค. Git ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ๋ถ„์‚ฐํ˜• ๋ฒ„์ „ ๊ด€๋ฆฌ ์‹œ์Šคํ…œ VCS: Version Control System ์†Œ์Šค ์ฝ”๋“œ ์ˆ˜์ •์— ๋”ฐ๋ฅธ ๋ฒ„์ „์„ ๊ด€๋ฆฌํ•ด์ฃผ๋Š” ์‹œ์Šคํ…œ ๋กœ์ปฌ ์ €์žฅ์†Œ๋ฅผ ์‚ฌ์šฉ (๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž์™€ ํ˜‘์—…์˜ ๊ฐœ๋… X) Github ๋ถ„์‚ฐ ๋ฒ„์ „ ๊ด€๋ฆฌ ํˆด์ธ Git์„ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์ง€์›ํ•˜๋Š” ์›นํ˜ธ์ŠคํŒ… ์„œ๋น„์Šค ์–ธ์ œ, ์–ด๋””์„œ๋‚˜ ํ˜‘์—…์ด ๊ฐ€๋Šฅ ๋กœ์ปฌ์—์„œ ๋ฒ„์ „ ๊ด€๋ฆฌํ•œ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ํด๋ผ์šฐ๋“œ ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—…๋กœ๋“œํ•ด์„œ ๊ณต์œ  ๊ฐ€๋Šฅ Git์œผ๋กœ ๋กœ์ปฌ ์ €์žฅ์†Œ์—์„œ ์ž‘์—… -> Github์— ์—…๋กœ๋“œ & Github์— ์žˆ๋Š” ์ž‘์—…๋ฌผ์„ ๋‚ด๋ ค๋ฐ›์•„์™€์„œ ์ž‘์—… Local Repository : ๋‚ด PC์— ์ €์žฅ๋˜๋Š” ๊ฐœ์ธ ์ „..

DEV_IN/Git&Github 2023. 2. 8. 21:29
Github

โญ git ⇒ ๋ฒ„์ „ ๊ด€๋ฆฌ ํ”„๋กœ๊ทธ๋žจ repository ⇒ git์ด ํŒŒ์ผ ๊ธฐ๋กํ•ด๋‘๋Š” ์žฅ์†Œ ์›๊ฒฉ ์ €์žฅ์†Œ = ์˜จ๋ผ์ธ repository - ์ปดํ“จํ„ฐ ๊ณ ์žฅ๋‚˜๋„ ์•ˆ์‹ฌ - ํ˜‘์—…์ด ๊ฐ€๋Šฅ - ex) github ๋‚ด ์ฝ”๋“œ ์˜ฌ๋ฆด ๋•? git push //local ํ™˜๊ฒฝ์—์„œ repository ์ƒ์„ฑ git init //๊ธฐ๋ณธ๋ธŒ๋žœ์น˜ ์ด๋ฆ„์„ main์œผ๋กœ ๋ฐ”๊พธ๊ธฐ git branch -M main //๋กœ์ปฌ -> ์›๊ฒฉ์œผ๋กœ ๋ณด๋‚ด๊ธฐ git push -u ์›๊ฒฉ์ €์žฅ์†Œ์ฃผ์†Œ ์˜ฌ๋ฆด๋กœ์ปฌ๋ธŒ๋žœ์น˜๋ช… //์›๊ฒฉ์ €์žฅ์†Œ์ฃผ์†Œ ๋„˜ ๊ธธ์–ด์„œ -> ๋ณ€์ˆ˜ ๋ฌธ๋ฒ• ์‚ฌ์šฉํ•˜๊ธฐ git remote add ๋ณ€์ˆ˜๋ช… ์ฃผ์†Œ git push -u ๋ณ€์ˆ˜๋ช… ์˜ฌ๋ฆด๋กœ์ปฌ๋ธŒ๋žœ์น˜๋ช… //์œผ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ด์ง! //-u๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ทธ ์ดํ›„๋ถ€ํ„ฐ ์ฃผ์†Œ๊ฐ€ ๊ธฐ์–ต๋˜๊ธฐ ๋•Œ๋ฌธ์— git push //๋งŒ ํ•ด๋„ ์ž๋™์œผ๋กœ ๋ณด๋‚ด..

DEV_IN/Git&Github 2023. 2. 8. 21:12