집 > 기사 > 웹 프론트엔드 > 몇 가지 유용한 CSS 기능 팁

몇 가지 유용한 CSS 기능 팁

小云云원래의: 2017-11-20 13:19:201759검색

CSS는 HTML 마크업 언어에 대한 스타일 설명을 제공하여 해당 요소가 표시되는 방식을 정의합니다. CSS는 웹 디자인 분야의 획기적인 발전입니다. 작은 스타일을 수정하여 이와 관련된 모든 페이지 요소를 업데이트하는 데 사용할 수 있습니다. 이번 글에서는 CSS 함수에 관한 8가지 유용한 팁을 소개하겠습니다.

1. 순수 CSS 도구 설명

많은 웹사이트에서 여전히 도구 설명 효과를 만들기 위해 JavaScript를 사용하지만 실제로는 CSS를 통해 더 간단하게 구현할 수 있습니다. 가장 쉬운 방법은 data-tooltip="…" 와 같이 HTML 코드에 도구 설명 텍스트가 있는 속성을 추가하는 것입니다. 그런 다음 CSS 파일에 다음 코드를 추가하여 attr() 함수를 통해 도구 설명 텍스트를 표시할 수 있습니다.

.tooltip::after { content: attr(data-tooltip);
}

꽤 간단하죠? ? 물론 힌트에 스타일을 추가하려면 실제로 더 많은 코드가 필요하지만 걱정하지 마십시오. 이를 위해 설계된 Hint.css 및 Balloon.css라는 강력하고 순수한 CSS 라이브러리가 있습니다.

2. 사용자 정의 데이터 속성 및 attr() 함수 사용

