์ธํŒŒ

You Can Become A

๋Šฆ๊ฒŒ ์‹œ์ž‘ํ•ด๋„ ๋ˆ„๊ตฌ๋“ ์ง€ ๋…ธ๋ ฅํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ ์ˆ˜ ์žˆ์–ด์š” !

CSS

๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค
CSS

๐ŸŒŸ first-child / first-of-type ์†์„ฑ ์ฐจ์ด์ 

first-child ์™€ first-of-type ์ฐจ์ด์  first-child ์™€ first-of-type์€ ๋˜‘๊ฐ™์ด ์ž์‹ ํ˜•์ œ ์š”์†Œ ๊ณ ๋ฅด๋Š”๊ฒƒ๊ฐ™์€๋ฐ ๋ฌด์—‡์ด ๋‹ค๋ฅผ๊นŒ? ํ•œ๋ฐฉ์— ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๊ฐ„๋‹จ๋ช…๋ฃŒํ•˜๊ฒŒ ์„ค๋ช…ํ•˜๋ฉด ์ด๋ ‡๋‹ค. div > p:first-child 'div ํ•˜์œ„์˜ p ์š”์†Œ ์ค‘ ์ฒซ๋ฒˆ์งธ ์š”์†Œ' ๋กœ ์ฝ๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ 'div ํ•˜์œ„์˜ ์ฒซ๋ฒˆ์งธ ์ž์‹์ธ ์š”์†Œ๊ฐ€ p ์š”์†Œ' ์ด๋ฉด์ด๋‹ค. ์ฆ‰, div์˜ ์ž์† ์š”์†Œ์ค‘์— first-child๋ฅผ ๊ณ ๋ฅด๋Š”๋ฐ ๊ทธ๊ฒŒ p์ด๋ฉด ์Šคํƒ€์ผ์„ ์ ์šฉํ•œ๋‹ค. ๋งŒ์ผ p๊ฐ€ ์—†๋‹ค๋ฉด ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค. 'div first-child is p' ๋ผ๊ณ  ์˜์–ด ๋ฌธ์žฅ์œผ๋กœ ์ดํ•ดํ•˜๋ฉด ๋œ๋‹ค. .parent > span:first-child { background: lightgreen; } .parent2 > p:fi..

category_image
์ธํŒŒ_
2023.04.20
1
CSS

๐ŸŒŸ @media๋Š” ์ด์ œ ๊ทธ๋งŒ ! ์ตœ์‹  @container ์‚ฌ์šฉ๋ฒ•

์ปจํ…Œ์ด๋„ˆ ์ฟผ๋ฆฌ vs ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์ปจํ…Œ์ด๋„ˆ ์ฟผ๋ฆฌ๋Š” ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ์™€ ๊ฐ™์ด ๋ฌธ์„œ์˜ ์Šคํƒ€์ผ์„ ๋ฐ˜์‘ํ˜•์œผ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋‘˜์˜ ์ž‘๋™ ๋ฐฉ์‹์€ ์œ ์‚ฌํ•˜์ง€๋งŒ, ์ฐจ์ด์ ์€ ์–ด๋Š ๊ฒƒ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋™์ž‘๋˜๋ƒ๋Š” ์ ์ด๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋Š” ๋””๋ฐ”์ด์Šค ๋˜๋Š” ๋ฏธ๋””์–ด ์œ ํ˜•์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ทฐํฌํŠธ์— ์˜ํ•ด ๋ฐ˜์‘ํ•˜์ง€๋งŒ, ์ปจํ…Œ์ด๋„ˆ ์ฟผ๋ฆฌ๋Š” ํŽ˜์ด์ง€๋‚ด์˜ ํŠน์ • ์ปดํฌ๋„ŒํŠธ ์š”์†Œ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ฐ˜์‘ํ•œ๋‹ค. ์•„๋ž˜ ๊ทธ๋ฆผ์„ ๋ณด๋ฉด ์ดํ•ด๊ฐ€ ๋ ํ…๋ฐ, ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋Š” ๋ธŒ๋ผ์šฐ์ € ๋„ˆ๋น„๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ฐ˜์‘ํ•˜์ง€๋งŒ, ์ปจํ…Œ์ด๋„ˆ ์ฟผ๋ฆฌ๋Š” ๋ฌธ์„œ ๋‚ด ๊ฐ ์š”์†Œ ์˜ ํฌ๊ธฐ๋‚˜ ๋ชจ์–‘์— ๋”ฐ๋ผ ๋ฐ˜์‘ํ˜• ์ฟผ๋ฆฌ๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์—์„œ ์ƒ์œ„ ํ˜ธํ™˜์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ปจํ…Œ์ด๋„ˆ ์ฟผ๋ฆฌ๊ฐ€ ์—†์—ˆ์„ ์‹œ์ ˆ์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ Resize Observer ๊ธฐ์ˆ ์„ ํ†ตํ•ด ํŠน์ • ์š”์†Œ์˜ ํฌ๊ธฐ ๋ณ€ํ™”๋ฅผ ๊ด€์ฐฐํ•˜์—ฌ ์Šคํฌ๋ฆฝํŠธ๋กœ ์Šคํƒ€์ผ๋ง์„ ํ•ด์ฃผ์–ด์•ผ..

