프로젝트에서 실제로 도움이 될 수 있는 10가지 작은 CSS 팁입니다. 더 많은 팁을 요청하려면 댓글 섹션에 알려주십시오.

1. 부드러운 스크롤

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

참고: Safari에서는 작동하지 않습니다!

html {
  scroll-behavior: smooth;
}

라이브 예제

2. <textarea> 크기 조정 방지

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

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}

라이브 예제

3. 드롭 캡

::first-letter 의사 요소를 사용하여 단락에 단락 시작표시문자를 추가할 수 있습니다.

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

라이브 예제

4. 드롭 섀도우

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

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

라이브 예제

5. 모든 <div> 요소 가운데 정렬

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

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

라이브 예제

6. 캐럿 색상 입력

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

input {
  caret-color: red;
}

라이브 예제

7. 강조 표시 방지

이것은 #2와 비슷하지만 user-select 속성을 사용하여 사용자가 요소를 강조 표시하지 않도록 할 수 있습니다.

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

라이브 예제

8. 입력 범위 의사 클래스

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

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

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

라이브 예제

9. 이미지 오버레이

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

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

라이브 예제

10. 전환 속성

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

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;
}

라이브 예제