CSS [9] – 미디어 쿼리로 반응형 웹 만들기, 가상 클래스(Pseudo Class) 사용법

Media Queries

/* 미디어 쿼리 신텍스 */
@media media type and (condition: breakpoint) {
  // CSS rules
}

@media screen and (min-width: 481px) {
  //
}

@media screen and (min-aspect-ratio: 7/4) {
  //
}

@media screen and (orientation: landscape) {
  //
}

• 미디어 쿼리는 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공

/* || SMALL */
@media screen and (min-width: 576px) {
  body {
    background-color: green;
    background-image: radial-gradient(whitesmoke, green);
  }

  nav {
    display: none;
  }
}

/* || MEDIUM */
@media screen and (min-width: 768px) {
  body {
    background-color: gold;
    background-image: radial-gradient(whitesmoke, gold);
  }
}

/* || LARGE */
@media screen and (min-width: 992px) {
  body {
    background-color: firebrick;
    background-image: radial-gradient(whitesmoke, firebrick);
  }
}

/* || XL */
@media screen and (min-width: 992px) {
  body {
    background-color: rebeccapurple;
    background-image: radial-gradient(whitesmoke, rebeccapurple);
  }
}

/* || mobile device landscape */
@media screen and (max-height: 425px) and (min-aspect-ratio: 7/4) {
  body {
    background-color: dodgerblue;
    background-image: radial-gradient(whitesmoke, dodgerblue);
  }

  h1,
  h2 {
    font-size: 1.5rem;
  }

  nav {
    display: none;
  }
}

• min-width 조건을 사용하여 뷰포트 크기별로 디자인을 다르게 한 CSS 예시

• 개발자 도구에서 모바일 아이콘 클릭시 기기별 화면을 미리 볼 수 있음

참고: 일반적인 브레이크 포인트

Pseudo

가상 클래스

nav a,
nav a:visited {
  color: #000;
}

nav a:hover,
nav a:focus {
  color: hsla(0, 0%, 20%, 0.6);
}

nav a:active {
  color: red;
}

nav a:any-link {
  color: #000;
}

nav :is(a:hover, a:focus) {
  color: hsla(0, 0%, 20%, 0.6);
}

nav a:active {
  color: red;
}

• 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드
• 선택자를 DRY(Don’t repeat yourself)하게 만들기 위해 nav a:hover, nav a:focus를 nav :is(a:hover, a:focus)로 축약해서 사용할 수 있음
• a, a:visited는 a:any-link

:is(header, footer) {
  position: sticky;
  background-color: #1e293b;
  color: whitesmoke;
  text-align: center;
}


header {
  top: 0;
  color: red;
}

• :is 사용시 specificity 점수가 더 올라가서 아래쪽에 header 스타일이 override 되지 않음

• :where 사용시 specificity에 영향을 주지 않음

.card:target {
  border: 2px solid rebeccapurple;
}

• :target 사용시 선택된 콘텐츠에 스타일 적용

.card img[alt] {
  border: 10px solid red;
}

• alt 속성을 가지고 있는 img 태그

.card img:not([alt]) {
  border: 10px solid red;
}

• alt 속성을 가지고 있지 않은 img 태그

.card:nth-child(2) {
  background-color: papayawhip;
}

• html 상에서 2번째 child에 있는 콘텐츠
• css로 order를 변경할 경우 등은 해당되지 않음
• .card:nth-child(even), .card:nth-child(odd)

::after, ::before

.card figcaption::after {
  content: ' hello';
}

.card figcaption::before {
  content: '✨';
  display: block;
}

.card p {
  position: relative;
}

.card p::before {
  content: open-quote;
  font-size: 3em;
  position: absolute;
  top: -0.25em;
  left: -0.5em;
}

.card p::after {
  content: close-quote;
  font-size: 3em;
  position: absolute;
  top: -0.25em;
  right: -0.5em;
}

• ::before , ::after 선택자 이전과 다음에 html에 추가하지 않고 특정 콘텐츠를 추가할 수 있음

가상 요소

.card figcaption::first-letter {
  font-size: 3rem;
}
.card figcaption::first-line {
  font-size: 3rem;
}

• first-letter, first-line 선택 가능