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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Responsive Web Design- Images ======
<WRAP left notice 80%>
  * description : CSS Responsive Web Design- Images
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-06-29
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of this article=====
[[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>%%'' 요소를 정의해야 합니다.\\












 
{{tag>오션, Responsive Web Design - Images}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
