모든 UI 개발자가 알아야 할 CSS 코드 조각-CSS 튜토리얼-php.cn

CSS Code Snippets Every UI Developer Should Know

소개: 편리한 CSS 트릭으로 스타일시트 강화

안녕하세요, UI 개발자 여러분! 스타일시트에 멋진 내용을 추가할 준비가 되셨나요? 우리 모두는 CSS가 축복이자 저주가 될 수 있다는 것을 알고 있습니다. 믿을 수 없을 정도로 강력하지만 때로는 레이아웃을 올바르게 만들기 위해 완고한 문어와 씨름하는 것처럼 느껴질 때도 있습니다. 이것이 바로 여러분의 삶을 더 쉽게 만들고 디자인을 빛나게 해줄 작지만 강력한 CSS 코드 조각 10개 컬렉션을 모아 놓은 이유입니다.

이건 단순한 단편이 아닙니다. 이마를 치며 "내가 왜 그걸 생각하지 못했지?"라고 말하게 만드는 일종의 속임수입니다. 당신이 CSS 초보자이든 숙련된 전문가이든 여기에서 유용한 것을 찾을 수 있을 것이라고 장담합니다. 좋아하는 음료수를 들고 코드 편집기를 실행한 후 CSS의 마법에 빠져보세요!

1. 마법 같은 센터링 트릭

우리 모두는 div를 수직 및 수평으로 중앙에 배치하려고 시도하다가 플로트와 여백이 뒤엉켜 엉망이 된 경험이 있습니다. 이제 이 작은 단편이 여러분의 새로운 가장 친한 친구가 될 것이기 때문에 답답했던 시절에 작별 인사를 하세요.

.center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

로그인 후 복사

이 코드는 CSS 변환 기능을 사용하여 상위 컨테이너 내의 요소를 완벽하게 중앙에 배치합니다. 작동 방식은 다음과 같습니다.

요소의 위치를 절대값으로 설정하여 일반적인 문서 흐름에서 벗어났습니다.
컨테이너 상단과 왼쪽에서 50% 이동합니다.
그런 다음 변환 속성은 요소를 원래 너비와 높이의 절반만큼 뒤로 이동합니다.

결과는? 항상 콘텐츠를 완벽하게 중앙에 배치합니다. 더 이상 여백을 조작하거나 비협조적인 레이아웃 때문에 머리를 뽑을 필요가 없습니다!

2. 승리를 위한 부드러운 스크롤

페이지 탐색에 우아함을 더하고 싶으십니까? 이 스니펫은 단 몇 줄의 코드만으로 매우 부드러운 스크롤을 제공합니다.

html {
  scroll-behavior: smooth;
}

로그인 후 복사

그렇습니다! 이 간단한 선언은 페이지의 앵커 링크로 스크롤할 때 부드러운 애니메이션을 사용하도록 브라우저에 지시합니다. 작은 변화로 인해 사이트가 얼마나 세련되고 전문적인 느낌을 받는지에 큰 변화를 가져올 수 있습니다.

전문가 팁:

좀 더 멋지게 꾸미고 싶다면 약간의 JavaScript를 사용하여 스크롤 속도를 맞춤 설정할 수도 있습니다.

document.documentElement.style.scrollBehavior = 'smooth';

로그인 후 복사

3. Clearfix 해킹: 부동 요소 길들이기

플로트는 까다로운 짐승이 될 수 있습니다. 그들은 컨테이너를 부수고 레이아웃을 파괴하는 불쾌한 습관을 가지고 있습니다. Clearfix 핵을 입력하세요:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

로그인 후 복사

이 클래스를 부동 하위 항목이 있는 컨테이너에 추가하고 레이아웃의 순서가 복원되는 것을 지켜보세요. ::after 의사 요소는 컨테이너 내용 뒤에 보이지 않는 상자를 생성하여 부동 항목을 지우고 모든 것을 깔끔하고 깔끔하게 유지합니다.

4. 사용자 정의 스크롤바: 기본값은 지루하기 때문에

스크롤바가 보기 흉해야 한다고 누가 말했습니까? 이 CSS 스니펫을 사용하면 사이트 디자인에 맞게 스크롤 막대 스타일을 지정할 수 있습니다.

.center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

로그인 후 복사

이 코드는 WebKit 기반 브라우저(예: Chrome 및 Safari)에서 작동하는 세련된 맞춤형 스크롤바를 제공합니다. 디자인에 딱 맞게 색상과 치수를 조정할 수 있습니다.

기억하세요: 이 스니펫은 WebKit 브라우저에 적합하지만 다른 브라우저에서는 이러한 의사 요소를 지원하지 않을 수 있습니다. 모든 사용자에게 일관된 경험을 보장하려면 항상 다양한 브라우저에서 테스트하세요.

5. Flexbox 센터링 단축키

Flexbox는 CSS에서 레이아웃을 처리하는 방식에 혁명을 일으켰습니다. Flexbox를 사용하여 콘텐츠를 수직 및 수평 중앙에 배치하는 빠르고 더러운 방법은 다음과 같습니다.

html {
  scroll-behavior: smooth;
}

로그인 후 복사

