# CSS로 더 나은 클릭 타겟 사이즈 디자인하기

> Clean Markdown view of GeekNews topic #12898. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=12898](https://news.hada.io/topic?id=12898)
- GeekNews Markdown: [https://news.hada.io/topic/12898.md](https://news.hada.io/topic/12898.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-01-17T09:49:07+09:00
- Updated: 2024-01-17T09:49:07+09:00
- Original source: [ishadeed.com](https://ishadeed.com/article/target-size)
- Points: 36
- Comments: 1

## Topic Body

- 버튼/링크/카드를 더 클릭/터치/탭하기 쉽고, 잘못 누르지 않는 사이즈로 만들기   
- "타겟 사이즈"를 부르는 명칭은 제각각 : 애플은 hit target, 구글 매터리얼은 Touch target, WAI는 target size, 구글 라이트하우스는 Tap Target, 디자인 커뮤니티에서는 Clickable Area   
- WCAG기준 타겟 사이즈는 적어도 44 x 44 CSS 픽셀이상이어야 함 (안드로이드는 48x48)  
  - 그보다 작으면 터치 써클이 중첩되어 잘못된 클릭이 일어날수 있음   
- Google Design for Driving 에서는 최소 76dp x 76dp   
- 비쥬얼한 타겟 피드백을 주는게 좋음(엘리먼트에 테두리 혹은 배경 반전)  
- 24x24 보다 작은 타겟의 경우 충분한 거리를 두는게 필요함 (Line Height : 1.4, Padding: 1rem 등 )  
- ProgressBar도 Height를 키워서 충분한 터치공간을 주는게 좋음   
- 같은 액션을 주는 객체 사이에는 Dead Target Area제거하기   
- `:before` 와 `:after` 같은 Pseudo 엘리먼트를 이용하여 타켓 사이즈를 더 크게 만들기 	  
- label 에는 꼭 for 붙여서 타겟 사이즈 확장  
- 체크박스는 padding-block 을 이용하여 타겟 사이즈 크게 만들기   
- 버튼/텍스트 링크에도 padding  
- 리스트 아이템에는 padding 과 `display:flex`로 전체 아이템 크기로 확장   
- 타겟 사이즈 테스팅 방법 : DevTools 이용, CSS Outline 적용, Polypane 브라우저 사용

## Comments



### Comment 22590

- Author: hohpark
- Created: 2024-01-26T18:16:01+09:00
- Points: 1

대단한 내용이라서 작성자를 보니 Ahmad Shadeed 이군요. 이분이 쓴 글들을 보면 정말 감탄을 할 수 밖에 없더라고요.