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

css before1

CSS before&after ์ปจํ…์ธ  ์•ž๋’ค ์‚ฝ์ž… ์ฝ”๋”ฉ์„ ํ•˜๋‹ค๊ฐ€๋ณด๋ฉด ๊ฐ„ํ˜น html ๋ถ€๋ถ„์—์„œ ๋†“์น˜๊ฑฐ๋‚˜ ์ž์ฃผ ๋ฐ”๋€Œ์–ด์•ผํ•˜๋Š” ๋ถ€๋ถ„ ํ˜น์€ css๋‹จ์—์„œ ์ด๋ฏธ์ง€ ์ฒ˜๋ฆฌํ•ด์ฃผ๊ณ  ์‹ถ๊ฑฐ๋‚˜ ํ˜น์€ ์ฒ˜๋Ÿผ ์ˆœ์„œ์žˆ๋Š” ๋ฆฌ์ŠคํŠธ ํ˜•ํƒœ๋กœ ํ•  ๋•Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๋ถ€๋ถ„์„ html์—์„œ ์ถ”๊ฐ€ํ•˜๋Š”๊ฒŒ ์•„๋‹Œ css๋‹จ์—์„œ before,after ์†์„ฑ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. css์—์„œ ์–ด๋–ป๊ฒŒ ์ปจํ…์ธ ? ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ• ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด์ง€? ๊ฐ€๋Šฅํ•œ๊ฒƒ์ธ๊ฐ€? ๋ผ๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ content ์‚ฌ์šฉ๋งŒ์œผ๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋†“์นœ ํ…์ŠคํŠธ ์ด๋ฏธ์ง€ ์ˆซ์ž ๋“ฑ์„ ์‰ฝ๊ฒŒ ์ถ”๊ฐ€ ํ•  ์ˆ˜์žˆ๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•˜๊ฒŒ ํ…์ŠคํŠธ๋กœ๋งŒ ํ‘œํ˜„ํ•˜์ž๋ฉด [before][ํ•ด๋‹น์ปจํ…์ธ ][after] ์ด๋ ‡๊ฒŒ ๋ถ™์—ฌ์ง€๋Š”๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด์„œ ์ถ”๊ฐ€์„ค๋ช…์„ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. html ์ผ์š”์ผ css p {width:200px; padding:10px; background:#c.. 2017. 8. 13.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”