CSS 사용자 정의 속성으로 텍스트 색상 바꾸기
웹 페이지의 특정 섹션에 있는 모든 텍스트 색상을 변경합니다.
이 비디오에서는 CSS 사용자 정의 속성/변수를 설정하여 웹 페이지의 특정 섹션에서 모든 텍스트 색상을 교체하는 데 사용할 수 있는 방법을 살펴보겠습니다.
아래는 완성된 코드 예제입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Using css variables to change color in a specific section</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<section>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aperiam asperiores assumenda at atque cupiditate debitis dolores eligendi enim, error esse et excepturi exercitationem facilis fugit ipsam laboriosam magni necessitatibus nulla obcaecati odio porro sint sunt suscipit vel voluptatum.</p>
</section>
<!-- This section should have a dark background, so we add a .dark class -->
<section class="dark">
<h2>Esse nobis obcaecati possimus totam.</h2>
<p>Cupiditate delectus deleniti dolorem doloribus explicabo facere incidunt maiores molestias, nemo nisi nobis quasi quis reiciendis repellat sed ut veritatis vitae voluptatum! Animi illo quos rerum temporibus. Distinctio ea fuga iusto mollitia officia! Error explicabo hic minima quos sit tenetur.</p>
</section>
<section>
<h2>Aperiam expedita itaque non quasi.</h2>
<p>Iste molestias mollitia possimus. Ad consequatur consequuntur enim ipsum iusto magni nemo, nostrum officia perferendis quaerat quo quod repellat reprehenderit saepe sapiente, sunt tempore tenetur vel velit veniam? Deleniti doloribus illum in minus modi nemo perferendis placeat quasi sapiente tenetur!</p>
</section>
<style>
/* Custom property for text colors */
:root {
--txt-clr: #333333;
}
/* Set global text colors */
h2 {
color: var(--txt-clr);
}
p {
color: var(--txt-clr);
}
.dark {
/* Set a background color for the .dark section */
background-color: #333333;
/* Redeclare text color insidde teh .dark section */
--txt-clr: #efefef;
}
</style>
</body>
</html>
구독 및 팔로우
읽어 주셔서 감사합니다/시청하고 안전을 유지하십시오
Reference
이 문제에 관하여(CSS 사용자 정의 속성으로 텍스트 색상 바꾸기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vanaf1979/swap-out-text-colors-with-css-custom-properties-4gg텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
