ํ˜•์ œ ์ธ์ ‘์ž display:none; ์ผ ๋•Œ ์ ์šฉ๋˜์ง€ ์•Š๋Š” ์ด์œ 
ยท
๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY/CSS
1. ๋ฌธ์ œ๋งˆํฌ์—…์„ ์งค ๋•Œ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋„˜๊ฒจ์ฃผ๊ธฐ ์œ„ํ•ด ์ž„์‹œ๋กœ ์ธ๋ผ์ธ์— display:none; ์ฒ˜๋ฆฌํ•œ ๊ฒฝ์šฐ๊ฐ€ ์žˆ์—ˆ๋‹ค.block3์ด ๋ฐฑ๊ทธ๋ผ์šด๋“œ๊ฐ€ ์ ์šฉ๋  ์ค„ ์•Œ์•˜๋Š”๋ฐ ๋˜์ง€ ์•Š์•˜๋‹ค.block1block2block3.block1 + .block3 {background-color:red;} 2. ์ด์œ ์ธ์ ‘ ํ˜•์ œ ์„ ํƒ์ž๋Š” "HTML ๊ตฌ์กฐ์ƒ ๋ฐ”๋กœ ๋‹ค์Œ ํ˜•์ œ" ๋งŒ ์„ ํƒํ•˜๊ธฐ ๋•Œ๋ฌธ.์ฆ‰, ์š”์†Œ๊ฐ€ ํ™”๋ฉด์— ๋ณด์ด๋А๋ƒ (display:none ์ด๋ƒ) ๋Š” ์ „ํ˜€ ์ƒ๊ด€์—†๊ณ , HTML ๊ตฌ์กฐ์ƒ ๋ฐ”๋กœ ๋‹ค์Œ์— ์˜ค๋Š” ํ˜•์ œ๋งŒ ์ธ์‹ ํ•œ๋‹ค.display:none์€ ๋ณด์ด์ง€ ์•Š๊ฒŒ๋งŒ ํ•  ๋ฟ, DOM ๊ตฌ์กฐ์—์„œ ์‚ฌ๋ผ์ง€๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
[CSS] counter : css๋กœ ์ˆœ๋ฒˆ๋‚˜ํƒ€๋‚ด๊ธฐ
ยท
๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY/CSS
counter ์‚ฌ์šฉ๋ฒ• counter์€ CSS์—์„œ ์ž๋™์œผ๋กœ ๋ฒˆํ˜ธ๋ฅผ ๋งค๊ธฐ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. counter-reset ์นด์šดํ„ฐ์ด๋ฆ„๊ณผ ์‹œ์ž‘๊ฐ’์„ ์„ค์ •{ counter-reset: initial | ์นด์šดํ„ฐ์ด๋ฆ„/์ˆซ์ž | none } initial :: ์ดˆ๊ธฐํ™” ์นด์šดํ„ฐ๋กœ ์‚ฌ์šฉํ•  ์ด๋ฆ„ ์ˆซ์ž๋ฅผ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ๊ฐ’์ด 0 ์ˆซ์ž๋Š” ์Œ์ˆ˜๊ฐ’๋„ ๊ฐ€๋Šฅํ•˜๋ฉฐ ์—ฌ๋Ÿฌ๊ฐœ์˜ ์นด์šดํ„ฐ๋ฅผ ์„ค์ •ํ•˜๊ณ ์ž ํ•  ๋•Œ ๊ณต๋ž€์œผ๋กœ ๋ถ„๋ฆฌ. none :: ์„ค์ •๊ฐ’์ด ์—†์Œ(์ด๋ฏธ ์„ค์ •๋œ ๊ฒƒ์„ ์ทจ์†Œํ•˜๊ณ ์ž ํ•  ๋•Œ ์‚ฌ์šฉ) counter-increment counter-reset์œผ๋กœ ์„ค์ •ํ•œ ๊ฐ’์„ ์ฆ๊ฐ€์‹œํ‚ค๋Š” ์—ญํ• { counter-increment: initial | ์นด์šดํ„ฐ์ด๋ฆ„/์ˆซ์ž | none } initial :: ์ดˆ๊ธฐํ™” ์ˆซ์ž๋ฅผ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ 1์”ฉ ์ฆ๊ฐ€ ์ˆซ์ž๋Š” ์Œ์ˆ˜๊ฐ’ ๊ฐ€..
[CSS] flex ์†์„ฑ (flex-basis, flex-grow, flex-shrink)
ยท
๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY/CSS
1. flex-basis : ์•„์ดํ…œ์˜ ๊ธฐ๋ณธํฌ๊ธฐ ๊ธฐ๋ณธ๊ฐ’ auto #container { display: flex; max-width: 800px; margin: auto; border: 3px solid #000; background-color: #fff; } .item { font-size: 40px; flex-basis: auto; } #container { /* ์œ„์™€ ๋™์ผ */ } .item { font-size: 40px; flex-basis: 120px; } 2. flex-grow : ์•„์ดํ…œ์˜ ๋„ˆ๋น„ ๋น„์œจ ๊ธฐ๋ณธ๊ฐ’ 0 flex-grow ๊ฐ’์ด 1์ด๋ฉด 1:1 ๋น„์œจ๋กœ ๋งž์ถฐ์ง€๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ์—ฌ๋ฐฑ์„ ๊ธฐ์ค€์œผ๋กœ ๋น„์œจ์ด ๋งž์ถฐ์ง€๋Š” ๊ฒƒ์ด๋‹ค. .item { flex-grow: 1; } ๋„ˆ๋น„๋ฅผ ๋˜‘๊ฐ™์ด ๋‚˜ํƒ€๋‚ด๊ณ  ์‹ถ์„ ๋•Œ๋Š”, ...
[CSS] flex-basis vs width ์ฐจ์ด์ 
ยท
๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY/CSS
flex-basis๊ฐ€ ํ•ญ์ƒ width์— ์ ์šฉ๋˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. flex-direction: row์ธ ๊ฒฝ์šฐ, flex-basis ๋Š” ๋„ˆ๋น„๋ฅผ ์ œ์–ดํ•œ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ flex-direction: column์ธ ๊ฒฝ์šฐ, flex-basis๋Š” ๋†’์ด๋ฅผ ์ œ์–ดํ•œ๋‹ค. ์ฃผ์š”์ฐจ์ด์  flex-basis๋Š” flex item๋งŒ ์ ์šฉ๋œ๋‹ค. flex container ๋Š” flex-basis ๋ฅผ ๋ฌด์‹œํ•˜์ง€๋งŒ width๋‚˜ height๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. flex-basis๋Š” ์ฃผ์ถ•์—์„œ ์ž‘๋™ํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด flex-direction: column์€ ํ”Œ๋ ‰์Šค ํ•ญ๋ชฉ์˜ ํฌ๊ธฐ๋ฅผ ๊ฐ€๋กœ๋กœ ์กฐ์ •ํ•˜๋ ค๋ฉด width ์†์„ฑ์ด ํ•„์š”ํ•˜๋‹ค. ์ ˆ๋Œ€์œ„์น˜์— ์žˆ๋Š” flex ํ•ญ๋ชฉ์—๋Š” ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค. #container { display: flex; flex-direction:..
[CSS] ์›นํฐํŠธ ์ฐธ๊ณ 
ยท
๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY/CSS
https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0 ์›นํฐํŠธ ์ตœ์ ํ™” ํ•˜๊ธฐ ์›นํฐํŠธ๋ž€? ํฐํŠธ web safe font - ์ผ๋ฐ˜์ ์œผ๋กœ ์‹œ์Šคํ…œ์— ์„ค์น˜๋œ ํฐํŠธ. ๋‹ค์šด๋กœ๋“œ ์—†์ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์˜๋„๋Œ€๋กœ ํ‘œํ˜„์ด ํ•  ์ˆ˜ ์žˆ์Œ. (Arial, Helvetica ๋“ฑ) web font - ์„ค์น˜๋˜์–ด ์žˆ์ง€ ์•Š์•„์„œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋‹ค์šด๋กœ๋“œ velog.io https://d2.naver.com/helloworld/4969726
[CSS] CSS ์„ ํƒ์ž ์šฐ์„ ์ˆœ์œ„
ยท
๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY/CSS
๊ฐ€์žฅ ๊ธฐ์ดˆ์ ์ธ ๋ถ€๋ถ„์ธ๋ฐ ๊ทธ๋ƒฅ ๋„˜์–ด๊ฐ€๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค. ์„ ํƒ์ž ์šฐ์„ ์ˆœ์œ„ ์šฐ์„ ์ˆœ์œ„๋ž€, ๊ฐ™์€ ์š”์†Œ๊ฐ€ ์—ฌ๋Ÿฌ ์„ ์–ธ์˜ ๋Œ€์ƒ์ด ๋  ๊ฒฝ์šฐ, ์–ด๋–ค ์„ ์–ธ์˜ CSS ์†์„ฑ์„ ์šฐ์„  ์ ์šฉํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•. ์ ์ˆ˜๊ฐ€ ๋†’์€ ์„ ์–ธ์ด ์šฐ์„  ์ ์ˆ˜๊ฐ€ ๊ฐ™์œผ๋ฉด ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰์— ์„ ์–ธํ•œ ํƒœ๊ทธ๊ฐ€ ์šฐ์„  Hello world! ์ ์ˆ˜๋กœ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋‚˜ํƒ€๋‚ด๋ณด์ž. Hello world! !important > inline > ID > Class > ํƒœ๊ทธ > ์ „์ฒด > body body๋ผ๋Š” ํƒœ๊ทธ์— ์†์„ฑ์„ ์ ์šฉํ•˜๋ฉด ์ƒ์†๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ ์ˆ˜๋ฅผ ๊ณ„์‚ฐํ•˜์ง€ ์•Š๋Š”๋‹ค. [์˜ˆ์ œ] .list li.item {} .list li:hover {} .box::before {} #submit span {} header .menu li:nth-child(2) {} h1 {} :not(.box)..
[CSS] flex ๋ฐ˜์‘ํ˜•์— ๋”ฐ๋ผ ๋ฐ•์Šค ๋–จ์–ด๋œจ๋ฆฌ๊ธฐ
ยท
๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY/CSS
์กฐ๊ฑด flex๋กœ 1์ค„ 6์นธ ๋งŒ๋“ค๊ธฐ 768px ์ผ ๋•Œ 2์ค„ 3์นธ ๋งŒ๋“ค๊ธฐ box box box box box box * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; max-width: 1200px; height: 200px; background: #eaeaea; margin: auto; } .box { width: 20%; border: 1px solid plum; } @media all and (max-width: 768px) { .container { /*flex-wrap: nowrap(default) */ flex-wrap: wrap; background: #777; } .box { width: 33.33%..
[CSS] viewport (vw, vh, vmin, vmax) ์˜๋ฏธ์™€ ์‚ฌ์šฉ
ยท
๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY/CSS
[CSS] vw / vh๋ฅผ ์•Œ์•„๋ณด์ž ์ •๋ฆฌํ•œ ์ด์œ  vw, vh๊ฐ€ ๋ถ€๋ชจ์˜ ๋„“์ด์— ์˜ํ–ฅ์„ ๋ฐ›๋Š” ์ค„ ์•Œ์•˜์ง€๋งŒ, ํ™”๋ฉด์˜ ๋„ˆ๋น„์— ์˜ํ–ฅ์„ ๋ฐ›๋Š”๋‹ค๋Š” ์ ์—์„œ ์ •๋ฆฌ๋ฅผ ํ†ตํ•ด ๋‹ค์‹œ ์•Œ์•„๋ณด๊ณ ์ž ํ•œ๋‹ค. ๋จผ์ € ๋งํ•˜์ž๋ฉด vw, vh ๋Š” ๋ถ€๋ชจ์˜ ๋„“์ด์— ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๋Š”๋‹ค!!! ๋‹จ์œ„์™€ ์˜๋ฏธ vw / Viewport Width viewport ๋„ˆ๋น„์— ๊ทผ๊ฑฐ. 1vw๋Š” viewport์˜ ๋„“์ด 1%์™€ ๊ฐ™๋‹ค. vh / Viewport Height viewport ๋†’์ด์— ๊ทผ๊ฑฐ. 1vh๋Š” viewport์˜ ๋†’์ด 1%์™€ ๊ฐ™๋‹ค. vmin / Viewport Minimum viewport์˜ (๋†’์ด์™€ ๋„ˆ๋น„ ์ค‘) ์ž‘์€ ์ชฝ์˜ ์น˜์ˆ˜๋กœ ๊ธฐ์ค€. viewport ๋†’์ด๊ฐ€ ๋” ์ž‘์€ ๊ฒฝ์šฐ, 1vim = viewport ๋†’์ด 1% viewport ๋„ˆ๋น„๊ฐ€ ๋” ์ž‘์€ ๊ฒฝ์šฐ, 1..