CSS에서는 포커스 상태를 스타일링하기 위해 focus, focus-visible, focus-within과 같은 가상 클래스(pseudo class)를 제공하는데요. 그런데 이 녀석들이 이름이 묘하게 비슷해서 정확하게 언제 어떻게 쓰시는지에 대해서 햇갈려하시는 분들이 많은 것 같습니다. 이번 포스팅에서는 CSS의 focus와 focus-visible 그리고 focus-within 가상 클래스에 대해 자세히 알아보고, 각각이 나타내는 포커스 상황과 용도와 차이점을 비교해보겠습니다. HTML 요소의 포커스 상태 CSS의 포커스(foc
HTML에서 리스트를 만들 때 사용하는 <ul>, <ol>, <li> 요소는 다른 HTML 요소에서 사용하지 않는 특수한 CSS 속성이 많이 사용되서 스타일하기가 좀 까다로운 편인데요. 이번 포스팅에서는 HTML의 <ul> 또는 <ol> 요소로 마크업이 되는 리스트(list)와 <li> 요소로 마크업되는 리스트 아이템(list item)을 CSS로 스타일하는 요령에 대해서 자세히 정리해보겠습니다. HTML로 리스트 마크업 HTML에서 리스트는 <ul> 또는 <ol> 요소로 마크업 할 수 있는데요. 순서가 중요하지 않은 경우에는 <u
이번 포스팅에서는 CSS를 이용하여 라디오 버튼을 스타일하는 요령에 대해서 알아보겠습니다. 차근차근 따라오시다보면 아래와 같은 라디오 버튼을 만드실 수 있으실 거에요. 🍅😄 왜, 라디오 버튼을 스타일할까? 먼저 웹사이트를 만들 때 라디오 버튼(radio button)을 뭐하러 직접 스타일하는지에 대해서 잠깐 짚고 넘어가겠습니다. 일반적으로 웹사이트에서 라디오 버튼은 브라우저나 운영체제, 디바이스에 따라서 미묘하게 다르게 표현이 됩니다. 그래서 플랫폼에 구애받지 않고 일관적인 사용자 경험을 제공하기 위해서 라디오 버튼에 커스텀 스
웹이 지금과 같이 대중적인 플랫폼이 되는데 서로 다른 웹페이지를 무한대로 연결해주는 HTML의 링크(link)가 중요한 역할을 했을텐데요. 이번 포스팅에서는 HTML의 <a> 요소로 마크업이 되는 링크(link)를 CSS로 스타일하는 방법에 대해서 알아보겠습니다. 브라우저 기본 링크 스타일링 우리가 굳이 링크를 스타일해주지 않더라도 대부분의 브라우저에서는 링크를 유관으로 구분하기 쉽도록 기본적으로 스타일을 제공하는데요. 보통 이렇게 브라우저 자체에서 지원하는 기본 스타일을 User Agent Stylesheet이라고 합니다. 크롬
지난 포스팅에서는 커스텀(custom) React Hook을 사용하여 양식(form) UI를 구현해보았는데요. 이번 포스팅에서는 이와 유사한 방식으로 React Hook 기반의 API를 제공하는 React Hook Form 라이브러리에 대해서 알아보려고 합니다. 새로운 라이브러리를 배우는 가장 효과적인 방법은 그 라이브러리를 이용해서 무언가를 만들어보는 것이 겠죠? 본 포스팅을 끝까지 따라오시면 아래와 같은 로그인 폼(form)을 만드실 수 있으실 거 에요 😁 패키지 설치 React Hook Form 라이브러리는 자바스크립트 패키
이번 포스팅에서는 tabindex 속성을 사용해서 키보드 포커스 여부와 우선순위를 제어하는 방법에 대해서 알아보았습니다. 키보드 포커스 혹시 마우스가 고장나거나 배터리가 나가서 키보드로만 컴퓨터를 조작하거나 웹서핑을 해보신 적이 있으신가요? 마우스 사용자는 포인터로 웹페이지의 어디든지 클릭을 할 수 있지만, 키보드 사용자는 포커스라는 제한된 방법을 이용해야 되는데요. 다행히도 웹은 사용자와 상호작용(interactive)이 가능한 요소(element)는 기본적으로 키보드로 포커스가 잡히게 되어 있습니다. 대표적으로 <input>,
웹 접근성(accessibility)을 준수하는 드롭다운(dropdown)를 구현하는 것은 생각보다 쉽지 않은 일입니다. 사실 가장 쉬운 방법은 지난 포스팅에서 소개했던 것처럼 HTML의 <select> 엘리먼트를 사용하는 것인데요. <select> 엘리먼트를 사용하면 내부에 있는 <option> 엘리먼트에 커스텀 스타일을 적용할 방법이 없기 때문에 스타일링에 한계가 있습니다. 그래서 여러 가지 엘리먼트를 이용해서 직접 드롭다운를 만드는 경우가 많은데요. 이 때, 시각적으로는 원하는 모습의 UI를 얻을지 몰라도, 웹 접근성 측면에서
드롭다운(dropdown), 리스트박스(listbox), 콤보박스(combobox), 등 여러 가지 이름으로 불리우는 HTML의 <select> 엘리먼트와 CSS를 이용하여 아래와 같이 만들어보겠습니다. HTML 작성 사실 웹에서 드롭다운를 구현하는 방법은 여러 가지가 있지만, 본 포스팅에서는 가장 기본적인 HTML의 <select> 엘리먼트를 사용하도록 하겠습니다. 웹 접근성(accessibility)을 위해서 <label> 엘러먼트도 추가한 후에 <select> 엘리먼트와 연결을 해줍니다. 이렇게 해주면 <label> 영역뿐만