category_image
์ธํŒŒ_
2023.03.24
4
CSS

๐ŸŒŸ CSS ์„ ํƒ์ž๋ฅผ ๋ชจ๋˜ํ•˜๊ฒŒ :where() / :is() / :has() / :not()

:where() ๊ฐ€์ƒ ์„ ํƒ์ž :where ์˜์‚ฌ ํด๋ž˜์Šค ์„ ํƒ์ž๋Š” css ์ฝ”๋”ฉํ• ๋•Œ ์„ ํƒ์ž์˜ ์ค‘๋ณต์„ ์ค„์ด๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ๋…€์„์ด๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์—ฌ๋Ÿฌ ์—˜๋ฆฌ๋จผํŠธ ์•ˆ์— ์žˆ๋Š” anchor ํƒœ๊ทธ์— hover ํšจ๊ณผ๋ฅผ ์ฃผ๊ธฐ์œ„ํ•ด์„  ๊ฐ ์„ ํƒ์ž๋“ค์„ ์ฝค๋งˆ๋ฅผ ์ด์–ด ๋‚˜์—ดํ•˜์—ฌ ํ‘œํ˜„ํ•˜์—ฌ์•ผ ํ–ˆ์—ˆ๋‹ค. element 1 element 2 element 3 nav > ul a:hover, footer > ol a:hover, aside > p a:hover { color: purple; text-decoration: underline wavy deeppink; } ๊ทธ๋Ÿฐ๋ฐ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด a:hover ๋ถ€๋ถ„์ด ๊ฐ ์„ ํƒ์ž๋งˆ๋‹ค ์ค‘๋ณต๋˜๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค. ๊ฑฐ๊ธฐ๋‹ค ์ ์šฉํ•ด์•ผํ•  ์š”์†Œ๊ฐ€ ๋งŽ์œผ๋ฉด ๋งŽ์„ ์ˆ˜๋ก ์„ ํƒ์ž์˜ ์–‘๋„ ๋Š˜์–ด๋‚˜ ๋‚˜์ค‘์— ..

category_image
์ธํŒŒ_
2023.03.09
6
CSS

๐ŸŒŸ ์Šคํฌ๋กค ๋ฐ”(Scrollbar) ์Šคํƒ€์ผ๋ง ๐Ÿ’ฏ ์ด์ •๋ฆฌ

