๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๋‹ˆ๋ชจ๋„ค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.