ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 반응형 웹이란
      CSS 2023. 6. 22. 14:50

      모바일 기기와 웹 디자인

       

      반응형 웹 디자인

      웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법

      반응형 웹 디자인의 장단점

      장점

      모든 스마트 기기에 접속 가능

      단점

      반응형 웹 기술이 최신 웹 표준인 CSS3의 일부

       

      뷰포트(viewport) : 실제 내용이 표시되는 영역

       

      가변 그리드 레이아웃

       

      그리드 시스템

      화면을 여러 개의 칼럼으로 나누어, 필요할 때마다 칼럼들을 묶어 배치하는 방법

      고정 그리드 레이아웃일 경우

      -레이아웃 고정 (화면 너비가 좁아질 경우 내용의 일부가 가려질 수 있음)

       

      예제) 고정 그리드 레이아웃

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper{
            width: 960px;
            margin: 0 auto;
        }
        header{
            width: 960px;
            height: 120px;
            background-color: #066cfa;
        }
        .header-text{
            font-size: 40px;
            color: white;
            text-align: center;
            line-height: 120px;
        }
        .content{
            width: 600px;
            height: 400px;
            padding: 15px;
            background-color: #ffd800;
            float: left;
        }
        .right-side{
            width: 300px;
            height: 400px;
            padding: 15px;
            background-color: #00ff90;
            float: right;
        }
        footer{
            height: 120px;
            background-color: #c3590a;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1 class="header-text">고정 그리드 레이아웃</h1>
        </header>
        <section class="content">
<h4>본문</h4>
        </section>
        <aside class="right-side">
            <h4>사이드바</h4>
        </aside>
        <footer>
            <h4>푸터</h4>
        </footer>
    </div>
</body>
</html>

       

      가변 그리드 레이아웃 만들기

      -전체를 감싸는 요소의 너비를 %로 변환

       

      예제) 가변 그리드 레이아웃 (화면 크기에 따라 늘어남 %)

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper{
            /* width: 960px; */
            width: 96%;
            margin: 0 auto;
        }
        header{
            /* width: 960px; */
            height: 120px;
            background-color: #066cfa;
        }
        .header-text{
            font-size: 40px;
            color: white;
            text-align: center;
            line-height: 120px;
        }
        .content{
            /* width: 600px; */
            width: 62.5%;
            height: 400px;
            /* padding: 15px; */
            padding: 1.5625%;
            background-color: #ffd800;
            float: left;
        }
        .right-side{
            /* width: 300px; */
            width: 31.25%;
            height: 400px;
            /* padding: 15px; */
            padding: 1.5625%;
            background-color: #00ff90;
            float: right;
        }
        footer{
            height: 120px;
            background-color: #c3590a;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1 class="header-text">가변 그리드 레이아웃</h1>
        </header>
        <section class="content">
<h4>본문</h4>
        </section>
        <aside class="right-side">
            <h4>사이드바</h4>
        </aside>
        <footer>
            <h4>푸터</h4>
        </footer>
    </div>
</body>
</html>

       

      가변요소

       

      가변이미지

      브라우저 창의 너비가 변하더라도 이미지 너비 값은 변하지 않음

      1. CSS를 이용한 방법 - 이미지를 감싸고 있는 부모 요소만큼만 커지거나 작아지도록 max-width 속성 값을 100%로 지정

      예제) 가변 이미지

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper{
            /* width: 960px; */
            width: 96%;
            margin: 0 auto;
        }
        header{
            /* width: 960px; */
            height: 120px;
            background-color: #066cfa;
        }
        .header-text{
            font-size: 40px;
            color: white;
            text-align: center;
            line-height: 120px;
        }
        .content{
            /* width: 600px; */
            width: 62.5%;
            height: 400px;
            /* padding: 15px; */
            padding: 1.5625%;
            background-color: #ffd800;
            float: left;
        }
        .right-side{
            /* width: 300px; */
            width: 31.25%;
            height: 400px;
            /* padding: 15px; */
            padding: 1.5625%;
            background-color: #00ff90;
            float: right;
        }
        footer{
            height: 120px;
            background-color: #c3590a;
            clear: both;
        }
        .content img{
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1 class="header-text">가변 그리드 레이아웃</h1>
        </header>
        <section class="content">
    <h4>본문</h4>
    <img src="images/fireworks.png">
        </section>
        <aside class="right-side">
            <h4>사이드바</h4>
        </aside>
        <footer>
            <h4>푸터</h4>
        </footer>
    </div>
</body>
</html>

       

      2) <picture> 태그와 <source> 태그

       

      예제) 가변 이미지 (따로 크기 줘서 화면크기에 따라 크기가 다른 사진이 나옴)

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <picture>
        <source srcset="images/shop-large.jpg" media="(min-width:1024px)">
        <source srcset="images/shop-medium.jpg" media="(min-width:768px)">
        <source srcset="images/shop-small.jpg" media="(min-width:320px)">
        <img src="images/shop.jpg" style="width: 100%;">
    </picture>
</body>
</html>

       

      가변 비디오

      -CSS를 사용해 max-width 속성을 100%로 지정

       

      예제) 가변 비디오 (동영상이 부모 요소만큼 커지거나 작아짐)

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video{
            max-width: 100%;
        }
    </style>
</head>
<body>
    <video src="media/cars.mp4" controls></video>
</body>
</html>

       

       

       

       

       

       

       

       

       

       

       

       

       

      'CSS' 카테고리의 다른 글

      플렉스 박스 레이아웃  (0) 2023.06.22
      미디워 쿼리  (0) 2023.06.22
      트랜지션과 애니메이션  (0) 2023.06.22
      CSS3와 애니메이션  (0) 2023.06.22
      다재다능한 CSS3 선택자  (0) 2023.06.22

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바