Custom Scrollbar ์Šคํƒ€์ผ๋ง ์œ ํŠœ๋ธŒ ํ™ˆํŽ˜์ด์ง€๋ฅผ ๋ณด๋ฉด ์Šคํฌ๋กค๋ฐ”๊ฐ€ ์ผ๋ฐ˜ ๋ธŒ๋ผ์šฐ์ € ์Šคํฌ๋กค๋ฐ”์™€๋Š” ๋‹ฌ๋ฆฌ ๋™๊ทธ๋ž—๊ฒŒ ์Šคํƒ€์ผ๋ง ๋˜์–ด ์žˆ์Œ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์ด์ฒ˜๋Ÿผ ์Šคํฌ๋กค๋ฐ” ์—ญ์‹œ ๋‹ค๋ฅธ ์š”์†Œ์ฒ˜๋Ÿผ CSS ์Šคํƒ€์ผ๋ง์ด ๊ฐ€๋Šฅํ•˜์—ฌ, ๋ณด๋‹ค ์ž์‹ ์˜ ์›น์‚ฌ์ดํŠธ ๋‹๋ณด์ผ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜์—ฌ ๋ฐฉ๋ฌธ์ž์—๊ฒŒ ์กฐ๊ธˆ ๋” ๊ธฐ์–ต์— ๋‚จ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. ๋‹ค๋งŒ ์Šคํฌ๋กค๋ฐ” ์š”์†Œ๋Š” ์›น ์ฝ˜ํ…์ธ ๊ฐ€ ์•„๋‹Œ ๋ธŒ๋ผ์šฐ์ € ๋‚ด๋ถ€ ์ธํ„ฐํŽ˜์ด์Šค๋กœ ์ทจ๊ธ‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋ฐ˜์ ์ธ css ์‚ฌ์šฉ์— ์žˆ์–ด ๊ธฐ๋Šฅ์ด ์ œํ•œ์ ์ธ ๊ฒƒ์ด ๋งŽ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์˜ alert ์ฐฝ์„ ์Šคํƒ€์ผ๋ง ํ• ์ˆ˜ ์—†๋“ฏ์ด ๋ง์ด๋‹ค. ์ฆ‰, css๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ € ์Šคํฌ๋กค๋ฐ” ์ƒ‰๊น”์ด๋‚˜ ๋‘๊ป˜๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜๋Š” ์žˆ์œผ๋‚˜ ์ด์™ธ์˜ ๋ณต์žกํ•œ ์Šคํƒ€์ผ๋ง์—๋Š” ์ œํ•œ์ ์ด๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค. ํŠนํžˆ ์œ ์˜ํ•ด์•ผ ํ•  ์ ์€ CSS scrollbar ๊ด€๋ จ ์„ ํƒ์ž๋“ค์€ ํ‘œ์ค€์ด ์•„๋‹ˆ..

category_image
์ธํŒŒ_
2023.02.26
11
CSS

๐Ÿ•น๏ธ CSS ์š”์†Œ ์ˆ˜ํ‰/์ˆ˜์ง ์ •๋ ฌ ๊ธฐ๋ฒ• ๋ชจ์Œ

์ˆ˜ํ‰ ์ค‘์•™ ์ •๋ ฌ ๐Ÿ“ข inline / inline-block ์š”์†Œ ์ •๋ ฌ ๋Œ€์ƒ ์š”์†Œ(inline)์˜ ๋ถ€๋ชจ ์š”์†Œ(block)์— text-align: center;๋ฅผ ์ง€์ •ํ•œ๋‹ค. inline, inline-block, inline-table, inline-flex, ๊ธฐํƒ€ ๋“ฑ๋“ฑ์— ์ ์šฉ๋œ๋‹ค. One Two Three Four โ€‹ ์ž์‹์š”์†Œ๊ฐ€ block์š”์†Œ์ด๋ฉด, ๊ฐ•์ œ๋กœ ์ž์‹์š”์†Œ๋ฅผ inline-block์š”์†Œ๋กœ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๋‹ค. I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I h..

category_image
์ธํŒŒ_
2023.02.24
2
CSS

๐ŸŒŸ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ๋ฒ”์œ„ ์ง€์ • ์ตœ์‹  ๋ฌธ๋ฒ• (๊ฐ„ํŽธํ•ด์ง โ—)

