컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
HTML
<h1><b>HSL</b> is <u>awesome.</u></h1>
CSS
:root {
color-scheme: dark light;
/* destructure brand channels */
--hue: 200; /* change me!! */
--saturation: 100%;
--lightness: 50%;
/* build colors with props */
--brand: hsl(
var(--hue)
var(--saturation)
var(--lightness)
);
/* very dark brand blue */
--text: hsl(
var(--hue)
var(--saturation)
10% /* lower is darker */
);
/* very bright brand white */
--surface: hsl(
var(--hue)
calc(var(--saturation) / 2)
95% /* higher is lighter */
);
}
h1 {
font-size: 10vmin;
font-weight: 300;
}
b {
color: hsl(
var(--hue)
var(--saturation)
30%
);
}
u {
text-decoration-color: var(--brand);
}
html {
block-size: 100%;
inline-size: 100%;
}
body {
color: var(--text);
background: var(--surface);
min-block-size: 100%;
min-inline-size: 100%;
margin: 0;
box-sizing: border-box;
display: grid;
place-content: center;
font-family: system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
/* just tweak the lightness */
/* maybe desaturate too */
:root {
--text: hsl(
var(--hue)
calc(var(--saturation) / 2)
85%
);
--surface: hsl(
var(--hue)
var(--saturation)
5%
);
}
b {
color: hsl(
var(--hue)
var(--saturation)
75%
);
}
}
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2023-10-25(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]