오뚝이개발자

[CSS] CSS 기초 6(미디어 쿼리) 본문

Front-end/CSS

[CSS] CSS 기초 6(미디어 쿼리)

땅어 2020. 7. 10. 23:08
728x90
300x250

창의 크기에 따라 디자인 옵션을 다르게 주는 것을 반응형 웹이라 한다. PC에서 보는 화면과 태블릿, 모바일에서 보는 화면이 다르게 만드는 것이다. 이러한 기능은 미디어 쿼리를 사용해 구현이 가능하다.

예컨대, 다음과 같은 html 코드가 있다고 해보자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            font-size:60px;
            border:10px solid green;
        }
    </style>
</head>
<body>
    <div>
        Responsive
    </div>
</body>
</html>

이 때 창의 크기를 800px을 기준으로 그보다 작을 때만 Responsive라는 글자가 나오게 하고싶다면 아래와 같이 media 쿼리를 추가해주면 된다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            font-size:60px;
            border:10px solid green;
        }
        @media(min-width:800px){
            div{
                display:none;
            }
        }
    </style>
</head>
<body>
    <div>
        Responsive
    </div>
</body>
</html>

여기서 min-width:800px은 screen width>800px과 같은 뜻이다. "screen width가 800px보다 크면"이라는 말은 최소 800이라는 말과 동일하기 때문이다. 반대로, max-width:800px은 screen width<800px과 동일한 뜻이다. min을 "~까지는", max를 "~부터는"이라고 이해하면 쉽다. 참고로 창의 크기는 크롬 브라우저에서 F12를 눌러 개발자도구를 켠 뒤 창의 크기를 조절하면 우측 상단에 아래 사진과 같이 표시된다.

지금은 창의 크기가 748px이라 Responsive가 표기된다. 하지만 아래와 같이 800px보다 커지면 Responsive가 사라지는 것을 볼 수 있다.

 

이처럼 미디어 쿼리는 특정한 조건을 부여하여 반응형 웹을 만들 때 사용된다.

 

미디어 쿼리를 이용한 실습을 한 가지 더 해보자. 아래와 같은 html 코드가 있다고 해보자.

<!doctype html>
<html>
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-171104859-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-171104859-1');
    </script>
    <title>WEB1 - HTML</title>
    <meta charset="utf-8">
    <style>
        a {
            color:orange;
            text-decoration: none;
        }
        h1 {
            font-size: 45px;
            text-align: center;
            border-bottom:1px solid gray;
            margin:0px;
            padding:20px;
        }
        ol{
            border-right: 1px solid gray;
            width:100px;
            padding:20px;
            margin:0px;
        }
        body{
            margin:0px;
        }
        #grid{
            display: grid;
            grid-template-columns: 150px 1fr;
        }
        #grid ol{
            padding-left: 33px;
        }
        #article{
            padding-left: 25px;
        }
    </style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <div id="grid">
        <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>    
        </ol>
        <div id="article">
            <h2>CSS</h2>
            <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2]

                CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
                
                Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.[4]
                
                The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.
                
                The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.[5]
                
                In addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG, and XUL.
            </p>
        </div>
    </div>
</body>
</html>

그런데 창의 크기가 작아지면 글씨의 배열과 배치가 부자연스러워진다. 바로 아래와 같이 말이다.

이러한 문제점을 해결하기 위해 미디어 쿼리를 사용해보자. 최종목표는 창의 크기가 작아지면 1)CSS에 대한 설명 부분이 아래에 따로 오도록 하여 가독성을 높이고, 2)좌측 리스트의 우측 테두리를 없애고, 3)WEB 아래 테두리를 없앤다. 다음과 같이 미디어 쿼리를 사용하여 코드를 수정하면 된다.

 

728x90
300x250
저작자표시

'Front-end > CSS' 카테고리의 다른 글

[CSS] CSS 기초 7(CSS 코드의 재사용)  (0) 2020.07.10
[CSS] CSS 기초 5(div, span, 그리드)  (0) 2020.07.08
[CSS] CSS 기초 4(경계선, 박스모델 조절)  (0) 2020.07.08
[CSS] CSS 기초3(CSS 박스 모델)  (0) 2020.07.06
[CSS] CSS 기초2  (0) 2020.07.06
'Front-end/CSS' Related Articles more
Comments