CSS media query ๋ฒ”์œ„ ์ตœ์‹  ๋ฌธ๋ฒ• CSS์—์„œ ๋ฐ˜์‘ํ˜• ์ฟผ๋ฆฌ๋ฅผ ์ž‘์„ฑํ• ๋•Œ ๊ฐ€์žฅ ์ดํ•ด๊ฐ€ ์•ˆ๋˜์—ˆ๋˜ ์ ‘์ด ๋ฐ”๋กœ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ์˜ width, height ๋ฒ”์œ„ ์ง€์ • ๋ฌธ๋ฒ•์ด๋‹ค. ์™ ๋งŒํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„  ๋ฒ”์œ„ ์ง€์ •์„ ๊ธฐํ˜ธ๋ฅผ ํ†ตํ•ด ๋ฒ”์œ„์ง€์ •์„ ํ•˜์ง€๋งŒ CSS์—์„œ๋Š” ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ๋ฒ”์œ„ ์ง€์ •์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•˜์˜€๋‹ค. ์ •ํ™•ํžˆ max-width ๊ฐ€ ์˜๋ฏธํ•˜๋Š” ๊ฒƒ์ด '์ด์ƒ' ์ธ์ง€ '์ดํ•˜' ์ด์—ˆ๋Š”์ง€ ์ž ๊น ๋ฌธ๋ฒ•์ด ํ–‡๊น”๋ฆด ๋•Œ๋„ ์žˆ์—ˆ์œผ๋ฉฐ, ๊ธฐ๋ณธ์ ์œผ๋กœ '๊ฐ™๊ฑฐ๋‚˜ ์ž‘๋‹ค' ๋กœ ํ†ต์šฉ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋งŒ์ผ '๋ฌด์กฐ๊ฑด ์ž‘๋‹ค' ๋กœ ์„ค์ •ํ•˜๋ ค๋ฉด, ์•„๋ž˜์™€ ๊ฐ™์ด 319.99px ๋กœ ์ง€์ •ํ•ด์•ผ๋Š” ์šฐํšŒํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์จ์•ผ ํ–ˆ๋‹ค. /* viewports

category_image
์ธํŒŒ_
2022.11.12
1
CSS

๐ŸŒŸ ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ ๋น„์œจ ๋งž์ถ”๋Š” 3๊ฐ€์ง€ ๋ฐฉ๋ฒ• (object-fit / background-size / position)

ํ”„๋ก ํŠธ๋ฅผ ์ž‘์—…ํ• ๋•Œ, ์ปจํ…Œ์ด๋„ˆ์˜ ํฌ๊ธฐ๋Š” ๊ณ ์ •๋˜์–ด ์žˆ๋Š”๋ฐ, ํ•ด๋‹น ์ปจํ…Œ์ด๋„ˆ ์•ˆ์— ๋“ค์–ด๊ฐˆ ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ๋Š” ๋‹ค์–‘ํ•œ ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด ์ด๋ฏธ์ง€๋ฅผ ํ™•๋Œ€/์ถ•์†Œ ํ•˜๊ฑฐ๋‚˜ ํŠน์ • ๋น„์œจ๋กœ ๋‚˜ํƒ€๋‚˜๊ฒŒ ํ•˜๊ธฐ์œ„ํ•ด, CSS๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‚˜ ์š”์†Œ๊ฐ™์€ ์˜ค๋ธŒ์ ํŠธ๋“ค์„ ์กฐ์ •ํ•ด์•ผ ๋˜๋Š”๋ฐ ๋ฐฉ๋ฒ•์ด ๊ฒฐ์ฝ” ๋…น๋ก์น˜ ์•Š๋‹ค. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” background-img ํ˜น์€ ํƒœ๊ทธ๋กœ ์ด๋ฏธ์ง€๋ฅผ ๊ฐ€์ ธ์™€, ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ์‚ฌ์ด์ฆˆ์˜ ๋ฐ•์Šค ์•ˆ์— ์ด๋ฏธ์ง€ ์ปจํ…์ธ ๋ฅผ ๋ฐฐ์น˜ํ•˜๊ณ  ๋น„์œจ์„ ์กฐ์ •ํ•ด ๊พธ๋ฐ€๋•Œ, ์–ด๋–ค css ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค๋ฃจ๋Š”์ง€ 3๊ฐ€์ง€ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•œ๋ฐฉ ์ •๋ฆฌํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณด์ž. background ์†์„ฑ์„ ์ด์šฉํ•ด ์กฐ์ ˆ background-size ์†์„ฑ ๋จผ์ € css์˜ background-img : url() ์†์„ฑ์„ ํ†ตํ•ด ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ๋Ÿฌ์™€ ์‚ฌ์šฉํ• ๋•Œ, ์‚ฌ์ด์ฆˆ๋ฅผ ์กฐ์ ˆํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„..

category_image
์ธํŒŒ_
2022.06.10
5
CSS

๐ŸŽจ SVG ๋‹ค๋ฃจ๊ธฐ ์ •๋ฆฌ (ํฌ๊ธฐ / ์ƒ‰์ƒ ๋ณ€๊ฒฝ)

SVG (Scalabe Vector Graphic) SVG๋Š” ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ(Scalable Vector Graphics)์˜ ์ค„์ž„๋ง์ด๋‹ค. SVG ์ด๋ฏธ์ง€ ํŒŒ์ผ์€ XML ๋ฌธ๋ฒ•์„ ๊ธฐ๋ณธ์œผ๋กœ ํ•˜๋Š” ๋ฌธ์„œ์ด๋ฉฐ ๋กœ๊ณ ๋‚˜ ์•„์ด์ฝ˜, ๊ทธ๋ž˜ํ”„ ๋“ฑ ๋„๋ฆฌ ์‚ฌ์šฉ๋œ๋‹ค. ์ฆ‰, 2์ฐจ์› ๊ทธ๋ž˜ํ”ฝ์„ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ XMLํŒŒ์ผ ํ˜•์‹์˜ ๋งˆํฌ์—… ์–ธ์–ด์ด๋ผ๊ณ  ๋ด๋„ ๋œ๋‹ค. ๋‹ค๋ฅธ png๊ณผ jpg ์ด๋ฏธ์ง€ ํŒŒ์ผ์— ๋น„ํ•ด ํ…์ŠคํŠธ ํŽธ์ง‘๊ธฐ์—์„œ CSS๋‚˜ JS๋กœ ์ˆ˜์ •์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ์ด ๊ฐ€์žฅ ํฐ ์žฅ์ ์ด๋ผ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ฐ€์žฅ ํฐ ํŠน์ง•์œผ๋กœ๋Š” ํ™•์žฅ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ์—์„œ ํ™•๋Œ€ํ•ด๋„ ํ’ˆ์งˆ์ด ๋–จ์–ด์ง€์ง€ ์•Š๋Š”๋‹ค๋Š” ํŠน์ง•์ด ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ํŒŒ์›Œํฌ์ธํŠธ์—์„œ ์ด๋ฏธ์ง€๋ฅผ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜ ์ค„์ผ๋•Œ ํ™”์งˆ์ด ๊นจ์ง€์ง€ ์•Š๋Š” ๊ฒƒ๋„ ๋ฐ”๋กœ ์ด ์›๋ฆฌ๋ฅผ ์ด์šฉํ•œ ๊ฒƒ์ด๋‹ค. SVG ์ด๋ฏธ์ง€๋Š” ํฌ๊ธฐ๋ฅผ ์ค„์ด๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๋”๋ผ..

category_image
์ธํŒŒ_
2022.03.17
18
CSS

๐ŸŽจ ์š”์†Œ์˜ ๊ธฐ๋ณธ ๋””์ž์ธ ๋ฆฌ์…‹ - all ์†์„ฑ

CSS - all ์†์„ฑ all ๋‹จ์ถ• ์†์„ฑ์€ ์š”์†Œ์˜ unicode-bidi (en-US), direction (en-US), CSS ์‚ฌ์šฉ์ž ์ง€์ • ์†์„ฑ์„ ์ œ์™ธํ•œ ๋ชจ๋“  ์†์„ฑ์„ ์ดˆ๊ธฐํ™” ํ•œ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด ๋ฒ„ํŠผ์„ ์ƒ์„ฑํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๊ธฐ๋ณธ์ ์œผ๋กœ ์ ์šฉ๋˜์–ด์žˆ๋Š” ๋ฒ„ํŠผ์˜ ๊ธฐ๋ณธ ์Šคํƒ€์ผ ๊ฐ’์„ ์ดˆ๊ธฐํ™” ์‹œ์ผœ์ค„ ์ˆ˜ ์žˆ๋‹ค. Click Me ! all: unset; ์„ ํ•ด์ฃผ๋ฉด ๊ธฐ๋ณธ ๋ฒ„ํŠผ ๋ชจ์–‘์ด ์ดˆ๊ธฐํ™”๋˜์–ด, ํ…์ŠคํŠธ๋งŒ ๋‚จ๊ฒŒ๋œ๋‹ค. button{ all: unset; } ๊ณผ ์˜ ๋””์ž์ธ์„ ํ†ต์ผํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋“ฑ, ํƒœ๊ทธ์˜ ๋””ํดํŠธ ๋””์ž์ธ์„ ์—†์• ๊ฑฐ๋‚˜ ํ†ต์ผํ•  ๊ฒฝ์šฐ์— ๊ฐ™์ด ํŽธ๋ฆฌํ•˜๊ฒŒ ์“ธ ์ˆ˜ ์žˆ๋‹ค. button{ all: unset; /* ์œ ์˜ํ• ์ ์€ ์ •์˜ํ• ๋•Œ ๊ฐ€์žฅ ์ฒ˜์Œ์— ์จ์ค˜์•ผ ๋œ๋‹ค. ๋’ค์—๋‹ค ์จ์ฃผ๋ฉด ๊ทธ ์œ„์˜ ์Šคํƒ€์ผ๋“ค๋„ ์ดˆ๊ธฐํ™”๋˜๊ฒŒ ๋œ๋‹ค. */ background..

