단일 HTML 요소 별점 구성 요소

과거에는 맞춤 구성요소를 만들려면 HTML, CSS, JavaScript의 복잡한 조합이 필요했습니다. 그러나 최근 몇 년 동안 CSS가 발전함에 따라 브라우저에 이미 내장된 로직을 활용하여 HTML과 CSS 만을 사용하여 많은 구성요소를 구축할 수 있게 되었습니다. 대부분을 재사용할 수 있는데 왜 바퀴를 재발명해야 할까요?

체크박스, 라디오 버튼, 토글 스위치와 같은 간단한 구성요소는 기능은 브라우저에 의존하면서 HTML 및 CSS로 만들 수 있습니다. 그러나 우리는 단순한 구성 요소에만 국한되지 않습니다. 더 복잡한 구성 요소도 이 방법으로 얻을 수 있습니다.

이 기사에서는 단일 HTML과 단 하나의 JavaScript 명령을 사용하여 별표 평가 시스템을 구축하는 방법을 살펴보겠습니다.

HTML

별점 구성 요소는 기본적으로 사용자가 선택할 수 있는 값의 범위입니다. 변형에는 5개의 값(별표당 1개) 또는 10개의 값(별표 반개 허용)이 포함될 수 있지만 아이디어는 동일합니다. 사용자는 하나의 값만 선택할 수 있습니다.

HTML은 범위용으로 설계된 입력 유형을 제공하며 이를 구성 요소의 기반으로 사용할 수 있습니다.

<input type="range">

현재 상태로는 이 입력이 별로 유용하지 않습니다. 디자인 사양에 따라 몇 가지 속성을 정의해야 합니다.

1. 별점 반점을 허용합니다.
2. 별점 0.5~5개
3. 기본 선택은 별 2.5개입니다.

위 사양에 따라 HTML은 다음과 같습니다.

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

이 구성요소는 사용자가 0.5(min="0.5")에서 별 5개(max="5") 사이의 값을 의 증분 단위로 선택할 수 있는 범위 입력()입니다. 0.5(단계="0.5"). 초기값은 별 2.5개(value="2.5")로 설정되어 있습니다.

최소값을 0이 아닌 0.5로 설정하는 것은 특이한 것처럼 보일 수 있지만, 여기에는 실용적인 이유가 있습니다. 별점 0개 리뷰를 허용하면 잠재적인 값이 11개 생성되지만 범위는 시각적으로 10개의 값(별표 반개 10개)을 나타내므로 클릭 가능한 영역과 범위 내 별표가 일치하지 않게 됩니다. 이러한 디자인 선택은 더 나은 사용성을 보장하고 나중에 구현을 단순화합니다.

최소 0.5로 설정하면 보다 자연스러운 클릭 영역이 가능합니다

이 문제는 11개의 라디오 버튼을 사용하여 구성 요소를 생성하면 부분적으로 해결됩니다. 그러나 이는 디자인(마우스를 사용하여 0 값을 어떻게 선택합니까?), 유용성(범위 입력의 기본 동작이나 라디오 버튼의 기본 동작을 모방해야 합니까?) 및 접근성(어떻게 구성요소 전체의 초점을 관리하나요?) 

라디오 버튼을 사용하여 등급 구성 요소를 만드는 방법에 대한 또 다른 튜토리얼에 대한 좋은 질문입니다. 단일 HTML 요소를 사용하여 구성 요소를 생성하는 방법에 대한 이 튜토리얼에서는 이러한 복잡성을 피하기 위해 최소값 0.5를 선택했습니다.

나중에 몇 가지 조정 사항을 추가할 예정이지만 이 코드는 확실한 시작점으로 작동합니다. CSS가 없으면 시각적으로 표준 범위 입력과 유사합니다.

다음으로 몇 가지 속성을 더 추가하겠습니다. 지금은 중요해 보이지 않을 수도 있지만 나중에는 중요해질 것입니다.

• 클래스 이름: CSS에서 입력 범위를 식별하는 데 도움이 됩니다.
• 인라인 스타일: 입력 값을 저장하는 사용자 정의 속성이 있습니다.
• 인라인 JavaScript: 위의 인라인 스타일에서 사용자 정의 속성을 업데이트하는 단일 명령입니다.

