개발새발 블로그

[CSS] 반응형 웹

컴퓨터/CSS

<HTML>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="resources/css/19.0.common.css" rel="stylesheet">
    <!-- 
    <link href="resources/css/19.1.mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
    <link href="resources/css/19.2.tablet.css" rel="stylesheet" media="screen and (min-width: 601px) and (max-width: 999px)">
    <link href="resources/css/19.3.pc.css" rel="stylesheet" media="screen and (min-width: 1000px)"> 
    -->
    <link href="resources/css/19.media.css" rel="stylesheet">
    <title>반응형 웹</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1 class="header-text">반응형 웹</h1>
        </header>
        <section class="content">
            <h4>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus voluptatem voluptatibus adipisci at sunt ullam aliquam officia nisi, earum enim illo in tempore harum, quidem architecto necessitatibus excepturi tempora laudantium!
            Eos culpa ullam quaerat cum pariatur inventore velit vel. Quaerat, sequi sunt nostrum, eveniet officia magni mollitia perferendis totam tempora praesentium quam ducimus, quas illo sit? Non quibusdam asperiores quis.</h4>
        </section>
        <aside class="right-side">
            <h4>사이드바</h4>
        </aside>
        <footer>
            <p>푸터</p>
        </footer>
    </div>
</body>
</html>

 

<CSS, COMMON>

header {
    background-color: darkolivegreen;
    text-align: center;
}
header > h1 {
    color: white;
}
section, aside {
    padding: 5px;
}
footer {
    padding: 5px;
    background-color: darkolivegreen;
    text-align: center;
    color:  white;
}

 

<CSS, MOBILE>

/* 전체 */
#wrapper {
    width: 100%;
}

/* header */
header {
    height: 60px;
    line-height: 60px;
}

/* 본문 */
section {
    height: 300px;
    background-color: cornsilk;
}

/* aside */
aside {
    background-color: cadetblue;
}

/* footer */
footer {
    height: 50px;
}

 

<CSS, TABLET>

/* 전체 */
#wrapper {
    width: 100%;
}

/* header */
header {
    height: 80px;
    line-height: 80px;
}

/* 본문 */
section {
    float: left;
    width: 65%;
    height: 600px;
    background-color: aquamarine;
}

/* aside */
aside {
    float: right;
    width: 30%;
    height: 600px;
    background-color: yellowgreen;
}

/* footer */
footer {
    clear: both;
    height: 50px;
}

 

<CSS, PC>

/* 전체 */
#wrapper {
    width: 100%;
}

/* header */
header {
    height: 80px;
    line-height: 80px;
}

/* 본문 */
section {
    float: right;
    width: 70%;
    height: 600px;
    background-color: cadetblue;
}

/* aside */
aside {
    float: left;
    width: 25%;
    height: 600px;
    background-color: cornflowerblue;
}

/* footer */
footer {
    clear: both;
    height: 50px;
}

 

<MEDIA>

/* 
    * css 미디어 쿼리
        : 미디어 쿼리는 단말기 유형, 화면 해상도, 뷰포트 너비 등에 따라 style을 적용 할 때 사용
    * 미디어 유형(단말기 유형)
        - all : 모든 장치
        - print : 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서
        - screen : 스크린 화면
        - speech : 음성 합성 장치

    * 논리 연산자
        - and
        - not
        - only
        - 쉼표(,) : or을 의미
 */
 @media screen and (max-width:600px) {
        /* 전체 */
    #wrapper {
        width: 100%;
    }

    /* header */
    header {
        height: 60px;
        line-height: 60px;
    }

    /* 본문 */
    section {
        height: 300px;
        background-color: cornsilk;
    }

    /* aside */
    aside {
        background-color: cadetblue;
    }

    /* footer */
    footer {
        height: 50px;
    }

 }
@media screen and (min-width: 601px) and (max-width: 999px) {
        /* 전체 */
    #wrapper {
        width: 100%;
    }

    /* header */
    header {
        height: 80px;
        line-height: 80px;
    }

    /* 본문 */
    section {
        float: left;
        width: 65%;
        height: 600px;
        background-color: aquamarine;
    }

    /* aside */
    aside {
        float: right;
        width: 30%;
        height: 600px;
        background-color: yellowgreen;
    }

    /* footer */
    footer {
        clear: both;
        height: 50px;
    }
}
@media screen and (min-width: 1000px) {
        /* 전체 */
    #wrapper {
        width: 100%;
    }

    /* header */
    header {
        height: 80px;
        line-height: 80px;
    }

    /* 본문 */
    section {
        float: right;
        width: 70%;
        height: 600px;
        background-color: cadetblue;
    }

    /* aside */
    aside {
        float: left;
        width: 25%;
        height: 600px;
        background-color: cornflowerblue;
    }

    /* footer */
    footer {
        clear: both;
        height: 50px;
    }
}

 

<MOBILE>

 

<TABLET>

 

<PC>

저작자표시 비영리 변경금지

'컴퓨터 > CSS' 카테고리의 다른 글

[CSS] 고정, 가변 layout  (0) 2024.07.02
[CSS] flex  (0) 2024.07.02
[CSS] semantic 태그  (0) 2024.06.30
[CSS] 배치 관련 스타일  (0) 2024.06.30
[CSS] 요소 배치 스타일  (0) 2024.06.30
,

티스토리툴바