category_image
์ธํŒŒ_
2021.12.28
2
CSS

๐ŸŽจ :before :after ์™€ ::before ::after ์ฐจ์ด์ 

๊ฐ€์ƒ ์„ ํƒ์ž (pseudo selector) ๊ฐ€์ƒ ์„ ํƒ์ž(pseudo selector)์—๋Š” ๊ฐ€์ƒ ํด๋ž˜์Šค(pseudo class)์™€ ๊ฐ€์ƒ ์—˜๋ฆฌ๋จผํŠธ(pseudo element)๊ฐ€ ์กด์žฌํ•œ๋‹ค. ๋‘˜์ด ๋น„๊ตํ•˜์ž๋ฉด, ๊ฐ€์ƒ ํด๋ž˜์Šค๋Š” ์—˜๋ฆฌ๋จผํŠธ ์ „์ฒด๋‚˜ ์—˜๋ฆฌ๋จผํŠธ ์ƒํƒœ๋ฅผ ์„ ํƒํ•˜๊ณ , ๊ฐ€์ƒ ์—˜๋ฆฌ๋จผํŠธ๋Š” ์—˜๋ฆฌ๋จผํŠธ์˜ ํ•˜์œ„ ์š”์†Œ๋„ ๋” ์„ธ๋ถ„ํ™”ํ•˜์—ฌ ์„ ํƒ๊ฐ€๋Šฅํ•˜๋‹ค. ๊ฐ€์ƒ ์—˜๋ฆฌ๋จผํŠธ (Pseudo Elements) ::before , ::after , ::first-letter , ::first-line , ::selection ๊ฐ€์ƒ ํด๋ž˜์Šค (Pseudo Classes) :active , :checked , :disabled , :focus , :hover ๋“ฑ CSS 2.1์—์„œ๋Š” ๊ฐ€์ƒํด๋ž˜์Šค, ๊ฐ€์ƒ์—˜๋ฆฌ๋จผํŠธ ๋ชจ๋‘ ์‹ฑ๊ธ€ ์ฝœ๋ก ์„ ์‚ฌ์šฉํ–ˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ CS..

