반응형
캐스케이드 층은 아마도 CSS 캐스케이드가 시작된 이래 가장 큰 업그레이드일 것이다. 크롬은 기본적으로 계단식 레이어를 활성화하는 데 파이어폭스에 동참했고, 이를 설명하는 다양한 기사들이 있으니, 이제 그것들을 어떻게 사용하는지에 대해 생각해 볼 때이다. 아직 못 만져봤어?
자신을 테스트하기 위해, 여기에 그들에 대한 세 가지 작은 질문과 답변에 대한 설명이 있습니다. 시작합시다.
질문 1
다음에서 전경 텍스트 및 페이지 배경에 사용되는 색상은 무엇입니까?
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Question One</title>
<style>@import url("data:text/css, \
body.myBody { \
background-color:blue; \
font-size:4em; \
} \
* { \
color:yellow !important; \
} \
") layer;
</style>
<style>
body {
background-color: red;
color: white !important;
}
</style>
</head>
<body class="myBody">
Hello World
</body>
</html>
대답이 있는 코드펜
(링크, dev.to은 공개 섹션 내에 코드펜을 내장하는 것을 지원하지 않는 것 같기 때문입니다.)
질문 2
이 문제는 비슷해 보여요. 레이어되지 않은 스타일은 본체 요소의 인라인 스타일로 이동되었습니다. 다시 말하지만, 마지막 텍스트와 배경색은 무엇인가요? 똑같은 대답인가요?
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Question Two</title>
<style>@import url("data:text/css, \
body.myBody { \
background-color:blue; \
font-size:4em; \
} \
* { \
color:yellow !important; \
} \
") layer;
</style>
</head>
<body class="myBody" style="background-color:red;color:white!important">
Hello World
</body>
</html>
대답이 있는 코드펜
질문 3
이제 뭔가 달라졌어. 세 이미지의 렌더링 크기는 어떻게 됩니까? (placeholder.com에 익숙하지 않은 경우, http://via.placeholder.com/100에서 제공된 이미지의 고유 치수는 100px x 100px입니다.)
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Question Three</title>
<style>
img {
height: 200px;
width:200px;
}
.beta {
height: revert;
width:revert;
}
.gamma {
height: revert-layer;
width:revert-layer;
}
</style>
</head>
<body>
<img
class="alpha"
src="https://via.placeholder.com/100"
height="150" width="150"
alt="100 pixel square placeholder">
<img
class="beta"
src="https://via.placeholder.com/100"
height="150" width="150"
alt="100 pixel square placeholder">
<img
class="gamma"
src="https://via.placeholder.com/100"
height="150" width="150"
alt="100 pixel square placeholder">
</body>
</html>
대답이 있는 코드펜
'css' 카테고리의 다른 글
| 스타일링된 구성요소의 사용자 지정 구성요소에 오신 것을 환영합니다! (0) | 2022.03.09 |
|---|---|
| CSS 캐스케이드 레이어를 사용한 계층화 (0) | 2022.03.09 |
| 이 놀라운 호버 효과로 어떻게 로고를 디자인할 수 있을까요? (0) | 2022.03.09 |
| 게임 대시보드 UI (0) | 2022.03.09 |
| 다크 모드를 위한 사용자 지정 응답형 패비콘을 만들려면 어떻게 해야 합니까? (0) | 2022.03.09 |
댓글