[To Do List-오류 해결] 웹에서는 됐는데? 2(feat.iPhone 파란 글씨, focus 시 테두리, 확대)

🔗 GitHub https://github.com/qwerty00ui88/To-Do-List
🔗 배포 링크 https://qwerty00ui88.github.io/To-Do-List/

🌈 Intro

배포하고 iPhone으로 테스트해 보니 textarea에 의도하지 않은 스타일이 적용되었다.

• 글씨가 파란색이 됨
• focus 시 테두리 스타일 변함
• focus 시 확대됨

input, textarea, button에는 브라우저 기본 스타일이 적용될 수 있다고 한다. 하나씩 해결해 보자.

파란 글씨 해결

/* src/index.css */
input, textarea, button {
  appearance: none; /*브라우저 기본 스타일 제거*/
  -moz-appearance: none; /*Mozilla Firefox 기본 스타일 제거*/
  -webkit-appearance: none; /*WebKit 기반 브라우저 기본 스타일 제거*/
  border-radius: 0; /*브라우저 기본 테두리 스타일 제거*/
  -moz-border-radius: 0; /*Mozilla Firefox 기본 테두리 스타일 제거*/
  -webkit-border-radius: 0; /*WebKit 기반 브라우저 기본 테두리 스타일 제거*/
}

focus 시 테두리 스타일 변경 해결

/* src/index.css */
input:focus, textarea:focus {
  outline: none;
}

focus 시 확대 해결

<!-- public/index.html -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

앞으로 프로젝트 시작 전 브라우저 기본 스타일 제거 후 시작하자!