attr()을 사용하여 프롬프트를 만드는 방법을 배웠으며 이 함수를 사용할 수 있는 몇 가지 시나리오도 있습니다. 데이터 속성과 결합하면 간단한 HTML 라인(

이제 attr() 함수를 사용하여 제목과 설명을 표시할 수 있습니다.

.caption::after { content: attr(data-title);
...
}

다음은 구체적인 예입니다.

참고: 이 방법은 브라우저 지원에 문제가 있을 수 있습니다. 특정 콘텐츠의 경우 볼 수 있습니다. CSS 생성 콘텐츠에 대한 접근성 지원 문서.

3. CSS 카운터

CSS 카운터를 통해 멋진 기능을 구현할 수 있습니다. 이는 잘 알려진 속성이 아니며 대부분의 사람들은 브라우저가 이 속성을 잘 지원하지 않는다고 생각할 수도 있지만 실제로 모든 브라우저가 이 속성을 지원합니다.

하지만 CSS 카운터를 순서대로 사용하면 안 됩니다. , 페이지 매김이나 이미지 갤러리에 표시되는 숫자에 사용하는 것이 더 적합합니다. 다음 예에서 매우 적은 코드(심지어 JavaScript도 사용하지 않음)를 사용하여 선택한 항목의 개수를 계산하는 방법을 볼 수 있습니다.

CSS 카운터는 드래그 앤 드롭을 통해 재정렬할 수 있는 동적으로 변경되는 항목 목록을 표시하는 데도 좋습니다. 숫자:

As 마지막 예에서는 이 방법을 통해 생성된 콘텐츠에 접근성 문제가 있을 수 있다는 점을 기억해야 합니다.

4. CSS 필터로 얻은 반투명 효과

Apple은 iOS7에서 반투명하고 흐릿한 요소가 반투명 유리로 덮여 있는 것처럼 보이는 효과를 구현했습니다. Apple에서 영감을 받아 이 효과는 여러 곳에서 사용됩니다. CSS 필터가 등장하기 전에는 이 효과를 재현하는 것이 약간 까다로웠습니다. Blur Image를 사용하여 이 젖빛 유리 효과를 구현해야 합니다. 그러나 이제 CSS 필터는 거의 모든 주요 브라우저에서 지원되므로 이 효과를 재현하는 것이 훨씬 더 쉽습니다.

향후에는 배경 필터와 filter() 기능을 통해 이 효과를 얻을 수 있지만 현재는 Safari에서만 두 기능을 모두 지원합니다.

CSS 필터에 대한 자세한 내용을 보려면 여기를 클릭하여 자세히 알아볼 수 있습니다.

5. HTML 요소를 배경으로 사용

일반적으로 JPEG 또는 PNG 파일을 배경으로 설정할 수도 있고 그라데이션 배경을 설정할 수도 있습니다. 하지만 element() 함수를 사용하여

를 배경 이미지로 설정할 수 있다는 것을 알고 계셨나요? 현재 element() 함수는 Firefox에서만 지원됩니다.

가능성은 무궁무진합니다. 다음은 MDN의 예입니다.

CSS 요소() 기능에 대한 관련 소개를 보려면 여기를 클릭하세요.

6. calc()를 통해 더 나은 메시 만들기

유체 메시는 훌륭하지만 여전히 심각한 문제가 있습니다. 예를 들어 위쪽과 아래쪽의 간격은 왼쪽과 오른쪽의 간격과 거의 동일하지 않습니다. 또한 다른 그리드 시스템을 사용하면 마크업이 매우 혼란스러워집니다. flex 레이아웃이 최종 솔루션은 아니지만 이를 calc()(CSS 파일의 속성 값으로 사용할 수 있음)와 결합하면 더 나은 그리드를 만들 수 있습니다. 여기 George Martsoukos는 완벽한 간격을 갖춘 갤러리 그리드와 같은 많은 예를 나열합니다. Sass와 같은 CSS 사전 컴파일 언어를 사용하면 창의적인 그리드 시스템을 구축하는 것이 매우 간단하고 유지 관리가 쉽습니다. 동시에 calc()에 대한 브라우저 지원은 거의 완벽하므로 calc()는 확실히 숙달해야 할 기능입니다.

CSS의 calc() 기능에 대한 소개를 보려면 여기를 클릭하세요.

7. calc()를 통해 위치:고정 요소 정렬

calc()의 또 다른 기능은 위치:고정 요소를 정렬하는 것입니다. 예를 들어, 왼쪽과 오른쪽에 흐르는 간격이 있는 콘텐츠 래퍼가 있습니다. 이 콘텐츠 래퍼 내에서 요소를 고정된 위치에 정확하게 정렬하려고 하지만 이 경우 왼쪽의 특정 할당을 계산하기가 매우 어렵습니다. 그리고 올바른 속성. calc()를 사용하면 상대값과 절대값을 결합하여 요소의 위치를 정확하게 지정할 수 있습니다.

.wrapper { max-width: 1060px; margin: 0 auto;
}.floating-bubble { position: right: calc (50% - 530px); /* 50% - 래퍼 너비의 절반 */}

예:

이 측면에 대한 자세한 소개는 "위치 정렬: CSS 계산으로 고정 요소" 문서를 읽어보세요. @brnnbrn이 작성했습니다.

8. 큐빅베지어()를 사용하여 애니메이션 구현

웹사이트나 앱의 사용자 인터페이스를 더욱 매력적으로 만들기 위해 일부 애니메이션을 사용할 수 있지만 선택할 수 있는 전환 효과의 속도 곡선은 상당히 다릅니다. 예를 들어 선형 또는 Ease-in-out 등 제한적입니다. 표준 속도 곡선은 탄성 운동 효과조차 얻을 수 없습니다. Cuban-bezier() 함수를 사용하면 원하는 애니메이션을 정확하게 얻을 수 있습니다.

cubic-bezier()를 사용하는 방법에는 두 가지가 있습니다. 그 뒤에 있는 메커니즘을 이해하고 직접 만들거나, 큐빅-베지어 생성기를 사용하는 것입니다.

솔직히 저는 후자를 사용합니다.

cubic-bezier()에 대한 자세한 소개를 보려면 여기를 클릭하세요.

요약

CSS 기능을 더 스마트하게 사용하면 더 나은 그리드 생성과 같은 위의 문제를 해결할 수 있을 뿐만 아니라 더 창의적인 자유를 얻을 수도 있습니다. 브라우저 지원이 점점 좋아지면 calc()와 같은 CSS 기능을 사용하여 이전 CSS 코드를 수정하고 개선할 수 있습니다.

이 기사는 @Anselm Urban의 "CSS 함수를 사용한 8가지 영리한 트릭"을 기반으로 번역되었습니다. 전체 번역에는 우리 자신의 이해와 생각이 포함되어 있습니다. 번역이 좋지 않거나 잘못된 점이 있으면 업계 친구들에게 조언을 구하세요. . 이 번역을 재인쇄하려면 영어 출처를 표시해 주세요: https://www.sitepoint.com/8-clever-tricks-with-css-functions.

위 내용은 CSS 기능 8가지 팁입니다. 자신이 좋다고 생각하는 친구들은 빨리 모아보세요.

몇 가지 유용한 CSS 기능 팁

관련 기사