Lect & Tip/html, css, scss23 [์นํ์ค CSS] cursor:pointer๊ฐ ์นํ์ค. cursor:hand๋ ie์์๋ง. 2014.10.04 11:38 [์น ํ์ค CSS] cursor:pointer๊ฐ ์น ํ์ค. cursor:hand๋ ie์์๋ง. ์ด๋ฏธ์ง์ onClick="javascript:…."๋ฅผ ์ด ๊ฒฝ์ฐ๋ผ๋ ์ง ๋ญ OnClick์์ฑ์ Aํ๊ทธ ์ด์ธ์ ๋ชจ๋ ๊ฐ์ฒด์ ์ค ์ ์๋ค. TD์๋ DIV์๋ ์ค ์ ์๋๋ฐ...์ด ์์ฑ์ ๊ฐ์ฒด์ ์ค๋ ํด๋ฆญ์ ํ ๋ ์ก์ ์ ์ผ์ด๋์ง๋ง ๋ง์ฐ์ค์ ์ปค์ ๋ชจ์์ด ์ ๋ชจ์์ด ์๋ ํ์ดํ ๋ชจ์์ผ๋ก ๊ทธ๋๋ก ๋จ์ ์์ผ๋๊น ์ฌ๋๋ค์ด ํด๋ฆญํ๋ ๊ฑด์ง ๋ชจ๋ฅผ ๋๊ฐ ๋ง๋ค. ๊ทธ๋ด ๋ ํํ style="cursor:hand;"๋ฅผ ์ฐ์ง๋ง, FireFox์์๋ ์ ๋จนํ๋ค. MS์์ ์์๋ก ๋ง๋ ์์ฑ์ด๊ธฐ ๋๋ฌธ์ด๋ค. ์ด๋ด ๋ style="cursor:pointer;" ๋ก ์ฃผ๋ฉด ๋๋ค. cursor:pointer๊ฐ ์นํ์ค์ด๋ค. .. 2019. 9. 16. CSS ์ ํ์ (selector)์ ์ ์์ ์ฌ์ฉ๋ฒ CSS๋ฅผ ๋ค๋ฃจ๋ ๋ฐ ์์ด์ ๊ฐ์ฅ ๊ธฐ์ด์ ์ด๊ณ ๊ธฐ๋ณธ์ ์ด๊ณ ํต์ฌ ์ ์ธ ๊ฒ์ด ๋ฐ๋ก CSS ์ ํ์์ ํ์ฉ์ด์ฃ . CSS์ ์ ํ์ ๋ฌธ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ฃ . ์ ํ์ { ์์ฑ:๊ฐ} /*example*/ select {position:absolute} #selector { position:absolute; } .selector { postition:absolute; } ์ด๋ฐ ์ ํ์๋ ์ฐ๋ฆฌ๊ฐ CSS์ ์คํ์ผ์ ์ ์ฉํ๊ณ ์ถ์ ํน์ ๋์์ ์ ํํ๊ณ ์ง์ ํ๋ ๊ฒ์ ์ง์นญํ๋ ๊ฒ์ด์ฃ . ์ฝ๊ฒ ์๊ฐํ๋ฉด ํ๊น์ด๋ผ๊ณ ์ฌ๊ฒจ๋ ๋ฌด๋ฐฉํฉ๋๋ค. ์์์ ์๋ฅผ ๋ ์ ํ์ 3์ข ์ ๋ํด์ ์ผ๋จ ์์๋ณด์ฃ . ์์ ์ ํ์ (type Selector) ์๋ฌด๋ฐ ๊ธฐํธ๊ฐ ์์ด ์ค๋ ๋จ์ด๋ html ํ๊ทธ์ Element์์์ ๋๋ค. a, p, div, table, li, u.. 2019. 9. 8. โ checkbox css ์ฒดํฌ๋ฐ์ค ์คํ์ผ๋ก ์์๊ฒ ํ๋ ๋ฒ - ์น ์ ๊ทผ์ฑ ๋ง์ถ๊ธฐ input[type=checkbox] + label ์ฒดํฌ๋ฐ์ค ์์ฒด๋ฅผ ์์๊ฒ ๊พธ๋ฐ ์๋ ์๋ค. ๊ตณ์ด ํ์ฌ์ฝ ๊พธ๋ฏธ์๋ฉด, ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ์ด์ฉํ ์๋ ์๋ค. ์ฒดํฌํ์๊ฐ ๋์์ ๋๋ input[type=checkbox]:checked์ ์คํ์ผ์ ์ฃผ๋ฉด ๋๋ค. ๊ทธ๋ฐ๋ฐ ์ด๋ฏธ์ง๋ฅผ ์ฐ์ง ์๊ณ ์ฒดํฌ๋ฐ์ค๋ฅผ ์คํ์ผ๋ก ์์๊ฒ ๊พธ๋ฏธ๋ ค๋ฉด...์ด๊ฒ ์ข ๋ณต์กํด์ง๋ค. input[type=checkbox] + label ์ ์ด์ฉํ๊ฒ ๋๋๋ฐ, ์ด ๋ฐฉ๋ฒ์ ํต์ฌ์ input ์ฒดํฌ๋ฐ์ค ์์ฒด๋ฅผ ๋ณด์ด์ง ์๊ฒ ํ๊ณ label์ ์คํ์ผ์ ์ฃผ์ด์ ๊พธ๋ฏธ๋ ๋ฐฉ๋ฒ์ด๋ค. ๊ทธ๋ฐ๋ฐ ๋ณดํต ์ด๋ด ๋, ์ง์ง ์ฒดํฌ๋ฐ์ค๋ฅผ ๋ณด์ด์ง ์๊ฒ ํ๊ธฐ ์ํด์ input[type=checkbox] { display:none} ์ ์ฐ๊ฒ ๋๋ค. ์ด๋ ๊ฒ ํด ๋ฒ๋ฆฌ๋ฉด ์น์ ๊ทผ์ฑ ์๋ฐฐ๊ฐ ๋๋ค. ์๋ํ๋ฉด, label์์ฒด๋ focus๋ฅผ ๋ฐ์ง ๋ชปํ๊ณ , inp.. 2019. 9. 4. โcss3 :not ์ ํ์ css3๋ฅผ ์ฐ๋ฉด css2์ ๋นํด์ ํผ๋ธ๋ฆฌ์ ๊ฐ ์ํ๋ ๊ฒฐ๊ณผ๋ฅผ ์ป๊ธฐ๊ฐ ๊ต์ฅํ ์์ํ๋ค. ์์ ๊ฐ์ผ๋ฉด ์คํฌ๋ฆฝํธ์ ๋์์ ๋ฐ์์ด์ผ ํ ์ผ์ css๋ง์ผ๋ก ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํด์ก๊ธฐ ๋๋ฌธ์ด๋ค. display:flex, nth-child(), calc()์ ๋๋ถ์ด :not ์ ํ์๋ ์ ๋ง ์ถ๋ณต์ด๋ค. ์ฌ์ฉ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๋ค. :not(.foo) {color:blue} ์ ๊ฐ์ด ์ฌ์ฉํ๋ฉด .foo ํด๋์ค๊ฐ ์๋ ๋ค๋ฅธ ์๋ ๋จผํธ๋ ๋ชจ๋ ํ ์คํธ ์ปฌ๋ฌ ์์ ํ๋์์ผ๋ก ๋ฐ๊พธ๋ ๋ป์ด๋ค. ์ข ๋ ์ธ๋ถํ ํ ์๋ ์๋ค. div:not(.foo) { color:blue} div์ค์์ fooํด๋์ค๊ฐ ์๋ div๋ ํ ์คํธ ์ปฌ๋ฌ๋ฅผ ํ๋์์ผ๋ก ํ๋ผ๋ ๋ป์ด๋ค. Elements๋ฟ๋ง ์๋๋ผ ํด๋์ค, ID๋ฅผ ๋์์ผ๋ก๋ ์ ์ธํ ์ ์๋ ๊ฒ์ ๋น์ฐํ๋ค. .chartAr.. 2019. 8. 30. ~ + ์ธ์ ํ์ ์ ํ์๋ฅผ ์ด์ฉํ No javascript ํ ๊ธ ์์ธ๊ฒ์ ํ๋ฉด CSS๋ง์ผ๋ก ํผ๋ธ๋ฆฌ์ฑํ๊ธฐ ~ + ์ธ์ ํ์ ์ ํ์๋ฅผ ์ด์ฉํ No javascript ํ ๊ธ ์์ธ๊ฒ์ ํ๋ฉด CSS๋ง์ผ๋ก ํผ๋ธ๋ฆฌ์ฑํ๊ธฐ ์์ธ๊ฒ์ ๋ฒํผ์ ๋๋ ์ ๋ ์์ธ ๊ฒ์์ฉ ์ต์ ๋ค์ด ๋ณด์ฌ์ง๊ณ , ์์ธ๋ฒํผ์ ๋ค์ ํ๋ฒ ๋๋ฌ์ ํ ๊ธํ๋ฉด ์์ธ๊ฒ์์ด ์ฌ๋ผ์ง๋ ๊ฒ์ ๊ตฌํํ๋ ค๋ฉด ๋ณดํต์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ธ ์ ๋ฐ์ ์๋ค. ํ๋ค๋ชปํด ๋ถํธ์คํธ๋ฉ์ ์ฌ์ฉํ๋ค๊ณ ํ๋๋ผ๋, ๊ฐ๋จํ ํ ๊ธ ํจ์๋ฅผ ์ ์ฉํด์ผ๋ง ํ๋ค. ํ์ง๋ง ์คํ์ผ ์ฒดํฌ๋ฐ์ค๋ฅผ ์์ฉํ๋ฉด, ์คํฌ๋ฆฝํธ์ ๋์์์ด ์์ธ ๊ฒ์ ํ ๊ธ์ด ๊ฐ๋ฅํ๋ค. ์๋ฆฌ๋ checkbox์ ์ธ์ ์๋ ๋จผํธ์ ์์ธ๊ฒ์ ์์ญ์ด ๋์ด๊ฒ ํ๋ ๊ฒ์ด๋ค. input[type="checkbox"]+ ์ ํ์๋ ์ธ์ ํ์ ์ ํ์๊ธฐ ๋๋ฌธ์, label_text์ ์๋ณดํ๊ณ , input[type="checkbox"]~ ํ์ ์ ํ์๋ฅผ ์ด์ฉํด์ .styledBt.. 2019. 8. 16. โ ์น์ ๊ทผ์ฑ ์ต์ปคํ๊ทธ A ์ onfocus hover ์๊ฐํ (์ ์ ํ ๋๋ฆฌ)๊ฐ ๋ํ๋์ง ์์ ๋ ํด๊ฒฐ๋ฒ. ์ด์ ์ ์ธ์งํ ์ ์๋ ๋งํฌ ๋ฐ ์์๊ฐ์ ์น ์ ๊ทผ์ฑ ์ฌ์ฌ๋ฅผ ๋ฐ๋ค ๋ณด๋ฉด, ์ ํ ์๊ธฐ์น ๋ชปํ๋ ๋ถ๋ถ์์ ๊ฐ์ ์ ๋ฐ๊ฒ ๋๋ ๊ฒฝ์ฐ๊ฐ ์ข ์ข ์๋ค. ํ์์ ์ด๋, ์์ ์ ๋ค๋ฅธ ์ฌ์ ์๊ฐ ์์ ํ๋ ๋ถ๋ถ์์ ๋๋ฌด๋ ๋ ๊ธฐ์ด์ ์ธ ๋ถ๋ถ์ ์ฒดํฌํ์ง ๋ชปํ๋ ๊ฒฝ์ฐ์ ์ข ์ข ๋ฌธ์ ๊ฐ ์๊ธด๋ค. ์ง์ ํ๋ ํ๋ก์ ํธ๋ผ๋ฉด ์น ์ ๊ทผ์ฑ์ ๊ธฐ๋ณธ๊ณผ ๊ธฐ์ด์ ๋ง์ถฐ์ ์์ ์ ํ์ ํ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ์ถ์์ด์ผ ํ ๋ถ๋ถ์ธ๋ฐ, ๋จ์ด ํ๋ ๊ฒ์ธ๋ฐ "์ค๋ง ์ด๋ฐ ๊ฒ๋ ํ๋ฆฌ๊ฒ ์ด?" ๋ผ๊ณ ์๊ฐํ๋ ๋ถ๋ถ์์ ๋ฌธ์ ๋ ๋ฐ์ํ๋ค. ๋คํํ ์์ ๊ฐ์ด ์ด์ ์ ์ธ์งํ ์ ์๋ ๋งํฌ ๋ฐ ์์ ๊ฐ์์ ๋ฌธ์ ์ ์์ด์ ์ด์ ์ ์๊ฐ์ ์ผ๋ก ์ธ์งํ ์ ์๋ ๋งํฌ์ ๊ฒฝ์ฐ ์๋์ ์ผ๋ก ์๊ฐํ๋ฅผ ๋ ๋ ค ๋ฒ๋ฆฐ ๊ฒฝ์ฐ๊ฐ ์๋๋ผ๋ฉด, X๊ฐ ์๋ โณ์ ๋ฐ๊ธด ํ๋ค. ํ์ง๋ง ๋ชจ๋ ์ฌ์ฌ๊ด์ดโณ๋ฅผ ์ค๋ค๋ ๋ณด์ฅ์ ์๋ค. ๊ทธ๋ฆฌ๊ณ ์๋์ ์ผ๋ก onfocus=blur();.. 2019. 8. 5. ์ด์ 1 2 3 4 ๋ค์