![](https://blog.kakaocdn.net/dn/ejw8eB/btrGC7K1M7r/hFJeyYTWc2gzTKOH4GIKL1/img.jpg)
์ง๋๋ฒ ์๊ฐํด๋๋ฆฐ html์ฝ๋์ ์ด๋ฒ์ css๋ฅผ ์ ํ์ผ๋ก์จ ์กฐ๊ธ ๋ ์์ ์ฌ์ดํธ๋ก ๋ง๋ค์ด๋ณผํ ๋ฐ์!
์ฐ์ responsible page๋ก ๋ง๋ค๊ธฐ ์ํ์ฌ ์ถ๊ฐํ ์ฝ๋๋ฅผ ์ดํด๋ณผ๊ฒ์
/* Responsive CSS */
@media (max-width: 1080px){
.image{
flex: 100%;
max-width: 480px;
}
}
@media (max-width: 400px){
.image .details p{
font-size: 12px;
}
.more .read-more, .more .icon-links a i{
font-size: 18px;
}
}
screen width์ ๋ฐ๋ผ ์ธ๊ฐ์ ๋ฒ์ ์ผ๋ก ๋๋ฉ๋๋ค.
1080์ ๊ธฐ์ค์ผ๋ก ๋ ํด ๋ grid๊ฐ 3๊ฐ์ฉ ๋๋์ง๋ง, ์์ ๋ 1์ค๋ก ๋ฐ๋๋๋ค.
![](https://blog.kakaocdn.net/dn/bu36gH/btrGARIVJQn/aYjzNRhZ2kwIBF2E6Z0Bc1/img.png)
![](https://blog.kakaocdn.net/dn/cG001i/btrGB3vozGA/YkvpBITbtd0pCcJY85W7OK/img.png)
๋ํ 400๋ณด๋ค ์์์ง ๊ฒฝ์ฐ(๋ชจ๋ฐ์ผ ํ๊ฒฝ์์)๋ ํฐํธ์ ํฌ๊ธฐ ๋ํ ์ค์ด๋ญ๋๋ค.
![](https://blog.kakaocdn.net/dn/xrv7z/btrGEmHHP2p/xc6kpkkvkMBkatN4WlZHPk/img.png)
๋ฐ์ํ
๋๊ธ