티스토리 뷰

웹/HTML, CSS

[CSS]미디어 쿼리

cll179 2018. 1. 23. 14:01

미디어 쿼리

- @media(조건) { } : 조건에 부합하면 아래의 코드를 실행한다.
- max-width : 'n'px, 최소 가로가 'n'px 까지는 안의 코드 실행
- min-width : 'n'px, 최대 가로가 'n'px 까지는 안의 코드 실행
ex)

<style>
        div{
            border : 10px solid green;
            font-size: 60px;
        }
        @media(min-width : 800px) {/*최소 800px까지는 안의 코드 실행*/
            div{
                display:none;
            }
        }
</style>

 

<전체 코드>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html>
<head>
  <style>
    body{
      margin : 0;
    }
    h1{
      text-align : center;
      border-bottom : 1px solid gray;
      margin : 0;
      padding : 20px;
    }
    a{
      color : gray;
      text-decoration: none;
    }
    ol{/*ol 태그는 block level element 
        width 지정*/
      border-right : 1px solid gray;
      width : 100px;
      margin :0;
      padding : 20px;
    }
    #grid{
      display: grid;
      grid-template-columns: 150px 1fr;
    }
    #grid ol{
      padding-left : 33px;
    }
    #article{
      padding-left : 25px;
    }
    @media(max-width : 800px){
      #grid{
      display: block;
      }
      ol{/*ol 태그는 block level element 
        width 지정*/
      border-right : none;
      }
      h1{
      border-bottom :none;
      }
    }
  </style>
  <title>WEB1 - CSS</title>
  <meta charset="utf-8">
</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.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[2]
 
CSS is designed primarily to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML 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 makes it possible 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. It can also display the web page differently depending on the screen size or viewing device. Readers can also specify a different style sheet, such as a CSS file stored on their own computer, to override the one the author specified.
  </p>
  </div>
  </div>
</body>
<html>
 
 cs
저작자표시 비영리 변경금지

'웹 > HTML, CSS' 카테고리의 다른 글

[HTML,CSS]position 레이아웃  (0) 2018.05.26
[HTML,CSS]float 레이아웃  (0) 2018.05.22
[CSS]그리드  (1) 2018.01.23
[CSS]박스 모델  (0) 2018.01.22
[HTML/CSS]CSS 문법, 선택자  (0) 2018.01.08
댓글