티스토리 뷰

웹 코딩/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

« 2025/01 »
일	월	화	수	목	금	토
			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

글 보관함

💸원 and beyond

티스토리 뷰

사이즈에 따른 반응형 스타일링

사이즈에 따른 반응형 스타일링

'웹 코딩 > htmlL&css' 카테고리의 다른 글

티스토리툴바