3강 - currentcolor

재아·2024년 7월 18일

[실무팁]

목록 보기
3/26

currentcolor를 입력하면
body에 설정한 컬러를 자식이 상속받는다.

코드가 복잡해졌을 때, 부모 컬러면 바꾸면 되서 간편하다.

다음은 간단한 구현 예시이다.

<section>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil illo beatae eaque ipsam dignissimos excepturi ipsum iure velit eius aspernatur. Autem aliquid nesciunt numquam odit, dolorum exercitationem deserunt quis nulla?
</section>

<div>
    안녕
</div>
/* 폰트 */
@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html > body {
  font-family:"GmarketSansMedium";
}
body {
    color : pink;
}
div { 
width: 100px;
    height: 100px;
    display:flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 10px solid currentcolor;
}

보다시피 div에 currentcolor를 적용했더니 부모 컬러를 상속 받았다.

정리된 코드 보러가기

0개의 댓글