profile
๐Ÿข ๐Ÿ’จ ๐Ÿ’จ
post-thumbnail

[CSS] transform

transform์€ ์š”์†Œ์— ์ด๋™(translate), ํšŒ์ „(rotate), ํ™•๋Œ€์ถ•์†Œ(scale), ๋น„ํ‹€๊ธฐ(skew) ํšจ๊ณผ๋ฅผ ๋ถ€์—ฌํ•˜๊ธฐ ์œ„ํ•œ ํ•จ์ˆ˜๋ฅผ ์ œ๊ณตํ•œ๋‹ค.transform์€ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ์œ„ํ•ด ์‚ฌ์šฉํ•˜์—ฌ์•ผ ํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ๋ถ€์—ฌํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค๋ฉด t

2023๋…„ 3์›” 21์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[CSS] animation

transition์ด ์ž๋™๋ฐœ๋™(self-invoking transition) ํ•˜๋„๋ก ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด CSS animation์„ ์‚ฌ์šฉํ•œ๋‹ค.animationํšจ๊ณผ๋Š” HTML ์š”์†Œ์— ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ์„ ๋‹ค๋ฅธ ์Šคํƒ€์ผ๋กœ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ๋ณ€ํ™”์‹œํ‚จ๋‹ค.์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋‚˜ํƒ€๋‚ด๋Š” ์Šคํƒ€์ผ๊ณผ ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ s

2023๋…„ 3์›” 21์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[CSS] transition

transition : ( property , duration , timing-function , delay )CSS ์†์„ฑ๊ฐ’์ด ๋ณ€ํ™”ํ• ๋•Œ, ์†์„ฑ๊ฐ’์˜ ๋ณ€ํ™”๊ฐ€ ์ผ์ • ์‹œ๊ฐ„(duration)์— ๊ฑธ์ณ ์ผ์–ด๋‚˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด๋‹คtransition์€ ์ƒํƒœ ๋ณ€ํ™”์— ๋™๋ฐ˜ํ•˜์—ฌ ๋ณ€๊ฒฝ๋˜๋Š” CSS

2023๋…„ 3์›” 21์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[Vue] Vue ์ปดํฌ๋„ŒํŠธ

