๋๋ชจ๋ค499 CSS overflow ์ง์ ์์ญ ์ธ ์ฒ๋ฆฌ CSS overflow๋ ์ง์ ํ ํด๋น์์ญ ์ธ์ ๋ด์ฉ์ด ๋๋ฌด ๊ธธ์ด์ ธ์ ๋ถ๋ถ์ ๋ง์ง ์์ ๊ทธ ํด๋น์์ญ์ธ์ ๋์ด๊ฐ ์์๋ค์ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ๊ฒ์ธ๊ฐ์ ๊ดํ CSS์ ๋๋ค. ํ๋ก๊ทธ๋จ์์์ ์ง์ ์์ญ์ ๊ธ์์ ํ ์๋ฅผ ์ฃผ๊ธฐ๋ ํ์ง๋ง ๋์์ธ์ ์ผ๋ก ๋ณผ๋ ์ ๋์ ์ธ ๋์์ธ์ ์ฌ์ฉํ ์ ์์ด ์ฌ์ดํธ๋ฅผ ์กฐ๊ธ๋ ์ค๋๋ณผ ์ ์๊ฒ๋ ํ๊ฒ ํด์ฃผ๋ ์์์ด๊ธฐ๋ ํฉ๋๋ค. overflow ์์ฑvisible - ๊ธฐ๋ณธ๊ฐ์ด๋ฉฐ ์ค๋ฒ๋ ์์ญ์ด ์๋ฆฌ์ง ์์ต๋๋ค. ๋ํ ์ง์ ์ญ์ญ ๋ฐ์ ๊ทธ๋๋ก ๋์ค๊ฒ๋ฉ๋๋ค. width:200px; height:50px; overflow:visible; background:#ccc ์์๊ฐ์ด ์ง์ ์์ญ width-200px, height-50px์ ๋์ด์ ๋ฐ์ผ๋ก ๊ทธ๋๋ก ๋ ธ์ถ์ด ๋ฉ๋๋ค. hidden - ์ค๋ฒ๋ ์์ญ์ด ์๋ฆฌ๊ณ ๋ด์ฉ์ด ๋ณด์ฌ.. 2017. 8. 9. CSS3 Transition ํธ๋์ง์ ๋ณํ์ ์์ css3 ํธ๋์ง์ ์์ฑ์ด ์๊ธฐ์ ์๋ ์นํ์ด์ง ์์์์ ๋์ ์ธ ๋ถ๋ถ์ adobe flash๊ฐ ๋ด๋นํ๊ณ ์์์ต๋๋ค. ํ์ง๋ง ๊ตฌ๊ธํฌ๋กฌ์ด๋ ์ ํ์ฌ์์ ํ๋์ฌ๋ฅผ ์งํฅํ๊ธฐ ์์ํ์ต๋๋ค. ์ด์ ์ธ ์ฆ์จ ๋ณด์๊ด๋ จ๋ฌธ์ ๋ ์์ผ๋ฉด์ ์นํ์ค์ ์ด๊ธ๋๊ณ ๋ชจ๋ฐ์ผ์ ์ต์ ํ ๋์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ฌ์ค ํ๋์ฌ๋ ๋์ ์ธ ์์์ ๋ถ๊ณผํ์ง ๊ฐ์ข ๋ฉ๋ด๋ ์ฌ์ดํธ์ ์ฌ์ฉํ๋๊ฑด ์ ํฉํ์ง ๋ชปํ๋๊ฑด ์ฌ์ค์ ๋๋ค. ๊ทธ๋์ ๋์ ์ธ ์์๋ฅผ ๋จ์ง ์ด ํธ๋์ง์ ์ด๋ ์ ๋๋ฉ์ด์ CSS๋ง์ผ๋ก ์ปค๋ฒ๊ฐ ๋๋ค๋ ์ฌ์ค์ ๋๋ค. ์๋์ ํ๋ฆ์ธ ๋งํผ ๋์ฑ ๊ฐ์ํ๋๊ณ ๋์ฑ ์ฝ๊ณ ์ ๊ตํด์ก์ต๋๋ค. ์ฐ์ ์ ํธ๋์ง์ ์๊ดํด ๋จผ์ ํฌ์คํ ํด๋ณด๊ฒ ์ต๋๋ค. ํธ๋์ง์ ์ ์ง์ ํ ์์ฑ์์ ๋๋ค๋ฅธ ์ง์ ๊ฐ(์๊ฐ) ๋์ ๋ถ๋๋ฝ๊ฒ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํฉ๋๋ค. ์ ์๋ฅผ ๋ค์ด ๋ฒํผ๊ฐ์ด ๊ธฐ๋ณธ ๋ธ๋์ด๊ณ ๋ง์ฐ์ค ์ค๋ฒํ์์์ ๊ทธ.. 2017. 8. 8. CSS position ์์์ ์์น์ ์ CSS position ์์์ ์์น์ ์๊ฐ ์์๋ค๊ณผ ๊ฐ์ฒด๋ค์ ์ฝ๋ฉํ๋ค๋ณด๋ฉด position์ ์ ์ ํ ์ ์ฌ์ฉํด์ผ ํ ๋๊ฐ ๋ง์ต๋๋ค.์ผ๋จ ์ด๋ ํ ์์ฑ๋ค์ด ์๋์ง ๋จผ์ ๋ณด๊ฒ ์ต๋๋ค.positionstatic - ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์์๊ทธ๋๋ก ํํ์ด ๋ฉ๋๋ค.absolute - ์ ์ ์ธ ์์๊ฐ ์๋ ์๋์ ์ผ๋ก ๋ฐฐ์น๊ฐ ๋ฉ๋๋ค. ๋ง์น ๋ ์ด์ด์ฒ๋ผ ํผ์ ๋ ๋ค๋๋ ์์๊ฐ ๋ฉ๋๋ค.relative - ์๋์ ์ผ๋ก ๋ฐฐ์น๋๋ฉด์ CSS์ ์ํฅ์ ๋ฐ์ต๋๋ค.fixed - ๋ธ๋ผ์ฐ์ ์ ์ํฅ์ ๋ฐ์ผ๋ฉฐ ํฌ๊ธฐ์ ์๊ด์์ด ์์น๊ฐ ๊ณ ์ ์ด๋ฉ๋๋ค.inherit - ๋ถ๋ชจ์์์์ ์ํฅ์ ๋ฐ์ต๋๋ค. ๋ถ๋ชจ์์ ๊ทธ๋๋ก css์ ์ํฅ์ ๋ฐ์ต๋๋ค. ํฌ์ง์ css์ ์ค์ ํต์ฌ ํฌ์ธํธ๋ 3๊ฐ์ง ์ ๋์ ๋๋ค. absolute, relative, fixed์ ๋๋ค.absolute๋ ๋์์ธ์.. 2017. 8. 7. ํผ์๋จน๋ ์ซ๋ณถ์ด โ์ฆ์๋ก๋ณถ์ด๋ ์ซ๋ณถ์ด ๊ฒฝ์ฐ์๋ ํผ์์ ์ฌ๋จน์ผ๋ฌ ๊ฐ๊ธฐ๊ฐ ์ด๋ ต์ฃ ใ ๋ก๋ณถ์ด ํ๋ ํด๋จน์ผ๋ คํด๋ ํ์ํ ์ฑ์๋ค๊ณผ ๋ก, ์ด๋ฌต, ๋น๋ฉด๋ค์ด ํ์ํ๋ฐ ํด๋จน๊ณ ๋จ์ ์ฌ๋ฃ๋ ๋ฒ๋ ค์ง๊ณ ์๊น์์ ์์ ๋ง์ด์ก๊ณ ์๋ฆฌ๋ฅผ ํ๋ค๋ณด๋ฉด ๋ ๋จ์์ ๋ฒ๋ ค์ง๊ฒ ๋ฉ๋๋ค. ๋๋ชจ๋ค ๊ฐ์กฑ๋ ๋์๊ตฌ ์ด๊ธฐ์ ๋งํธ์์ ์ฅ์๋ณด๊ณ ์์์ ํ๊ฒ๋๋ฉด ์ฌ๋ฃ๊ฐ ๋ง์ด ๋ฒ๋ ค์ ธ์ ๊ทธ๋์ ์จ๋ผ์ธ ํธ๋๋ชฐ์ ์์ฃผ ์ ์ฉํฉ๋๋ค. ์ฌ๊ธฐ์ ๊ธฐ๋ง์ด ๊ตฌ๋งคํด๋ดค์ง๋ง ๋ก๋ณถ์ด๋ ํธ๋ฉํฉํ ๋ฆฌ๊ฐ ์ง๋ฆฌ์ธ๋ฏ ํฉ๋๋ค. ์ค๋์ ํธ๋ฉํฉํ ๋ฆฌ ์ถ์ต์ ์ซ๋ณถ์ด ์ํ๋ง ๋ง์๋ชจ๋ ์ธ๊ฐ์ง์ธ ๊ฒ ๊ฐ์์. ๋งค์ด๋ง, ์ํ๋ง, ์ง์ฅ๋ง ์ ์ ๋งค์ด๋ง๋ ๋จน์ด๋ดค๋๋ฐ ์ ๋ง ๋งค์ ์ต๋๋ค .. ์์ ์ค ์ด๊ธฐ์ ์ํ๋ง์ผ๋ก ! ์ฃผ๋ฌธํ์ด์ . ๋ฐฐ์ก์ ๊ธฐ๋ณธ 2ํ์์ ์ค๋๊ฒ ๊ฐ์์. ์ด์ ๋ถํฐ ๋ฆฌ๋ทฐํด ๋๋ฆฝ๋๋ค ์ถ์ต์ ์ซ๋ฉด๋ก๋ณถ์ด 600g ๊ฐ๊ฒฉ์ด 4,900.. 2017. 8. 7. CSS3 nth-child ์์ ๊ฐ๋ณ์ ์ฉ ์ ๋ ฌ๋ ์์์ css์์ ๊ฐ๋ณ ์ ์๊ฐ ๊ฐ๋ฅํ nth-child ์ ๋๋ค. ํน์ ์์์ ๋ฐ๋ฅธ ์ ์๊ฐ ๊ฐ๋ฅํ๋ฉฐ ์ฌ๋ฌ๊ฐ์ง ๋ฐฉ๋ฒ์ ํตํ์ฌ ๊ฐ ์์๋ง๋ค ๊ฐ๋ณ์ ์ผ๋ก ์ ์๊ฐ ๊ฐ๋ฅํฉ๋๋ค. 1. nth-child(์ซ์)๋ก ์์ ์ ์๋ฅผ ๋ด๋ฆฝ๋๋ค. html nth-child(1) nth-child(2) nth-child(3) nth-child(4) nth-child(5) css li:nth-child(1) {background:#FFF} li:nth-child(2) {background:#F00} li:nth-child(3) {background:#00F} li:nth-child(4) {background:#FF0} li:nth-child(5) {background:#0F0} nth-child(1) nth-child(2) n.. 2017. 8. 7. ์์ 5๊ฐ์ (17~20์ฃผ) ํ๋์ ๋๊ปด์! ์์ 5๊ฐ์์ฐจ์ ํ์์ ํ๋์ ๋๋ ์ ์์ต๋๋ค. 17์ฃผ~20์ฃผ ์ฌ์ด์๋ ๊ฐ์ด์ด ๋์ ๋๊ฒ ์ปค์ง๊ณ ๋ฐฐ๋ ์ ์ ๋ ํตํตํด์ง๊ณ ๋๊ธ๋๊ธ ํด์ง๋๋ค. ์๊ถ์ ๋ฐฐ๊ผฝ์ ๋ฟ์์์ด ํ์์ ์์ง์์ด ํ๋ฐํด์ง๊ณ ํ๋์ ๋๋ ์ ์๋ ์๊ธฐ์ ๋๋ค. ์์์ ์์ด ๋์ด์ ํ์๋ฅผ ๋๋ฌ์ธ๊ณ ์๋ ์๋ง์ด ๋จ๋จํด์ง๋๋ค. ํ์์ ๋ชธ์ ์ฒดํ์ด ๊ท ํ์ด ์กํ ์์ ์์์ ๋์ฑ ํ๋ฐํ๊ฒ ์์ง์ด๋ฉด์ ์๊ถ ๋ฒฝ์ ๋ถ๋ชํ๋๋ฐ ์ด๋ ๋๋ผ๋ ๊ฒ์ด ํ๋์ ๋๋ค. ํ์์ ์์ง์์ ์ ์ ํ๋ฐํด์ง๊ณ ๊ฐํด์ง๋ฉด์ ์ฒญ์ง๊ธฐ ๋ฑ์ผ๋ก ์ฌ์ฅ๋ฐ๋์๋ฆฌ๋ฅผ ๋ค์ ์ ์์ต๋๋ค. ์ฐ๋ชจ๊ฐ ์ง์ ๋ค์ ์ ๋ ์์ง๋ง ์ง์ ๋ค์ด๋ณด๋ฉด ๋ฝ๊ธ๋ฝ๊ธ ๊ณต๊ธฐ๋ฐฉ์ธ ์๋ฆฌ์ฒ๋ผ ๋ค๋ฆฌ๋๊ฒ๋ค์ด ํ๋์ด๋ผ๊ณ ํฉ๋๋ค. ๋๋ชจ์ผ~ ๋ถ๋ฅด๋ฉด ๋ฝ๊ธ๋ฝ๊ธ ํ๋ฉฐ ์๋ฆฌ๋ก ๋ฐ์ํด์ฃผ๊ธฐ๋ ํฉ๋๋ค. ์ฐ๋ชจ๋ ๋ชธ์์ ์ง์ ๋๋ผ๊ธฐ์ ์์ง์ธ๋ค ๋ผ๊ณ ๋งํ.. 2017. 8. 6. ์ด์ 1 ยทยทยท 70 71 72 73 74 75 76 ยทยทยท 84 ๋ค์