[CSS]CSS๋กœ ์›ํ•˜๋Š” ๋ชจ์–‘์œผ๋กœ ์ด๋ฏธ์ง€ ์ž๋ฅด๊ธฐ

CSS๋ฅผ ํ•˜๋‹ค๋ณด๋ฉด ์›ํ•˜๋Š” ๋ชจ์–‘๋Œ€๋กœ ์‚ฌ์ง„์„ ์ž๋ฅด๊ณ  ์‹ถ์–ด์ง‘๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ width ๋˜๋Š” height๋ฅผ ์กฐ์ •ํ•˜๋ฉด ์‚ฌ์ง„์ด ์ฐŒ๊ทธ๋Ÿฌ๋“ค๊ธฐ๋งŒ ํ•˜์ง€ ์›ํ•˜๋Š”๊ฒƒ ์ฒ˜๋Ÿผ ๋š ์ž˜๋ฆฌ์ง€๊ฐ€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์˜ค๋Š˜์€ ์›ํ•˜๋Š” ๋ชจ์–‘๋Œ€๋กœ ์‚ฌ์ง„ ์ž๋ฅด๊ธฐ๋ฅผ ํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. 1. ์‚ฌ์ง„ ๊ฐ€์ ธ์˜ค๊ธฐ /* ์‚ฌ์šฉํ•  ์ด๋ฏธ์ง€ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ */ 2. width ์ค„์ด๊ธฐ ๋จผ์ € ๊ฐ€๋กœ๋ฅผ ๋ฐ˜์œผ๋กœ ๋š ์ž˜๋ผ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ 2000 x 1332 ์ด๋‹ˆ width๋ฅผ 1000์œผ๋กœ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. .cropping{ max-width: 1000px; overflow: hidden; } .cropping img{ max-width: initial; } 3. ์›ํ•˜๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ์ค„์ด๊ธฐ ๊ทธ๋Ÿฐ๋ฐ ๋์ด ๊ทธ๋ƒฅ ์ž˜๋ผ๋‚˜๊ฐ€์„œ ๋ฏธ๊ด€์ƒ ๋ณ„๋กœ ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ฐ€๋กœ๊ฐ€ 1000์ธ ๊ฒƒ ๊นŒ์ง€๋Š” ์ข‹์€๋ฐ ์กฐ๊ธˆ ๊ฐ€..

CS/Web 2018. 1. 16. 01:02