category_image
์ธํŒŒ_
2021.12.28
1
CSS

๐ŸŽจ position sticky - ์œ„์— ํ—ค๋”๋ฅผ ๊ณ ์ •ํ•˜์ž

๋„ค๋น„๊ฒŒ์ด์…˜ ํ—ค๋” ๊ณ ์ •ํ•˜๊ธฐ ๋Œ€๋‹ค์ˆ˜์˜ ์‚ฌ์ดํŠธ๊ฐ€ ์ƒ๋‹จ ๋„ค๋น„๊ฒŒ์ด์…˜ ์˜์—ญ ๋ถ€๋ถ„์ด ์Šคํฌ๋กค์„ ๋‚ด๋ฆฌ๋ฉด ๊ฐ™์ด ๋”ฐ๋ผ ๋‚ด๋ ค์˜ค๋Š” ํŽ˜์ด์ง€ ์š”์†Œ๋ฅผ ํ•œ๋ฒˆ ์ฏค์€ ๋ด์™”์„ ๊ฒƒ์ด๋‹ค. ์ด์ „์—๋Š” ์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค๋ ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ณต์žกํ•œ ๊ตฌ์„ฑ์„ ํ•˜์—ฌ์•ผ ํ–ˆ์ง€๋งŒ ์ด์ œ๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ css์˜ position: sticky ์†์„ฑ์œผ๋กœ ๊ตฌํ˜„์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด ์•„๋ž˜์™€ ๊ฐ™์ด ์š”์†Œ ์˜์—ญ ๋ถ€๋ถ„์„ ์Šคํฌ๋กค์„ ๋‚ด๋ ค๋„ ์ƒ๋‹จ์— ๊ณ ์ •์‹œํ‚ค๊ณ  ์‹ถ๋‹ค๋ฉด, Logo Menu1 Menu2 Menu3 ๋‚ด์šฉ ... See the Pen position-sticky-0 by barzz12 (@inpaSkyrim) on CodePen. ์•„๋ž˜์™€ ๊ฐ™์ด ์†์„ฑ์„ ์„ค์ •ํ•ด์ฃผ๋ฉด ์ƒ๋‹จ ํ—ค๋” ๊ณ ์ •์ด ๋˜๊ฒŒ ๋œ๋‹ค. header { ... position: sticky; top: 0; } See the P..

