🦁_21.11.11 TIL

Bori·2021년 11월 11일

멋쟁이사자처럼_프론트엔드 스쿨 1기

목록 보기

12/60

21년 11월 11일

📝 CSS

📎 Media queries

`Media queries`

특정 조건(단말기 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용되도록 만드는 기능

@media 논리연산자 미디어타입 논리연산자 (조건) 논리연산자 {
적용할 스타일
}

/* At the top level of your code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

<!DOCTYPE html>
<html lang="ko">
<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>미디어쿼리 기본</title>
    <style>
        /* mobile first!! bootstrap이 대표적 */
        body {
            margin: 0;
            background-color: tomato;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            box-sizing: border-box;
            border: 10px solid red;
            height: 500px;
            width: 100%;
            background-color: yellow;
        }

        .item {
            margin: 50px;
            width: 500px;
            background-color: sienna;
        }
        /* max니 1000px 이상이라고 오해하기 쉽지만, 1000px 이하일때 작동, 그러니 1000px일때까지!라고 이해하는 것이 좋음 */
        @media screen and (max-width:1000px) {
            body {
                background-color: green;
            }
            .container {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                box-sizing: border-box;
                border: 10px solid red;
                height: 800px;
                width: 100%;
                background-color: yellow;
            }

            .item {
                margin: 50px;
                width: 800px;
                background-color: sienna;
            }
        }

        @media screen and (max-width:500px) {
            body {
                background-color: violet;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ea illo eius architecto sed qui, incidunt corporis labore! Nobis nemo consequuntur commodi pariatur iure saepe dolorum neque tempore temporibus at!</div>
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ea illo eius architecto sed qui, incidunt corporis labore! Nobis nemo consequuntur commodi pariatur iure saepe dolorum neque tempore temporibus at!</div>
    </div>
</body>
</html>

미디어 쿼리 유형

all : 모든 장치
print : 인쇄 결과물 또는 인쇄 미리보기 화면에 표시하는 경우

<!DOCTYPE html>
<html lang="ko">
  <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>
    <link rel="stylesheet" href="reset.css" />
    <style>
      @media print {
        abbr::after {
          /* attr() : css 속성 함수입니다. */
          content: " (" attr(title) ")";
        }
      }
    </style>
  </head>
  <body>
    <abbr title="world wide web consortium">w3c</abbr>
  </body>
</html>

screen : 모니터나 스크린이 있는 디바이스 의미
speech : 음성 출력 장치(speech synthesizer)

미디어 쿼리 조건 - 자주 사용하는 조건 목록


`webkit-min-device-pixel-ratio` `webkit-min-device-pixel-ratio`	출력 장치의 최소, 최대 픽셀 비율. CSS의 1px 안에 들어가는 장치의 스크린 펙셀의 숫자를 값으로 한다.
`min-width` / `max-width`	스크롤 바를 포함한 `viewport`의 최소, 최대 너비
`orientation`	`viewport` 방향

논리연산자

and : 조건을 모두 만족하는 경우에만 스타일 적용
not : 조건을 반전하는 경우 스타일 적용
- MDN 설명 : Used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.
only : 전체 쿼리가 일치하는 경우에만 스타일 적용. 미디어쿼리를 지원하는 브라우저에서만 작동
- 미디어 쿼리CSS3 버전은 IE9부터 지원하지만, 사실 미디어 쿼리 자체는 이미 IE6부터 지원합니다. 하지만 이땐 아직 논리 연산자를 지원하지 않기 때문에 오류를 미연에 방지하고자 only 키워드가 탄생하게 되었다.
,(comma) : 여러 미디어 쿼리를 적용할 때 사용. 조건 중 하나도로 만족하는 경우 스타일 적용

body{background:black;}

@media screen and (min-width:481px) and (max-width:1280px){
  body{background:red;}
}

@media screen and (max-width:480px){ 
  body{background:green;}
}

@media not screen and (orientation : landscape){ /* not은 항상 @media 뒤에 옵니다. 기본값은 portrait */
  body{background:pink;}
}

@media screen and (-webkit-device-pixel-ratio : 2){ 
  body{background:royalblue;}
}

기기의 픽셀 비율을 알 수 있는 방법

BOM API 이용
개발자 도구 > 콘솔창에 "window.devicePixelRatio" 입력
브라우저 확대/축소에 따라 달라지므로 주의

What's My Device Pixel Ratio?

📎 코드 리뷰 - 반응형 웹 구현

1만 시간의 법칙

마무리

어제했던 과제에 대해 코드 리뷰가 진행되었다. 다른 교육생들이 작성한 코드 리뷰만으로 많은 것을 배웠다!
=> 마크업 잘하고 싶다아아
요 며칠 오후에는 카페에 가서 수업을 들었다. 그리고 쉬는 시간에 냅다 엎드려서 잠을 자는...
=> 오늘은 일부러 알람 늦게 맞춰놨는데 알람이 울리기 전에 일어나는 건 왜 때문이죠?