최종 코드는 다음과 같습니다(가독성을 위해 형식 지정).

<input type="range">

다음 섹션에서는 이 규칙을 약간 개선해 보겠습니다. Chrome/Safari 및 Firefox에 대한 스타일을 정의해야 하며 이로 인해 약간의 반복이 발생합니다. 사용자 정의 속성을 사용하여 값을 저장하고 두 스타일 모두에 적용함으로써 프로세스를 간소화할 수 있습니다.

트랙 스타일 지정

트랙이 요소의 전체 크기를 차지한 다음 그라데이션을 사용하여 필요한 부분을 색칠합니다.

너비는 요소의 전체 너비를 차지하므로 너비에 대해 걱정할 필요가 없지만 높이는 다른 이야기입니다. Chrome과 Firefox는 트랙 높이를 컨테이너와 일치하게 만드는 반면 Safari는 그렇지 않습니다. 따라서 높이를 100%로 명시적으로 표시해야 합니다.

다음으로 색상 영역을 정의하겠습니다. 이전에 생성한 --val 및 --size 사용자 지정 속성을 활용하겠습니다. --val 속성으로 표시된 지점에서 색상을 변경하는 선형 그라데이션을 왼쪽에서 오른쪽으로 설정합니다.

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

이 그라데이션을 상위 요소의 다른 맞춤 속성으로 이동하겠습니다. 이를 통해 앞서 언급한 대로 Chrome/Safari 및 Firefox의 값을 재사용할 수 있으며 나중에 언급할 예정입니다.

이를 통해 선택한 값을 나타내는 더 어두운 영역의 직사각형이 생겼습니다. 사각형을 클릭하거나 슬라이드할 때 검은색 영역이 변경되는데, 이는 원하는 기능이지만 시각적인 부분이 부족합니다. CSS 마스크가 필요합니다.

부인하지는 않겠습니다. 다음 부분이 보기 흉합니다. 저는 외부 이미지나 인라인 SVG에 의존하지 않고 CSS만 사용하기로 결정했습니다. 이러한 옵션 중 하나를 사용하면 코드를 단순화할 수 있습니다.

다음 코드는 별 모양 평가 구성요소에 대한 것이지만 마스크를 변경하여 모양(예: 원)을 쉽게 변경할 수 있습니다.

CSS 마스크를 사용하여 원뿔형 그라디언트 세트를 사용하여 5점 별을 자릅니다. 범위 입력의 크기를 고려하므로 마스크가 수평으로 반복되면 별 5개를 얻게 됩니다.

<input type="range">

위의 선형 그래디언트와 마찬가지로 이 마스크를 Chrome/Safari 및 Firefox의 스타일에 적용하겠습니다. 코드 반복을 피하기 위해 상위 요소 내의 사용자 정의 속성에서 이를 정의하겠습니다.

최종 코드는 다음과 같습니다.

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Webkit과 Firefox의 코드가 거의 동일하다는 점에 주목하세요. CSS의 믹스인과 같은 기능은 이와 같은 상황에서 매우 유용할 것입니다. 물론 단일 지원 표준을 갖는 것이 훨씬 더 좋겠지만 말입니다.

또한 구성요소가 화면에 표시된 대로 정확하게 인쇄되도록 몇 가지 스타일(인쇄-색상-조정: 정확)을 추가했습니다. 일반적으로 배경은 기본적으로 인쇄되지 않으므로 배경 작업 시 유용합니다.

엄지손가락 스타일링

이 별점 시스템의 경우 엄지 손가락은 특별히 중요하지 않습니다. 시각적 효과는 트랙 자체를 사용하여 달성됩니다. 그래서 엄지손가락을 보이지 않게 숨기겠습니다.

불투명도를 0으로 설정하면 됩니다.

<input type="range" min="0.5" max="5" step="0.5" value="2.5">




  
  
  The CSS


Styling range inputs can be tricky–but not excessively complex. Unfortunately, it requires a lot of repetition due to lack of support and standardization, so we must use vendor prefixes and browser-specific pseudo-classes for the different elements of the component:

