ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ

์›น ์ฝ”๋”ฉ/htmlL&css

์‚ฌ์ด์ฆˆ์— ๋”ฐ๋ฅธ ๋ฐ˜์‘ํ˜• ์Šคํƒ€์ผ๋ง

nopinokio 2015. 3. 4. 00:40

์‚ฌ์ด์ฆˆ์— ๋”ฐ๋ฅธ ๋ฐ˜์‘ํ˜• ์Šคํƒ€์ผ๋ง


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>responsive3</title>
<style>
    .box {
        width: 25%;
        height: 300px;
        background: orange;
        float: left;
    }
     
    @media (min-width: 401px) and (max-width: 800px) {
        .box {
            width: 50%;
        }
    }
     
    @media (max-width: 400px) {
        .box {
            width: 100%;
        }
    }
     
</style>
</head>
 
<body>
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
</body>
</html>


์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋™์ผ์กฐ๊ฑด

'์›น ์ฝ”๋”ฉ > htmlL&css' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[CSS + jq] input file css ์Šคํƒ€์ผ ์กฐ์ •  (0) 2015.03.08
๊ฐ„๋‹จํ•œ ๋ ˆ์ด์–ดํŒ์—… ์†Œ์Šค [์›€์ง์ž„X]  (0) 2015.03.04
CSS : ๋ฐ˜์‘ํ˜• ์›น(Responsive Web)  (0) 2015.03.04
[๊ธ€๊ผด] ์—…๋กœ๋“œ ์•ˆํ•˜๊ณ  ๋‚˜๋ˆ”๊ณ ๋”• ๋‚˜๋ˆ”๊ณ ๋”• ์›นํฐํŠธ ์ ์šฉํ•˜๊ธฐ  (0) 2014.08.11
[๊ธ€๊ผด]๋‚˜๋ˆ”๋ฐ”๋ฅธ๊ณ ๋”• ์›นํฐํŠธ๋กœ ์‚ฌ์šฉ๋‚˜๋ˆ”๋ฐ”๋ฅธ๊ณ ๋”• ์›นํฐํŠธ๋กœ ์‚ฌ์šฉ  (0) 2014.08.11
๊ณต์œ ํ•˜๊ธฐ ๋งํฌ
๋Œ“๊ธ€
๊ณต์ง€์‚ฌํ•ญ
์ตœ๊ทผ์— ์˜ฌ๋ผ์˜จ ๊ธ€
์ตœ๊ทผ์— ๋‹ฌ๋ฆฐ ๋Œ“๊ธ€
Total
Today
Yesterday
๋งํฌ
TAG more
ยซ   2024/05   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
๊ธ€ ๋ณด๊ด€ํ•จ