์ถ์ฒ. 41์ธ.progrmming๋์ .๊ณ ๋ ํจ.์์.์ข์ .๋์
Posts
Q&A
6๋ถ40์ด - width์ max-width๋ฅผ ๊ฐ์ด ์ฐ๋ ๊ฒฝ์ฐ
์ด์ ์ดํด๊ฐ ๋ฉ๋๋ค ์ ์๋! flex๋ฅผ ์ฌ์ฉํ๋ฉด ํญ์ ๊ฐ์ ์ฑ์ด ๋จ์ด์ ธ์ ์ผ์ ํ ๋๋น๋ฅผ ์ค์ ํ๊ณ ์ถ์ผ๋ฉด width๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์์ ํ๋ค๋ ๊ฒ์ผ๋ก ์ดํด๋ฅผ ํ๊ณ width๋ฅผ ์ค์ ํ๋ฉด ๊ณ ์ ์ด ๋์ด์ผ ๋๋ ์ค๋ก ์์์ต๋๋ค.์ฌ๊ธฐ์ ๊ฐ๋ ํผ๋์ด ์๋๊ฒ ๊ฐ๋ค์. ๋ต๋ณ ๊ฐ์ฌํฉ๋๋ค!!
- 0
- 2
- 510
Q&A
browser์ฐฝ ์ฐฝํฌ๊ธฐ ์กฐ์ ํ ๋ ๋ฐ์ํํ๋ฉด ์ง๋ฌธ์ ๋๋ค.
์ด์์ฒด์ ๋๋ฌธ์ ๊ทธ๋ฐ๊ฐ ๋ณด๋ด์ใ ์ ์๋ ๊ฐ์ฌํฉ๋๋ค!!
- 0
- 2
- 384
Q&A
run๊ณผ ๊ด๋ จ๋์ด ์ถ๊ฐ ์ง๋ฌธ์์ต๋๋ค.
์ด ๋ถ๋ถ์ ๊ฐ์ฒด๊ฐ์ ํํธ๋ฅผ ์์ธํ ๋ณด์๋ฉด ์ดํด๊ฐ ๊ฐ ๊ฒ๋๋ค.
- 0
- 3
- 367
Q&A
์ ์๋ css์ display: inline-flex๊ด๋ จ ์ง๋ฌธ์ ๋๋ค.
inline์์ฑ์ ํด๋น ๋ด์ฉ๋งํผ๋ง์ ๊ณต๊ฐ์ ์ฐจ์งํ๋๋ฐ container์ inline-flex์์ฑ์ ์ ์ฉํ๋ฉด container๊ฐ ์ฐจ์งํ๋ ๊ณต๊ฐ๋งํผ๋ง flex๊ฐ ์ ์ฉ๋๊ณ ๋จ์ ๊ณต๊ฐ์ด ์์ผ๋ฉด ๋ค์ ์์๊ฐ inline์์ฑ์ ์ํด ๋๋ํ ๋ฐฐ์น๊ฐ ๋ ์๊ฐ ์๋๊ฑฐ๊ตฐ์. ์ด์ ์ดํด๊ฐ ๋ฉ๋๋ค ์ ์๋!๊ฐ์ฒด4๊ฐ์์์ card instance๋ฅผ ๋ง๋ค๋ 'container๊ฐ ์๋๋ถ๋ถ'์์ ์ดํด๊ฐ ๋์ง ์์์์ต๋๋ค. Card.prototype = { constructor: Card, init: function() { const mainElem = document.createElement('div'); .............. mainElem.classList.add('card'); .................... } }์ฌ๊ธฐ์ ๊ฐ ์นด๋๋ง๋ค card class๋ฅผ ์ถ๊ฐํด์คฌ๋๋ฐcard class์์ฑ์ผ๋ก.card {display: inline-flex} ๋ฅผ ์ค ๊ฒ์ด๋๊ฐ card๋ง๋ค inline-flex์ ์์ฑ์ ์ค๋ค๋ ๊ฒ์ด ์ดํด๊ฐ ๋์ง ์์๋ ๊ฒ์ ๋๋ค.์ฆ, ์ด?? container์ญํ ์ ํ๋๊ฒ ์๋๋ฐ?? ์ฌ๊ธฐ์ ํท๊ฐ๋ฆฌ๊ฒ ๋ ๊ฒ์ ๋๋ค.์์ผ๋ก ์ข ๋ ๋ง์ ์ฐ๊ตฌ ํด๋ณด๊ฒ ์ต๋๋ค. ๊ฐ์๋ ์ฌ๋ฐ๊ฒ ์ ๋ฐ๋ผ๊ฐ๊ณ ์๋๋ฐ ๊ธฐ์ด๋ถ์กฑ ํ์์ผ๋ก ๊ณ๋ค๋ฆฌ์ ๋ด์ฉ๋ค์ด ์๊พธ ํท๊ฐ๋ฆฝ๋๋ค.์ ์๋ ๋ต๋ณ ๊ฐ์ฌํฉ๋๋ค!!
- 0
- 2
- 1.1K
Q&A
์ ์๋ 3๊ฐ์ ๋ฌธ2 10:50 ์ง๋ฌธ์ ๋๋ค(perspective)
ํ~~ ์ ์๋ ์ดํด๊ฐ ํ ๋์์ต๋๋ค!! ๊ฐ์ฌํฉ๋๋ค!!
- 2
- 2
- 281
Q&A
์ ์๋ position ๊ด๋ จ ์ง๋ฌธ์ ๋๋ค.
์ ์๋ ๋ต๋ณ ๊ฐ์ฌํฉ๋๋ค.์ ๊ทธ๋ฆฌ๊ณ ๋ณํ 5๊ฐ๋ก ์์ ํ์ต๋๋ค!! ์ด์ ์ปดํฐํค๊ณ ๋ค์ ์ดํด๋ดค๋๋ฐ ์ด์ ๋ ์๋ฌด๋ฆฌ ์ฐพ์๋ ์๊ฐํ์ ์ด๋์ ๋ณผ ์ ์๋์ง ๋ชป ์ฐพ์๋๋ฐ ์ค๋ ๋ฑ ์ฐพ์์ต๋๋ค!!
- 0
- 5
- 317
Q&A
์ ์๋ position ๊ด๋ จ ์ง๋ฌธ์ ๋๋ค.
์ ์๋์ background-image๊ด๋ จ ๋ต๋ณ์ ๋ฃ๊ณ ๊ณฐ๊ณฐํ ์๊ฐํด๋ณด๊ณ ์ด ๋ต๋ณ์ ๋ณด๋ ์ดํด๊ฐ ์ข ๋ฉ๋๋ค. background-position: 50% 50%๋ ".ilbuni" element์ background image๋ฅผ ๊ฐ์ด๋ฐ ์์นํ๋๋ก!!์ด background๋ผ๋ ๋จ์ด๋ฅผ ๋จ์ํ ๋ฐฐ๊ฒฝ์ผ๋ก ์๊ฐํ๋๋ฐ ๊ทธ๊ฒ ์ด๋ค ๋ฐฐ๊ฒฝ์ ๋ปํ๋๊ฐ์ ๋ถ๋ถ์ด ์ ๊ฐ ์ดํด๋ชปํ๋ ํต์ฌ์ธ ๊ฒ ๊ฐ์ต๋๋ค.๋ํ background-position: 50% 50%๋ฅผ ์ฃผ์์ฒ๋ฆฌํด๋ดค๋๋ฐ๋ ๋ฌด์จ์ฐจ์ด๊ฐ ์๋์ง ๋์ ํ ์ ์๊ฐ ์๋๋ผ๊ตฌ์. ๊ทธ๋ฌ๋ค๋ณด๋ ๋์ฑ ์ด๋ ค์ ๋ ๊ฒ ๊ฐ์ต๋๋ค.๋ต๋ณํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค!!
- 0
- 5
- 317
Q&A
์ ์๋ css background์ ๋ํ ์ง๋ฌธ์ ๋๋ค.
์ ์๋ ๋ต๋ณ ๊ฐ์ฌํฉ๋๋ค. ์ ๋ background๋ ๋ ธ๋์ ๋ฐฐ๊ฒฝ์ธ๋ฐ ์ image๋ฅผ ๋ฃ์ผ๋ฉด์ ๊ทธ๊ฒ background๊ฐ ๋๋๊ฐํ๊ณ ์๊ฐํ์ด์. css๋ก image๋ฅผ controlํ๋ฉด ์ฅ์ ์ด ์๋ค๋ก ์ดํดํ๊ณ ์ข ๋ ๊ณต๋ถ๋ฅผ ์ด์ฌํ ํด๋ด์ผ ๊ฒ ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ ์๋ ๊ฐ์ ๋๋ถ์ ์ ๋ง ์ฌ๋ฐ๊ฒ ๊ณต๋ถ ์ ํ๊ณ ์๋๋ฐ ์ ๊ฐ ๋ณ์ ์ ์ ๊ทธ๋ ๊ฒ ํ๋์ง ๋๋ฌด์ง ๊ธฐ์ต์ด ๋์ง ์์ต๋๋คใ ์ง๊ธ๋ ๋ณ 100๊ฐ ๋๋ฆฌ๋ ค๊ณ ํ์ฐธ์ ์ฐพ์๋ดค๋๋ฐ ์ด๋์ ์ ๊ฐ ๊ทธ ์ง์ ํ ๊ฒ์ธ์ง ๋์ ํ ๋ชป ์ฐพ๊ฒ ์ด์ ์ฃ์กํฉ๋๋ค
- 0
- 3
- 249