• thumb: the element user can move to change the value. The pseudo-elements are ::-webkit-slider-thumb (Chrome and Safari) and ::-moz-range-thumb (Firefox)
• track: the area or line along which the thumb slides. The pseudo-elements are ::-webkit-slider-runnable-track (Chrome and Safari) and ::-moz-range-track (Firefox)

And, of course, we'll need to apply some specific styles for each browser, as they don't style the component consistently. For example, we'll need to set up heights on Safari or remove a pesky border on Firefox.

From here, the next steps are as follows:

1. Defined the size of the star-rating component.
2. Mask the track to only keep the shapes of the stars visible.
3. Define the background that only colors the selected stars.
4. Hide the thumb.

Hiding the thumb is optional and it will depend on the type of component you are building. It makes sense to hide the thumb in this star-rating system. However, in a user-satisfaction component, the thumb may be useful. You can explore different demos at the end of this article.

Styling the range element

The first step will be removing the default appearance of the range input. This can be done that by setting the the appearance:none property. All modern browsers support it, but we may want to add the vendor-prefixed versions, so it's compatible with older browsers too.

Since we have five stars, it makes sense to set the width to five times the height. aspect-ratio: 5/1 could handle this, but some browsers still have inconsistent support, so we'll "hard code" the size using a custom property.

Additionally, we want to remove the border. Firefox applies a default border to the ranges, and removing it ensures a more consistent styling across browsers.

.star-rating {
  --size: 2rem;
  height: var(--size);
  width: calc(5 * var(--size));
  appearance: none;
  border: 0;
}

위의 코드 조각에서는 CSS 중첩을 사용하지 않았다는 것을 눈치채셨을 것입니다(아래 데모에서는 사용했지만). 이는 중첩이 상대적으로 새롭고 몇 가지 제한 사항이 있기 때문입니다. 많은 구형 브라우저는 이를 지원하지 않으며 일부 최신 브라우저는 비표준 의사 요소로 인해 어려움을 겪습니다. 저는 Safari에서 이 동작에 대해 WebKit에 버그를 보고했습니다.

예

말 한마디보다 한 장의 사진이 중요하다고 합니다. 따라서 단일 HTML 요소를 사용하여 코딩할 수 있는 입력 범위의 몇 가지 예는 다음과 같습니다.

이 문서에 설명된 별점 구성 요소부터 시작해 보겠습니다.

다음은 다채로운 예입니다. 이는 비정형적인 모양을 가지며 범위 입력의 모든 부분(범위 자체, 트랙 및 엄지 손가락)에 스타일을 지정해야 합니다.

마지막으로 제가 가장 좋아하는 것은 단일 요소로 구성된 애니메이션 사용자 만족 구성 요소입니다. 다양한 얼굴 중 하나를 선택하면 선택에 따라 움직입니다.

결론

이 구성요소를 코딩하는 방법은 다양합니다. 저는 HTML과 CSS만 사용하여 이 작업을 수행했지만(인라인 JavaScript 명령 하나 사용) 이미지나 더 많은 JavaScript를 사용하여 보기 흉한 인라인을 방지할 수도 있습니다. 

핵심 아이디어는 최소한의 HTML 및 CSS 변경으로 사양을 조정할 수 있으며 별표 평가 시스템이 약간 다르게 작동하거나 완전히 다르게 보일 것이라는 것입니다.

여러 라디오 버튼을 사용하여 구성요소를 다시 만들 수도 있으며, 이렇게 하면 JavaScript 줄과 일부 CSS가 필요하지 않습니다. 이는 유효한 접근 방식입니다. 접근성을 보장하고 입력 범위와 함께 기본적으로 제공되는 기본 동작을 복제하려면 추가 코드가 필요합니다. 어떤 사람들은 이 접근 방식이 더 쉽다고 생각할 수도 있으며 확실히 실행 가능합니다.

제가 소프트웨어 개발에서 가장 좋아하는 점 중 하나는 다양한 접근 방식과 옵션이 있고 각각 장단점이 있으며 모두 훌륭하게 달성할 수 있다는 것입니다.

기사가 즐거웠기를 바랍니다. 계속 코딩하세요!

위 내용은 단일 HTML 요소 별점 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!