4(media query)

3952 단어 CSSmedia queryCSS

media query

media query 는 웹 페이지의 내용이 모니터, 스마트폰 또는 태블릿과 같은 화면에서 페이지가 화면에 맞게 조정될 수 있도록

@media

min-width, max-width 를 사용하여 화면 가로 사이즈에 따라 조정될 수 있도록 설정합니다.
ex) min-width: 800px;, max-width: 800px;

코드

  <style>
    div {
      border: 5px solid green;
      font-size: 60px;
    }    
    @media(max-width: 800px) {
      div {
        display: none;
      }
    }
  </style>
<body>
  <div>
    Responsive
  </div>

결과

화면 가로 사이즈가 800px 이하일 경우 display: none으로 설정했기 때문에 화면에 아무것도 나타나지 않습니다.

화면 가로 사이즈가 800px 이상이라면 div tag의 값이 화면에 나타나게 됩니다.

media query 사용하기

나머지 코드들은 냅두면서 화면 가로사이즈가 800px 이하일 경우(max-width:800px) 화면을 보기 편하게 변경해주는 작업을 진행합니다.

코드

@media(max-width:800px) {
  #grid {
    display: block;        
  } 
  ol {
    border-right: none;
  }  
  h1 {
    border-bottom: none;
  }
}

결과

화면 가로 사이즈 800px 이상일 경우

화면 가로 사이즈 800px 이하일 경우

link tag

<link rel="stylesheet" href="style.css">

css 파일을 만들어서 html 파일과 연결하게 되면 여러개의 html 페이지를 한꺼번에 수정이 가능하여 유용하게 사용할 수 있습니다.

rel 뜻?

relationship 의 약자로 현재 문서와 링크되어야하는 자원과 연결해주는 속성(attribute)이다.

참고 및 출처: https://opentutorials.org/course/3086/18323
https://www.techopedia.com/definition/30449/media-query-responsive-web-design
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel

[백준] 11053번 가장 긴 증가하는 부분 수열 - Python
3(grid)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage