놀라운 CSS 팁과 요령

멋진 CSS 트릭을 사용하여 최신 CSS 기능을 사용하여 깔끔한 코드를 작성하는 방법을 알고 싶으십니까? 당신은 바로 이곳에 착륙했습니다!

초보자를 위한 팁

이제 막 CSS를 배우기 시작한 사람들을 위한 간단한 팁이 있습니다. Bootstrap 또는 Tailwind를 사용하지 마세요! 의심할 여지 없이 멋진 UI를 빠르게 얻을 수 있는 훌륭한 도구이지만 이러한 도구를 사용하면 CSS 기본 사항을 놓치게 됩니다. 나는 개인적으로 이 실수를 저질렀고 오, 정말 후회했습니다.

그리드는 훌륭합니다

개별 열과 행만 다루는 가변 상자와 달리 Grid를 사용하면 큰 그림에 대해 생각할 수 있습니다. 요소를 display: grid;로 설정하면 해당 하위 항목을 여러 열과 행으로 정의할 수 있습니다. 아래 이미지에서 flexbox 대신 그리드를 사용하여 제거한 코드의 양을 살펴보십시오.
Click here to read more about CSS Grid Layout

CSS 디버깅

우리는 종종 코드(CSS 포함)를 디버깅하기 위해 Chrome 개발자 도구를 사용하지만 특히 CSS와 관련하여 Firefox 개발자 도구가 훨씬 우수하다는 사실에 놀랄 것입니다. Firefox에서 요소를 검사하면 Chrome에서와 같이 상자 모델이 세분화되지만 패딩이나 여백을 변경하는 것과 같이 직접 속성을 편집할 수도 있으며 세분화도 제공됩니다. 상자 모델에 영향을 미치는 모든 속성의 뿐만 아니라 Firefox는 플렉스 및 그리드 레이아웃을 위한 정말 멋진 그래픽도 제공합니다.

이미지 필터

CSS에서 이미지를 가지고 노는 것은 재미있지만 이러한 이미지에 놀라운 효과를 적용할 수 있다는 것을 알고 계셨습니까? 실제로 CSS는 이미지에 많은 필터를 사용하여 개발자가 Photoshop에서 그래픽을 변경하지 않고도 그래픽을 사용할 수 있도록 합니다. 몇 가지 필터를 살펴보겠습니다.

.image img {
  max-width: 300px;
}

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

작성하고 여러분과 공유할 것이 훨씬 더 많지만 조금 길어지므로 놀라운 CSS 팁 및 요령의 파트 2를 원하시면 아래에 댓글을 달아주세요.

에서 나를 팔로우할 수 있습니다.