지금 당장 알아야 할 CSS 속성!

MDN 문서를 탐색하는 동안 몇 가지 흥미로운 CSS 속성을 발견했습니다. 그래서 나는 그것들에 대해이 기사를 만들었습니다. 의 시작하자!

액센트 컬러

<input type=checkbox의 기본 색상과 기본 초점 링 색상을 재정의하고 싶었던 적이 있습니까? 나는 이 속성을 알기 전에 filter 🙄를 사용했습니다. 사용 방법은 다음과 같습니다.

element {
    accent-color: (any valid color)
}

예를 들어 이것을 시도하면

body {
    accent-color: red
}

우리는 이 결과를 얻는다

모두

이 속성은 주어진 요소의 모든 속성 값을 재설정합니다. 예를 들어 버튼에서 모든 스타일을 제거하려는 경우 이렇게 할 수 있습니다.

button {
   all: unset
}

이렇게 하면 일반 텍스트가 제공됩니다.

텍스트 들여쓰기

이 속성은 텍스트 들여쓰기 길이를 재정의하는 데 매우 유용합니다.

<p>I have no spaces before</p>

p {
  text-indent: 42px;
  border: 1px solid gray;
}

생산

크기 조정

이것은 내가 가장 좋아하는 것입니다. 0 JavaScript로 크기 조정 가능한 구성 요소를 만들 수 있습니다!

div {
  resize: both;
  overflow: hidden;
  border: 1px solid black
}

<div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab aspernatur deserunt minus mollitia repellendus voluptates quibusdam atque. Blanditiis reprehenderit et eligendi, deleniti tempora, ipsam ad, dolores sed rem id sit.
</div>

그리고 CSS로만 크기를 조정할 수 있는 구성 요소가 있습니다!

열 수

열을 만드는 데 약간 유용한 속성입니다. 그러나 응답하지 않을 수 있습니다.

<div class="test">
  <div class="box">
    <h1>
      :D Columns
    </h1>
  </div>

  <div class="box">
    <h1>
      without flex
    </h1>
  </div>

  <div class="box">
    <h1>
      or grid? 😲
    </h1>
  </div>
</div>

.test {
  column-count: 3;
}

.box {
  margin: 10px;
  border: 1px solid gray;
}

이것은 나쁘지는 않지만 무언가를 테스트할 때만 유용합니다.

애니메이션 재생 상태

이 속성을 사용하여 애니메이션을 일시 중지/재생할 수 있습니다.

.element {
   animation: bounce 10s ease infinite;
}

.element.paused {
   animation-play-state: paused;
}

끝!

이 기사를 읽어 주셔서 감사합니다. 나는 당신이 새로운 것을 배웠기를 바랍니다.

날 따라와

트위터 -
GitHub - https://www.github.com/posandu