CSS Tips-current Color를 사용하여 텍스트와 같은 색상 지정하기

15194 단어 CSSTipsCSS 3rabeetech
다음은 CSS 3에서 사용하기 시작하는currentColor의 사용 방법에 대해 설명합니다.

이른바 current Color


currentColor는 CSS에서 변수처럼 사용할 수 있는 키워드로, 속성 값을 지정하면 해당 요소에 맞는 색상과 같은 값에 적응할 수 있어 편리한 기능이다.
.target {
  color: red;
  border-bottom: 1px solid currentColor; /* color で指定している色が適応される */
}
당연히border를 제외하고background-color와box-shoadow 등 지정된 색깔을 사용할 수 있습니다.

샘플 프로그램


실제 적응을 해봤어요데모.
사용법에 대한 인상을 잡았으면 좋겠어요.

<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    
    <title>CSS Tips - currentColor を使ってテキストと同じ色を指定しよう</title>

    <style>
      body {
        font-size: 13px;
        background-color: #f0f0f0;
      }
      h1 {
        font-size: 15px;
      }
      h2 {
        font-size: 14px;
      }
      
      .btn {
        border: 1px solid currentColor; /* color に指定された色が適応される */
        display: inline-block;
        background-color: white;
        padding: 4px 8px;
        border-radius: 4px;
      }
      
      .box {
        box-shadow: 0px 0px 4px currentColor; /* color に指定された色が適応される */
        display: inline-block;
        background-color: white;
        padding: 4px 8px;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <h1>CSS Tips - currentColor を使ってテキストと同じ色を指定しよう</h1>
    
    <div>
      <h2>border</h2>
      <a style='color:red;' class='btn'>テキスト</a>
      <a style='color:blue;' class='btn'>テキスト</a>
      <a style='color:green;' class='btn'>テキスト</a>
    </div>
    
    <div>
      <h2>box-shadow</h2>
      <a style='color:red;' class='box'>テキスト</a>
      <a style='color:blue;' class='box'>テキスト</a>
      <a style='color:green;' class='box'>テキスト</a>
    </div>
  </body>
</html>

최후


이번에는 current Color의 사용법을 소개합니다!
이런 기능이 있다는 것을 알았다면 어디서든 좋은 사용법을 찾을 수 있었을 것이다.
저도 아직 current Color를 충분히 활용할 수 있는 방법을 찾지 못했기 때문에 잘 활용해야 합니다.
편리하게 활용할 수 있는 방법이 있으면 댓글로 남겨주세요.
앞으로도 CSS 팁을 조금씩 소개해 주시기 바랍니다.
vim-swap과 Tailwind CSS를 사용하는 클래스는 쓰기 편합니다.
Vaadin 강습회 2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage