본문으로 건너뛰기
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

아이폰 특유의 button 모양 없애는 -webkit-appearance: none 제대로 사용하기

요소 하나에 대해서라면 -webkit-appearance: none을 주면 되지만, 사이트 일반에 대해 적용하려면 고려가 복잡해집니다.

(코드만 바로 보시려면 아래로 스크롤하세요.)

아이폰의 기본 button은 모양이 예쁘지만, 사실 UI 요소들을 아무런 커스터마이징 없이 사용하려고 하는 게 아니라면 별 도움이 되진 않습니다.

그리고 input, button, textarea는 거의 무조건 커스터마이징을 한다고 봐야죠. 셀렉트박스야 잘 하지 않는다 쳐도 말입니다.

person writing on white paper
사진 Firmbee.com

매번 개발할 때마다 아이폰의 기본 모양을 리셋하는 CSS 코드를 찾게 되는데요. 코드는 -webkit-appearance: none으로 비교적 외우기 쉽습니다. 문제는 적용 범위입니다.

이 속성은 그냥 전체에게 적용하는 게 능사가 아닙니다. MDN appearance 속성 설명 페이지에서도 none조차 모든 브라우저에서 모든 요소에 대해 같은 동작을 하는 게 아니니 조심해서 써야 한다고 말합니다.

이 속성이 iOS 사파리에만 영향을 미치는 것도 아닙니다. 모든 브라우저가 브라우저의 기본 스타일을 UI 요소들에 매겨 놨습니다. 그걸 없애면 라디오 버튼, 체크박스 외곽선이 사라질 수도 있고, range 타입의 배경도 사라질 수 있습니다(아래 제가 구성한 테스트에서 확인할 수 있습니다).

그래서 아래 제가 설계한 코드는 우리가 디자인을 자주 건드리는 요소들에 대해서만 적용하려고 한 코드입니다.

  • 일단 둥근 모서리는 명시해서 제어하게 했습니다(input[type=color]는 유지).
  • 브라우저 기본 모양은 버튼에서만 제거했습니다.
    버튼이 가장 말썽을 일으키는 요소이고, 또 거의 무조건 커스터마이징을 하는 요소기 때문입니다.
    나머지 input, textarea, select는 필요에 따라서 각기 적용하는 편이 낫다고 판단했습니다.
  • -webkit-appearance: none을 줘도 iOS 사파리에서는 여전히 버튼의 기본 모양이 있습니다.
    버튼의 글자색은 파란색이고, submit 버튼엔 파란 배경색과 희고 굵은 글씨가 있습니다. 그러나 이 역시 프로젝트별로 판단하는 편이 낫다고 봤습니다.

그래서 나온 코드는 아래와 같습니다. 앞으로 좀 다듬기는 해야 합니다. 아직 실전에 많이 사용해 본 건 아닙니다.

input:not([type=color]), button, textarea, select {
  border-radius: 0;
}

button, input[type=button], input[type=submit], input[type=reset] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

아래는 코드펜에서 진행한 테스트입니다. 리셋5가 위의 코드를 적용한 것입니다. (코드펜을 내보내기한 html 문서로 볼 수도 있습니다.)

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

Leave a Reply

Your email address will not be published. Required fields are marked *