HTML select 요소 다시 살펴보기

안녕하세요! 저는 Safari 엔지니어 Tim입니다 오늘은 새로운 방법을 소개해 드리겠습니다 select 요소를 완전히 커스터마이징하면서 시맨틱 HTML의 강력함을 그대로 활용할 수 있는 방법이에요 웹 개발자라면 드롭다운 때문에 고생해 보셨을 거예요 기본 select 요소를 넘어서려면 무거운 JavaScript 라이브러리나 수많은 div 요소가 필요했어요 접근성 처리도 까다로운 문제였죠 이제 HTML과 CSS만으로 더 쉬운 방법이 생겼습니다 바로 customizable select예요 Safari 27과 Chrome 135부터 기존 select 요소를 사용해 드롭다운을 웹사이트에 매끄럽게 통합할 수 있어요 작동 방식을 보여드리기 위해 customizable select를 구현해 볼게요 제가 클라이언트를 위해 만들고 있는 웹사이트에서요 사진작가의 포트폴리오를 함께 만들고 있어요 사진을 선보이고 판매할 수 있도록요 클라이언트가 정렬 및 필터링 옵션을 원해서 select 요소를 사용할 거예요 참고로 제 클라이언트 이름도 Tim이에요 select 요소와 레이블의 HTML 마크업이에요 select 요소는 강력한 도구로 기본 접근성을 바로 제공해 줍니다 키보드로 option 요소를 탐색할 수 있고 스크린 리더와도 잘 작동해요 외부 라이브러리 없이도요 이걸로 페이지의 Sort by 버튼을 만들겠습니다 이것이 네이티브 select인데요 Apple 플랫폼에서는 풀다운 버튼이라고 해요

네이티브 select의 장점은 플랫폼의 모든 컨트롤과 일관되게 보인다는 거예요 사용자에게 익숙한 탐색 방법을 제공해 주죠 그런데 포토 사이트에 폼 컨트롤을 배치하면 왠지 어울리지 않는 느낌이 들어요 제가 원하는 대로 사이트 스타일에 녹아들지 않거든요 바로 여기서 customizable select가 등장합니다 커스터마이징 단계를 하나씩 안내해 드릴게요 디자인에 더 잘 맞는 select를 만들 수 있도록요 먼저 사이트의 select 버튼 스타일을 잡겠습니다 버튼은 select 요소에서 클릭하면 select 메뉴가 뜨는 부분이에요 그런 다음 customizable select로 메뉴 스타일을 잡을게요 옵션이 표시되는 부분이에요 마지막으로 어떻게 벗어날 수 있는지 보여드릴게요 기존 select 요소 레이아웃에서 텍스트 이상의 콘텐츠로요 첫 번째 항목으로 돌아가서 컨트롤에서 가장 기본적인 부분인 버튼을 스타일링해 볼게요 처음부터 시작하면 네이티브 컨트롤이 나타나요 이제 새로운 customizable select appearance를 사용하면 더 적은 스타일 세트로 사이트 디자인에 맞게 바꿀 수 있어요 첫 번째 단계는 appearance: base-select를 적용하는 거예요 이전에 font-family: Gill Sans를 설정해 두었으니 body 요소에 body 폰트가 select 버튼에 상속되어 옆의 레이블과도 일치해요 벌써 한 단계 더 가까워졌어요 사이트 디자인에 맞춰지고 있어요 다음으로 배경, 테두리, 패딩을 조정할게요 사이트와 잘 어울리네요 마지막으로 화살표를 바꾸고 싶어요 customizable select에서는 ::picker-icon이라는 새 선택자로 바꿀 수 있어요 ::picker-icon 선택자로 content 속성에 새 글리프를 설정하고 width로 크기를 맞춰 줄게요 :open 의사 클래스를 사용하면 드롭다운 메뉴가 열렸을 때 버튼에 다른 색상을 설정할 수도 있어요 열린 상태에서 화살표도 텍스트 색상과 일치하도록 업데이트했어요 사이트의 나머지 부분과 어울리는 select예요 CSS 몇 줄만으로 만들었어요 이제 드롭다운 자체도 스타일링하고 싶은데 customizable select로 가능해요 방법을 알려드릴게요 ::picker-icon처럼 드롭다운 메뉴에도 스타일을 적용할 수 있는 부분이 있어요 메뉴 자체는 select 요소의 ::picker(select)로 스타일링하고 체크 표시는 option 요소의 ::checkmark로 스타일링해요 이제 CSS를 추가해 볼게요 깨끗한 상태로 시작하기 위해 먼저 네이티브 메뉴를 해제해야 해요 새로운 ::picker(select) 선택자를 사용해서 appearance: base-select를 설정하면 돼요 이제 준비됐어요 먼저 패딩과 마진으로 간격을 조정할게요 드롭다운의 테두리와 box-shadow를 처리해 볼게요

완벽해요 이제 선택된 옵션을 더 눈에 띄게 해서 고객이 뭘 선택했는지 알기 쉽게 만들고 싶어요 checked 옵션에 굵은 글꼴을 설정하고 나머지는 회색으로 만들 수 있어요 마지막 단계로 기본 체크 표시를 바꿀게요 content CSS 속성을 설정하고 ::checkmark 선택자에 width를 지정해서요 ::picker-icon에 했던 것과 비슷하게요 Sort by 메뉴를 이렇게까지 스타일링할 수 있다니 놀랍네요 코드는 정말 적은데요 더 나아갈 수 있을까요?

