1. Smooth Scrolling 

일부 웹 사이트를 방문하고 다른 섹션으로 이동하려고 하면 해당 섹션으로 부드럽게 스크롤 됩니다. 한 줄의 CSS를 사용하여 웹 사이트에서 이 기능을 수행 할 수 있습니다.

html {
  scroll-behavior: smooth;
}

https://codepen.io/mrwolferinc/pen/BapbJKK

2. Prevent <textarea> Resize 

resize 속성을 사용하여 <textarea> 요소의 크기가 조정되지 않도록 할 수 있습니다 (또는 한 축으로 제한).

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}

https://codepen.io/mrwolferinc/pen/poRYpVL

3. Drop Cap 

::first-letter 가상 요소를 사용하여 단락에 드롭 캡을 추가 할 수 있습니다.

::first-letter {
  font-size: 250%;
}

https://codepen.io/mrwolferinc/pen/qBRvxZO

4. Drop Shadow 

투명한 이미지에 drop-shadow() 필터 효과를 사용할 수 있습니다. box-shadow 속성을 사용하는 것보다 훨씬 더 나은 그림자 효과를 줄 것입니다.

img {
  filter: drop-shadow(0 0 3px #000);
}

https://codepen.io/mrwolferinc/pen/bGgJwjq

5. Center Any <div> Element 

페이지의 중앙에 <div> 요소를 배치하는 것이 어려울 수 있지만 이 팁에서는 그렇지 않습니다. 몇 줄의 CSS 코드를 사용하여 페이지의 모든 <div> 요소를 중앙에 배치 할 수 있습니다.

body {
  display: grid;
  place-items: center;
}

https://codepen.io/mrwolferinc/pen/NWdmbRy

6. Input Caret Color 

caret-color 속성을 사용하여 입력 필드 캐럿의 색상을 변경할 수 있습니다.

input {
  caret-color: red;
}

https://codepen.io/mrwolferinc/pen/xxgeRYG

7. Prevent Highlighting 

이것은 #2와 유사하지만 사용자가 요소를 강조 표시하지 않도록 사용자 선택 속성을 사용할 수 있습니다.

.no-highlight {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

https://codepen.io/mrwolferinc/pen/zYNXobv

8. Input Range Pseudo-Classes 

덜 알려진 : in-range 및 : out-of-range 의사 클래스는 현재 값이 최소 및 최대 속성으로 지정된 범위 내에 있는 <input> 요소의 유효성을 검사하는 데 도움이 될 수 있습니다.

input:in-range {
  background: rgba(0, 255, 0, .25);
}

input:out-of-range {
  background: rgba(255, 0, 0, .25);
}

https://codepen.io/mrwolferinc/pen/poRBMGd

9. Image Overlay 

object-fit 속성을 사용하여 이미지 오버레이를 만들 수 있습니다. 이것은 웹 사이트에서 영웅 이미지를 만들 때 유용 할 수 있습니다.

.image-overlay img:only-of-type:nth-child(1) {
  object-fit: cover;
  opacity: .4;
}

https://codepen.io/mrwolferinc/pen/abproKb

10. The transition Property 

이미 알고 계시겠지만 키 프레임을 사용하지 않고 요소에 애니메이션을 적용 할 수 있는 방법이 있다고 말하면 어떻게 됩니까? 전환 속성을 사용하면 요소의 두 상태 간의 전환을 정의 할 수 있습니다. 주로 호버 애니메이션에 사용됩니다.

a {
  color: #0d6efd;
  text-decoration: none;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}

a:hover {
  color: #0a58ca;
}

https://codepen.io/mrwolferinc/pen/RwKmbzZ

https://dev.to/mrwolferinc/10-helpful-css-tips-4669