이 클래스를 컨테이너에 적용하면 모든 하위 요소가 완벽하게 중앙에 배치됩니다. 간단하고 강력하며 모든 최신 브라우저에서 작동합니다. 사랑하지 않는 것이 무엇입니까?

6. 줄임표로 텍스트 자르기

때때로 제한된 공간에 텍스트를 표시해야 하지만 텍스트가 줄바꿈되거나 넘치게 되기를 원하지 않을 때가 있습니다. 이 스니펫은 텍스트를 자르고 끝에 줄임표(...)를 추가합니다.

document.documentElement.style.scrollBehavior = 'smooth';

로그인 후 복사

이 기능은 디자인을 깔끔하게 유지하고 긴 텍스트 문자열로 인해 레이아웃이 깨지는 것을 방지하는 데 적합합니다. 필요한 경우 툴팁이나 확장 가능한 요소 등 사용자가 전체 텍스트를 볼 수 있는 방법을 제공하세요.

7. CSS 삼각형: 이미지가 필요하지 않음

화살표나 툴팁에 삼각형이 필요합니까? Photoshop을 사용하지 마세요. 순수한 CSS로 Photoshop을 만들 수 있습니다.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

로그인 후 복사

위쪽을 가리키는 삼각형이 만들어집니다. 테두리 너비를 조정하여 삼각형의 크기와 비율을 변경할 수 있으며, 테두리 색상을 수정하여 방향을 변경할 수 있습니다.

보너스 팁:

다른 모양을 만들고 싶으신가요? 이 멋진 CSS 모양 생성기를 확인해 보세요: CSS 모양 생성기

8. 간단한 CSS 그라데이션 배경

그라디언트는 디자인에 깊이와 흥미를 더할 수 있습니다. 간단한 선형 그라데이션 배경을 만드는 방법은 다음과 같습니다.

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

로그인 후 복사

따뜻한 오렌지에서 부드러운 복숭아까지 수평 그라데이션을 만듭니다. 필요에 따라 색상과 방향을 조정할 수 있습니다. 더 복잡한 그라디언트의 경우 CSS Gradient와 같은 도구를 사용하여 코드를 생성해 보세요.

9. 로보토마이즈된 올빼미 선택기

이상한 이름에 놀라지 마세요. 이 선택기는 요소 사이에 일관된 간격을 추가하는 데 매우 유용합니다.

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

로그인 후 복사

이 선택기는 다른 요소 바로 뒤에 오는 모든 요소를 대상으로 하며 상단 여백을 추가합니다. 모든 요소에 여백 클래스를 추가하지 않고도 레이아웃에서 수직 리듬을 유지할 수 있는 좋은 방법입니다.

이거 조심하세요! 강력하기는 하지만 신중하게 사용하지 않으면 의도하지 않은 결과를 초래할 수도 있습니다. 전역적으로 사용하기보다는 특정 컨테이너에서 사용하는 것을 고려해 보세요.

10. 쉬운 테마 설정을 위한 CSS 변수

마지막으로 CSS 변수(사용자 정의 속성이라고도 함)에 대해 이야기해 보겠습니다. 유연하고 테마가 있는 디자인을 만들기 위한 획기적인 도구입니다.

.center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

로그인 후 복사

:root 의사 클래스에 변수를 정의하면 스타일시트 전체에서 이러한 값을 재사용할 수 있습니다. 기본 색상을 변경해야 합니까? 변수를 한 번만 업데이트하면 전체 디자인에 적용됩니다.

모든 것을 하나로 묶기: 실제 사례

이제 멋진 CSS 스니펫을 다루었으므로 실제 시나리오에서 이들 중 일부를 어떻게 함께 사용할 수 있는지 살펴보겠습니다. 블로그 게시물 미리보기를 위한 간단한 카드 구성요소를 구축한다고 상상해 보세요.

html {
  scroll-behavior: smooth;
}

로그인 후 복사

다음은 여러 스니펫을 통합하여 스타일을 지정하는 CSS입니다.

document.documentElement.style.scrollBehavior = 'smooth';

로그인 후 복사

이 예에서는 쉬운 테마 지정을 위해 CSS 변수를 사용하고, 긴 제목을 처리하기 위해 truncate 클래스를 사용했으며, 세련된 모양을 위해 부드러운 스크롤과 사용자 정의 스크롤 막대를 추가했습니다. 카드 레이아웃 자체는 정렬 및 간격에 Flexbox 원칙을 사용합니다.

결론: CSS 게임 레벨 업

여러분, 개발 워크플로에 큰 변화를 가져올 수 있는 작지만 강력한 CSS 코드 조각 10개가 있습니다. 일반적인 레이아웃 문제 해결부터 약간의 세련미 추가까지, 이 스니펫은 CSS의 강력함과 유연성을 보여줍니다.

CSS 마법사가 되기 위한 핵심은 이러한 요령을 아는 것뿐만 아니라 이러한 요령을 언제, 어떻게 사용하는지 이해하는 것입니다. 이러한 조각을 프로젝트에 통합할 때 시간을 들여 실험하고 작동 방식을 이해하십시오. 특정 요구 사항에 맞게 조정하고 결합하는 것을 두려워하지 마세요.

다음은 CSS 여정을 계속할 때 명심해야 할 몇 가지 마지막 팁입니다.