/* 미디어 쿼리 신텍스 */
@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;
}
.card img:not([alt]) {
border: 10px solid red;
}
.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 선택 가능
Related