TIL-CSS(media queries)

22.04.24

👚 반응형 디자인과 미디어쿼리 소개

화면의 크기에 따라 웹페이지의 각 요소들이 최적화된 크기로 바뀌는 페이지가 '반응형디자인(responsive web)' 이라고 부릅니다.
화면의 크기에 따라 보였다, 보이지 않았다 하는 페이지를 만듭니다.

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

기준점이 되는 숫자에 따라 반응하게 하려면 우선 보는 화면의 크기를 알아야 하는데, 이것의 대해서는 웹페이지의 마우스 오른쪽 버튼 클릭하면 검사를 통해서 알 수가 있습니다.

화면을 줄이고 늘이면 우측상단에 사이즈가 표기됩니다.
구성하고자 하는 상황은 스크린의 크기가 800px보다 크다면, div 자체를 보이지 않게 하고 싶으면
이 때, 미디어 쿼리를 사용해야하는데 이렇게 사용할 수가 있습니다.

@midia(min-width:800px) {
div{
display:none;
}
}

저런 코드를 사용한다면, 사진과 같이 width가 757px 일때는 생성한 div가 정상적으로 비추어집니다.

800px가 넘어가면 "display:none;을 통하여 보여지지 않는다는 걸 볼 수 있습니다.
반대로, 800px보다 크게 보여질라면 'max'를 사용하면 됩니다.

@media(max-width:800px) {
div{
display:none;
}
}

🩳 CSS코드의 재사용

많은 양의 html파일에 동일한 style 코드가 중복될 때, 중복되는 코드를 별도의 css파일에 저장한 후 불러오는 방법

🎀 중복되는 style 코드

<style>
  body{
    margin:0;
  }
  a {
    color:black;
    text-decoration: none;
  }
  h1 {
    font-size:45px;
    text-align: center;
    border-bottom:1px solid gray;
    margin:0;
    padding:20px;
  }
  ol{
    border-right:1px solid gray;
    width:100px;
    margin:0;
    padding:20px;
  }
  #grid{
    display: grid;
    grid-template-columns: 150px 1fr;
  }
  #grid ol{
    padding-left:33px;
  }
  #grid #article{
    padding-left:25px;
  }
  @media(max-width:800px){
    #grid{
      display: block;
    }
    ol{
    border-right:none;
  }
  h1{
    border-bottom:none;
  }
}
  </style>

👗 중복되는 코드를 css파일로 저장 후 불러오는 방법

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

네트워크적인 측면에서는 css파일을 따로 만드는 것이 비효율적이지만, 캐싱의 측면에서는 효율적이라고 볼 수 있습니다.