category_image
์ธํŒŒ_
2021.10.20
2
CSS

๐ŸŽจ CSS ๋ณ€์ˆ˜(--variable) ์‚ฌ์šฉ๋ฒ• & ์‘์šฉ ์ •๋ฆฌ

CSS ๋ณ€์ˆ˜ ๊ธฐ๋Šฅ ๋ณต์žกํ•œ ์›น์‚ฌ์ดํŠธ ๊ฐ™์€ ๊ฒฝ์šฐ ์—„์ฒญ๋‚œ ์–‘์˜ CSS๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ, ์œ ์ง€๋ณด์ˆ˜๋ฅผ ํ•˜๋‹ค ๋ณด๋ฉด ์—ฌ๋Ÿฌ ๊ณณ์—์„œ ์‚ฌ์šฉํ•œ ์ž„์˜์˜ ๊ฐ’์„ ํ•œ๊บผ๋ฒˆ์— ๋ฐ”๊ฟ”์•ผ ํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. ๊ทธ ๊ฐ’๋“ค์„ ํ•˜๋‚˜์”ฉ ์ฐพ์•„์„œ ์ผ์ผ์ด ๋ฐ”๊พธ๋ ค๋ฉด ์ƒ๋‹นํžˆ ํ”ผ๊ณคํ•  ๊ฒƒ์ด๊ณ , ๋•Œ์— ๋”ฐ๋ผ ์‹ค์ˆ˜๋„ ๋งŽ์„ ๊ฒƒ์ด๋‹ค. ๊ทธ๋ž˜์„œ ์—ฌํƒ€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ฒ˜๋Ÿผ ๋ณ€์ˆ˜๋ฅผ ์ด์šฉํ•˜๋ฉด, ์š”์†Œ ์ „๋ฐ˜์— ๊ฑธ์ณ ์‚ฌ์šฉ๋˜๋Š” ์ž„์˜์˜ ๊ฐ’์„ ๋ณ€์ˆ˜์— ์ €์žฅํ•˜๊ณ  ํ˜ธ์ถœํ•˜๋ฉด ๋ณด๋‹ค ํšจ์œจ์ ์ธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ๊ฐ€๋Šฅํ•ด์ง„๋‹ค. CSS ๋ณ€์ˆ˜ ์„ ์–ธ ๋ฐ ํ˜ธ์ถœ CSS์—์„œ ๋ณ€์ˆ˜์˜ ์ด๋ฆ„์„ ์ง€์ •ํ•  ๋•Œ๋Š” ๋ณ€์ˆ˜ ๋งจ ์•ž์— -- ๋ฅผ ๋ถ™์—ฌ์ฃผ์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ณ€์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด ์‚ฌ์šฉํ•  ๋•Œ๋Š” var(๋ณ€์ˆ˜๋ช…)ํ˜•์‹์„ ์‚ฌ์šฉํ•œ๋‹ค. :root { --main-font-color: #000f22; /* CSS ์ „์—ญ ๋ณ€์ˆ˜ ์„ ์–ธ */ } div { color..

category_image
์ธํŒŒ_
2021.10.19
2