customizable select에서는 텍스트로 표시된 단순한 옵션 목록을 넘어설 수 있어요 다음 기능으로 예를 들어볼게요 제 클라이언트는 몇 가지 카테고리 사진으로 유명한데요 그 사진들을 부각시키고 싶어요 가장 인기 있는 카테고리별로 사진을 찾아볼 수 있게 할게요 이전 스타일을 사용해서 다른 select 요소를 만들기로 했어요 그런데 select에 기호를 추가해서 더 시각적으로 흥미롭게 만들고 싶어요 customizable select로는 어떤 종류의 콘텐츠도 넣을 수 있어요 이미지, 동영상, 이모지, 뭐든지요 각 option 요소 안에 SVG와 레이블을 사용해서 고객이 카테고리를 더 쉽게 탐색하도록 했어요 이미지 alt 텍스트는 비워뒀어요 스크린 리더에서 "Flowers" 레이블이 두 번 읽히지 않도록요 체크 표시를 제거했으니 선택된 옵션을 더 눈에 띄게 표시하고 싶어요 checked 선택자로 색상을 바꿀게요 작동은 하는데 레이아웃이 창에 잘 맞지 않아요 기호 때문에 드롭다운이 너무 길어졌어요 다른 방법을 써야겠어요 customizable select에서는 select 드롭다운에 다양한 레이아웃을 그 어느 때보다 쉽게 적용할 수 있어요 드롭다운에서 다른 CSS 기능의 강력함도 활용하면서요 여기서는 그리드 레이아웃을 사용했어요 grid-template로 행과 열의 수를 정의하고 gap으로 그리드 셀 사이의 간격을 정의해요 드롭다운이 깔끔한 그리드로 정렬됐어요 훨씬 더 정돈된 것 같아요 드롭다운은 완성했는데 이제 선택된 옵션의 SVG를 버튼 안에 표시하고 싶어요 버튼 안에요 기호는 이미 HTML 마크업에 있는데 왜 버튼에는 표시가 안 되는 걸까요?

이게 되려면 한 가지가 더 필요해요 select에는 버튼이 있어요 사람들이 클릭해서 드롭다운을 여는 부분이죠 그런데 그 버튼은 텍스트만 표시해요 제 이미지는 리치 콘텐츠예요 customizable select에서 제공하는 또 다른 도구를 사용해서 이 문제를 해결할게요 바로 요소예요 customizable select를 사용하면 이제 내장 버튼을 교체할 수 있어요 button 요소를 배치해서 select 요소의 첫 번째 자식으로요 현재 버튼이 비어 있어서 화살표만 보여요 select 요소 안에 버튼을 넣는 건 이전에 HTML에서 허용되지 않았는데 이제 버튼 안에 커스텀 콘텐츠를 넣을 수 있게 됐어요 레이블이나 새로운 요소처럼요 이것의 특별한 점은 풍부한 콘텐츠를 보여준다는 것입니다. 선택된 옵션의 "Everything" 레이블 옆에 있는 SVG처럼요 Tim이 이 메뉴의 모양과 작동 방식을 정말 좋아할 것 같아요 하지만 아직 다 끝나지 않았어요 customizable select를 지원하지 않는 브라우저에서 어떻게 보이는지 확인해야 해요 바로 여기서 점진적 향상이 필요합니다 기능을 지원하지 않는 브라우저에서도 여전히 사용할 수 있어요 고객에게 네이티브 팝업이 표시돼요 이것이 select 요소를 재사용하는 훌륭한 점 중 하나예요 시맨틱 요소이기 때문에 내장된 접근성 기능을 그대로 사용할 수 있어요

정말 신났어요 select 요소들이 사이트의 룩앤필에 잘 어울려요 재미있는 방사형 컬러 피커도 추가했어요 이것도 전부 customizable select로 만들었어요 이제 클라이언트에게 아름답고 정렬 가능한 사진 공간이 생겼어요 Safari의 지원을 활용해서 이미지 레이아웃에 Grid Lanes도 사용했어요 더 알아보려면 "Learn CSS Grid Lanes"를 확인하세요 Brandon이 이 새로운 레이아웃 방법을 알려드려요 이 기능들은 Safari 27에서 제공됩니다 지금 바로 사용해 보고 싶다면 Safari Technology Preview나 Safari Beta를 다운로드하세요

webkit.org의 데모도 꼭 확인하시고 간단한 것부터 스타일링을 시도해 보세요 customizable select로 여러분만의 웹사이트에서요 지원하지 않는 브라우저와 보조 도구로 꼭 테스트해 보세요 webkit.org의 블로그 게시물에서 모범 사례를 더 자세히 알아보세요 인터페이스를 모두를 위해 작동하게 만드는 방법을요 마지막으로 창의력을 발휘해서 다양한 방법으로 구현해 보세요 무엇보다 즐기세요 여러분의 웹사이트에서 이 기능이 어떻게 활용될지 너무 기대돼요 시청해 주셔서 감사합니다