๊ธฐ๋ณธ HTML ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ํ™•์žฅํ•˜์—ฌ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ ์บก์Šํ™”ํ•œ๋‹คView, Data, Code์˜ ์„ธํŠธ (์ปดํฌ๋„ŒํŠธ ์•ˆ์—๋Š” HTML์ฝ”๋“œ, ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•œ Javascript์ฝ”๋“œ, ๋ฐ์ดํ„ฐ๊ฐ€ ์กด์žฌํ•œ๋‹ค)๊ฒฝ์šฐ์— ๋”ฐ๋ผ ํŠน๋ณ„ํ•œ is ์†์„ฑ์œผ๋กœ ํ™•์žฅ 'UI ๋ฉ์–ด๋ฆฌ'๋ผ๊ณ  ์ƒ๊ฐํ•˜๊ธฐ (

2023๋…„ 3์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[Vue] ํผ ์ž…๋ ฅ ๋ฐ”์ธ๋”ฉ

v-model ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ž…๋ ฅ ํผ input๊ณผ textarea ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ๋กœ ๋ฐ”์ธ๋”ฉํ•  ์ˆ˜ ์žˆ๋‹ค.v-model์€ ๋‚ด๋ถ€์ ์œผ๋กœ ์„œ๋กœ ๋‹ค๋ฅธ ์†์„ฑ๊ณผ ์„œ๋กœ ๋‹ค๋ฅธ ์ด๋ฒคํŠธ๋ฅผ ์ „์†กํ•œ๋‹ค. text์™€ textarea ํƒœ๊ทธ๋Š” value ์†์„ฑ๊ณผ input ์ด๋ฒคํŠธ๋ฅผ ์‚ฌ์šฉ

2023๋…„ 3์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[Vue] ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง

๋ฉ”์„œ๋“œ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ์ด๋ฒคํŠธ ์ˆ˜์‹์–ด

2023๋…„ 3์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[Vue] ๋ฆฌ์ŠคํŠธ ๋ Œ๋”๋ง - ๊ฐ์ฒด

๋•Œ๋กœ๋Š” Object.assign()์ด๋‚˜ \_.extend()๋ฅผ ์‚ฌ์šฉํ•ด ๊ธฐ์กด์˜ ๊ฐ์ฒด์— ์ƒˆ ์†์„ฑ์„ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๊ฒฝ์šฐ ๋‘ ๊ฐ์ฒด์˜ ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ์ƒˆ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค.Vue.set(object, propertyName, value) ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ค‘์ฒฉ๋œ ๊ฐ์ฒด์—

2023๋…„ 3์›” 14์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[Vue] ๋ฆฌ์ŠคํŠธ๋ Œ๋”๋ง - ๋ฐฐ์—ด

Vue๋Š” ๊ฐ์‹œ์ค‘์ธ ๋ฐฐ์—ด์˜ ๋ณ€์ด ๋ฉ”์†Œ๋“œ๋ฅผ ๋ž˜ํ•‘ํ•˜์—ฌ ๋ทฐ ๊ฐฑ์‹ ์„ ํŠธ๋ฆฌ๊ฑฐํ•œ๋‹ค๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด 4๋ฒˆ์งธ ์ธ๋ฑ์Šค๊ฐ€ ์ถ”๊ฐ€๋˜๋„๋ก push๋ฉ”์„œ๋“œ ์ƒ์„ฑ๋ฐฐ์—ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐฑ์‹ ํ•˜๊ฑฐ๋‚˜ ์‚ญ์ œํ• ๋•Œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ณ€์ด ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹คpush() ๋ฐฐ์—ด์˜ ๊ฐ€์žฅ ๋’ค์— ์ƒˆ๋กœ์šด ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ๋Š” ๋ฉ”์„œ๋“œpo

2023๋…„ 3์›” 14์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[Vue] ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง

v-if , v-else , v-if-elsev-if๋Š” ํ† ๊ธ€๋น„์šฉ์ด ๋†’๋‹ค์‹ค์งˆ์ ์œผ๋กœ ์š”์†Œ๋ฅผ ์—†์• ๋ฒ„๋ฆฐ๋‹ค์ดˆ๊ธฐ ๋ Œ๋”๋ง ๋น„์šฉ์ด ๋†’๋‹คCSS๋กœ display: none; ์„ ์ ์šฉ์‹œ์ผœ ์š”์†Œ๋ฅผ ์—†์• ์ง€ ์•Š๊ณ  ์š”์†Œ๊ฐ€ ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค

2023๋…„ 3์›” 10์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[Vue] computed

consolevm.todos.push({id: 4, done: false, title:'์•ผ์‹๋จน๊ธฐ'})์•ผ์‹๋จน๊ธฐ ์ถ”๊ฐ€

2023๋…„ 3์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[Vue] ํ…œํ”Œ๋ฆฟ ๋ฌธ๋ฒ•

v-bind: = :v-on: = @

2023๋…„ 3์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[Vue] ๋ผ์ดํ”„ ์‚ฌ์ดํด

created , mounted ์ค‘์š”destroy ํ• ๋•Œvm.$destroy()

2023๋…„ 3์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[CSS] ์œ„์•„๋ž˜ ๋ถ„๋ฆฌ ๋„ค๋น„๊ฒŒ์ด์…˜ ํ˜ธ๋ฒ„ ์ดํŽ™ํŠธ

๊ฐ€๋กœ๋ฐฐ์น˜ํ•  item๋“ค .item { display: inline-block; }transition ์‹œ์ž‘ํ• ๋•Œ ์†์„ฑ ๊ฐ’์ด ์—†์œผ๋ฉด ์•ˆ๋จนํž˜

2023๋…„ 3์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[CSS] hover ํ๋ ค์ง€๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜

2023๋…„ 3์›” 7์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[CSS] ๋งˆ์šฐ์Šค ์˜ค๋ฒ„ ํˆดํŒ ๋งŒ๋“ค๊ธฐ

2023๋…„ 3์›” 7์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[CSS] hoverํ™œ์šฉ ์ƒ์„ธ์„ค๋ช… ์ƒํ’ˆ๋ชฉ๋ก

2023๋…„ 3์›” 7์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[HTML]container์•ˆ์— ํƒœ๊ทธ ๊ตฌ๋ถ„์œผ๋กœ ๋ถˆํ•„์š”ํ•œ class๋ช… ์ค„์ด๊ธฐ

์œ„ ์ฝ”๋“œ๋ฅผ ์ด๋Ÿฐ ์‹์œผ๋กœ ์ž‘์„ฑํ•  ๊ฒฝ์šฐ, ์–ด๋–ค ๋ชจ์–‘๊ณผ ์—ญํ• ์˜ ํƒœ๊ทธ์ธ์ง€ ์˜๋ฏธ ํŒŒ์•…์€ ๋˜์ง€๋งŒ.square(container) ์•ˆ์— ์—ฌ๋Ÿฌ div ํƒœ๊ทธ๊ฐ€ ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— CSS ์ž‘์„ฑ ์‹œ ๋‹ค์†Œ ๋ณต์žกํ•˜๊ณ  ํ˜ผ๋ˆ์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.์„ ์œผ๋กœ ๋งŒ๋“ค์–ด์งˆ(border์Šคํƒ€์ผ์„ ์ ์šฉํ•ด์ค„) ํƒœ๊ทธ๋“ค์„ sp

2023๋…„ 2์›” 22์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[CSS] CSS ์šฐ์„ ์ˆœ์œ„

์†์„ฑ ๊ฐ’ ๋’ค์— !import๋ฅผ ๋ถ™์ธ ์†์„ฑ ์ ์ˆ˜ โ™พpt์ธ๋ผ์ธ ์„ ์–ธ๋ฐฉ์‹ = HTML์—์„œ style์„ ์ง์ ‘ ์ง€์ •ํ•œ ์†์„ฑ ์ ์ˆ˜ 1000ptid ์„ ํƒ์ž, ์ ์ˆ˜ 100ptํด๋ž˜์Šค ์„ ํƒ์ž, .class, :์ถ”์ƒํด๋ž˜์Šค ๋กœ ์ง€์ •ํ•œ ์†์„ฑ ์ ์ˆ˜ 10ptํƒœ๊ทธ ์ด๋ฆ„์œผ๋กœ ์ง€์ •ํ•œ ์†์„ฑ ์ ์ˆ˜ 1pt

2023๋…„ 2์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[CSS] float clearํ•˜๋Š” ๋ฐฉ๋ฒ•

๋œจ๋‹ค ๋ผ๋Š” ์˜๋ฏธ์ด๋ฉฐ, block์š”์†Œ๋ฅผ ์ง€์ •ํ•œ ์œ„์น˜์— ๋– ์žˆ๋„๋ก ๋ฐฐ์น˜ํ•˜๋Š” ์†์„ฑ์ด๋‹คfloat์œผ๋กœ ์ปจํ…์ธ ๋ฅผ ๋„์šธ ์‹œ ๋‹ค์Œ ๋‚ด์šฉ์€ ๋นˆ์ž๋ฆฌ๋ฅผ ์ฑ„์šฐ๋ ค ์˜ฌ๋ผ์˜ค๊ฒŒ ๋œ๋‹ค.์ด๋Ÿฌํ•œ ํ˜„์ƒ์€ ๋ธŒ๋ผ์šฐ์ €์˜ ์˜ค๋ฅ˜๋กœ ์ƒ๊ฒจ๋‚œ ๊ฒƒ์ด๊ณ ,float์˜ ๋ถ€์ž‘์šฉ์„ ํ•ด์ œํ•œ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.๋ถ€๋ชจ ์š”์†Œ์— ๋†’์ด๊ฐ’(heigh

2023๋…„ 2์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[JS] ํด๋ž˜์Šค์™€ ์ƒ์„ฑ์ž ํ•จ์ˆ˜

class ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •์˜ํ•œ๋‹คํด๋ž˜์Šค๋ฅผ ํ‘œํ˜„์‹์œผ๋กœ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค = ํด๋ž˜์Šค๊ฐ€ ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค = ์ผ๊ธ‰๊ฐ์ฒด๋ฌด๋ช…์˜ ๋ฆฌํ„ฐ๋Ÿด๋กœ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, ๋Ÿฐํƒ€์ž„์— ์ƒ์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋ณ€์ˆ˜๋‚˜ ์ž๋ฃŒ๊ตฌ์กฐ(๊ฐ์ฒด, ๋ฐฐ์—ด ๋“ฑ)์— ์ €์žฅํ•  ์ˆ˜ ์žˆ๋‹คํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์—๊ฒŒ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹คํ•จ์ˆ˜

2023๋…„ 2์›” 6์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท