문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » responsive_web_design_-_images
wiki:css:css_note:responsive_web_design_-_images

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판 		이전 판
wiki:css:css_note:responsive_web_design_-_images [2021/06/29 08:02]
emblim98 만듦 		wiki:css:css_note:responsive_web_design_-_images [2023/01/13 18:44] (현재)
줄 10: 줄 10:
 =====The source of this article===== =====The source of this article=====
 [[https://www.w3schools.com/css/css_rwd_images.asp|CSS Responsive Web Design - images]]\\ [[https://www.w3schools.com/css/css_rwd_images.asp|CSS Responsive Web Design - images]]\\
 +
 +
 +=====Using The width Property=====
 +width 속성이 백분율로 설정되고 height 속성이 "auto"로 설정되어 있으면 이미지가 반응형으로 확대 및 축소됩니다.\\
 +
 +<code css>
 +<!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>WidthPercentage And HeightAuto</title>
 +    <style>
 +        img {
 +            width: 100%;
 +            height: auto;
 +        }
 +    </style>
 +</head>
 +<body>
 +    
 +    <img src="img_chania.jpg" width="460" height="345" alt="Chania Image">
 +    <p>Resize the browser window to see how the imgae will scale.</p>
 +
 +</body>
 +</html>
 +</code>
 +\\
 +위의 예에서 이미지는 원래 크기보다 크게 확대될 수 있습니다.\\ 
 +대부분의 경우 더 나은 해결 방법은 대신 max-width 속성을 사용하는 것입니다.\\
 +
 +=====Using The max-width Property=====
 +''%%max-width%%'' 속성이 100%로 설정된 경우, 필요한 경우 이미지가 축소되지만 원래 크기보다 크게 확대되지는 않습니다.\\
 +
 +<code css>
 +<!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>WidthPercentage And HeightAuto</title>
 +    <style>
 +        img {
 +            max-width: 100%;
 +            height: auto;
 +        }
 +    </style>
 +</head>
 +<body>
 +    
 +    <img src="img_chania.jpg" width="460" height="345" alt="Chania Image">
 +    <p>Resize the browser window to see how the imgae will scale 
 +    when the width is less than 460px.</p>
 +
 +</body>
 +</html>
 +</code>
 +
 +=====Add an Image to The Example Web Page=====
 +<code css>
 +<!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>Add an Image to The Example Web Page</title>
 +    <style>
 +        * {
 +            box-sizing: border-box;
 +        }
 +
 +        img {
 +            width: 100%;
 +            height: auto;
 +        }
 +
 +        .row::after {
 +            content:"";
 +            clear: both;
 +            display: table;
 +        }
 +
 +        [class*="col-"] {
 +            float: left;
 +            padding: 15px;
 +            width: 100%;
 +        }
 +
 +        @media only screen and (min-width: 600px) {
 +            .col-s-1 {width: 8.33%;}
 +            .col-s-2 {width: 16.66%;}
 +            .col-s-3 {width: 25%;}
 +            .col-s-4 {width: 33.33%;}
 +            .col-s-5 {width: 41.66%;}
 +            .col-s-6 {width: 50%;}
 +            .col-s-7 {width: 58.33%;}
 +            .col-s-8 {width: 66.66%}
 +            .col-s-9 {width: 75%;}
 +            .col-s-10 {width: 83.33%;}
 +            .col-s-11 {width: 91.66%;}
 +            .col-s-12 {width: 100%;}
 +        }
 +
 +        @media only screen and (min-width: 768px) {
 +            .col-1 {width: 8.33%;}
 +            .col-2 {width: 16.66%;}
 +            .col-3 {width: 25%;}
 +            .col-4 {width: 33.33%;}
 +            .col-5 {width: 41.66%;}
 +            .col-6 {width: 50%;}
 +            .col-7 {width: 58.33%;}
 +            .col-8 {width: 66.66%}
 +            .col-9 {width: 75%;}
 +            .col-10 {width: 83.33%;}
 +            .col-11 {width: 91.66%;}
 +            .col-12 {width: 100%;}
 +        }
 +
 +        html {
 +            font-family: "Lucida Sans", sans-serif;
 +        }
 +
 +        .header {
 +            background-color: #9933cc;
 +            color:#ffffff;
 +            padding: 15px;
 +        }
 +
 +        .menu ul {
 +            list-style-type: none;
 +            margin: 0;
 +            padding: 0;
 +        }
 +
 +        .menu li {
 +            padding: 8px;
 +            margin-bottom: 7px;
 +            background-color: #33b5e5;
 +            color: #ffffff;
 +            box-shadow: 1px 3px rgba(0, 0, 0, 0.12) 0 1px 2px rgba(0, 0, 0, 0.24);
 +        }
 +
 +        .menu li:hover {
 +            background-color: #0099cc;
 +        }
 +
 +        .aside {
 +            background-color: #33b5e5;
 +            padding: 15px;
 +            color: #ffffff;
 +            text-align: center;
 +            font-size: 14px;
 +            box-shadow: 1px 3px rgba(0, 0, 0, 0.12) 0 1px 2px rgba(0, 0, 0, 0.24);
 +        }
 +
 +        .footer {
 +            background-color: #0099cc;
 +            color: #ffffff;
 +            text-align: center;
 +            font-size: 12px;
 +            padding: 15px;
 +        }
 +    </style>
 +</head>
 +<body>
 +    <div class="header">
 +        <h1>Chania</h1>
 +    </div>
 +
 +    <div class="row">
 +        <div class="col-3 col-s-3 menu">
 +            <ul>
 +                <li>The Flight</li>
 +                <li>The City</li>
 +                <li>The Island</li>
 +                <li>the Food</li>
 +            </ul>
 +        </div>
 +
 +        <div class="col-6 col-s-9">
 +            <h1>The City</h1>
 +            <p>Chania is the capital of the Chania regionon the island of Crete. 
 +            The city can be divided in two parts, the old townand the modern city.</p>
 +            <img src="/img_chania.jpg" alt="">
 +        </div>
 +
 +        <div class="col-3 col-s-12">
 +            <div class="aside">
 +                <h2>What?</h2>
 +                <p>Chania is a city on the island of Crete.</p>
 +                <h2>Where?</h2>
 +                <p>Crete is a Greek island in the Mediterranean Sea.</p>
 +                <h2>How?</h2>
 +                <p>You can reach Chania airport from all over Europe.</p>
 +            </div>
 +        </div>
 +    </div>
 +
 +    <div class="footer">
 +        <p>Resize the browser window to see how the content respond to the resizing.</p>
 +    </div>
 +</body>
 +</html>
 +</code>
 +
 +=====Background Images=====
 +배경 이미지는 크기 조정(resizing) 및 크기 조정(scaling)에도 반응할 수 있습니다.\\
 +\\
 +여기에서는 세 가지 방법을 보겠습니다.\\
 +\\
 +1. ''%%background-size%%'' 속성이 "contain"으로 설정되어 있으면,\\ 
 +배경 이미지의 크기가 조절되고 콘텐츠 영역에 맞게 조정됩니다.\\ 
 +그러나 이미지는 자체의 종횡비(aspect ratio: 이미지의 너비와 높이 사이의 비례 관계)를 유지합니다.\\
 +
 +<code css>
 +<!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>Background Images</title>
 +    <style>
 +        div {
 +            border: 2px solid darkblue;
 +            width: 100%;
 +            height: 400px;
 +            background-image: url(img_flowers.jpg);
 +            background-repeat: no-repeat;
 +            background-size: contain;
 +        }
 +    </style>
 +</head>
 +<body>
 +    
 +    <p>Resize the browser window to see the effect.</p>
 +
 +    <div></div>
 +</body>
 +</html>
 +</code>
 +\\
 +2. ''%%background-size%%'' 속성이 "100% 100%"로 설정되면,\\ 
 +배경 이미지가 전체 콘텐츠 영역을 덮도록 늘어납니다.\\
 +
 +<code css>
 +<!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>Background Images</title>
 +    <style>
 +        div {
 +            width: 100%;
 +            height: 400px;
 +            background-image: url(img_flowers.jpg);
 +            background-size: 100% 100%;
 +            border: 2px solid darkblue;
 +        }
 +    </style>
 +</head>
 +<body>
 +    
 +    <p>Resize the browser window to see the effect.</p>
 +
 +    <div></div>
 +</body>
 +</html>
 +</code>
 +\\
 +3. ''%%background-size%%'' 속성이 "cover"로 설정되어 있으면,\\
 +배경 이미지가 전체 콘텐츠 영역을 덮도록 크기가 조정됩니다.\\ 
 +"cover"값은 종횡비를 유지하고, 배경 이미지의 일부가 잘릴 수 있습니다.\\
 +
 +<code css>
 +<!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>Background Images</title>
 +    <style>
 +        div {
 +            width: 100%;
 +            height: 400px;
 +            background-image: url(img_flowers.jpg);
 +            background-size: cover;
 +            border: 2px solid darkblue;
 +        }
 +    </style>
 +</head>
 +<body>
 +    
 +    <p>Resize the browser window to see the effect.</p>
 +
 +    <div></div>
 +</body>
 +</html>
 +</code>
 +
 +=====DifferentImages for Different Devices=====
 +큰 이미지는 큰 컴퓨터 화면에서는 완벽할 수 있지만, 작은 장치에서는 쓸모가 없습니다.\\ 
 +어쨌든 축소해야 할 때 왜 큰 이미지를 로드합니까?\\ 
 +부하를 줄이거나 다른 이유로, 미디어 쿼리를 사용하여 다양한 장치들에서 다른 이미지들로 표시할 수 있습니다.\\
 +\\
 +다음은 다양한 장치들에서 표시될 하나의 큰 이미지와 하나의 더 작은 이미지입니다.\\
 +
 +<code css>
 +<!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>
 +        /* For width smaller than 400px: */
 +        /* 너비 399px이하로 표시되는 이미지 */
 +        body {
 +            background-repeat:no-repeat;
 +            background-image: url(./img_smallflower.jpg);
 +        }
 +
 +        /* For width 400px and larger: */
 +        /* 400px 너비까지 표시되는 이미지 */
 +        @media only screen and (min-width:400px) {
 +            body {
 +                background-image: url(./img_flowers.jpg);
 +            }
 +        }
 +    </style>
 +</head>
 +<body>
 +    
 +    <p style="margin-top: 360px;">
 +       Resize the browser width and the background image will change at 400px.
 +    </p>
 +</body>
 +</html>
 +</code>
 +\\
 +브라우저 너비 대신 장치의 너비를 확인하는 ''%%min-width%%'' 대신,\\ 
 +미디어 쿼리 ''%%min-device-width%%''를 사용할 수 있습니다.\\ 
 +그러면 브라우저 창 크기를 조정할 때 이미지가 변경되지 않습니다.\\
 +\\
 +<code css>
 +    <style>
 +        /* For width smaller than 400px: */
 +        /* 너비 399px이하로 표시되는 이미지 */
 +        body {
 +            background-repeat:no-repeat;
 +            background-image: url(./img_smallflower.jpg);
 +        }
 +
 +        /* For width 400px and larger: */
 +        /* 400px 너비까지 표시되는 이미지 */
 +        @media only screen and (min-device-width:400px) {
 +            body {
 +                background-image: url(./img_flowers.jpg);
 +            }
 +        }
 +    </style>
 +</code>
 +
 +=====The HTML <picture> Element=====
 +%%HTML%% ''%%<picture>%%'' 요소는 웹 개발자에게 이미지 자원을 지정하는 데 더 많은 유연성을 제공합니다.\\
 +\\
 +''%%<picture>%%'' 요소의 가장 일반적인 용도는 반응형 디자인에 사용되는 이미지입니다.\\ 
 +뷰포트 너비에 따라 확대 또는 축소되는 하나의 이미지를 사용하는 대신,\\ 
 +브라우저 뷰포트를 더 멋지게 채우도록 여러 이미지를 디자인할 수 있습니다.\\
 +\\
 +''%%<picture>%%'' 요소는 ''%%<video>%%'' 및 ''%%<audio>%%'' 요소와 유사하게 작동합니다.\\ 
 +다른 소스를 설정하고, 기본 설정에 맞는 첫 번째 소스가 사용되는 소스입니다.\\
 +
 +<code html>
 +<body>
 +    
 +    <picture>
 +        <source srcset="./img_smallflower.jpg" media="(max-width: 400px)">
 +        <source srcset="./img_flowers.jpg">
 +        <img src="./img_flowers.jpg" alt="Flowers" style="width:auto;">
 +
 +        <p>
 +            Resize the browser width and the background image will change at 400px
 +        </p>
 +    </picture>
 +    
 +</body>
 +</code>
 +\\
 +''%%srcset%%'' 속성은 필수이며, 이미지의 소스를 정의합니다.\\
 +\\
 +''%%media%%'' 속성은 선택 사항이며, [[https://www.w3schools.com/cssref/css3_pr_mediaquery.asp|CSS @media rule]]에서 찾은 미디어 쿼리를 허용합니다.\\
 +\\
 +또한 ''%%<picture>%%'' 요소를 지원하지 않는 브라우저에 대해 ''%%<img>%%'' 요소를 정의해야 합니다.\\
 +
 +
 +
 +
 +
  
  
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/responsive_web_design_-_images.1624921375.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki