크롬에서 input, textarea, button에 생기는 파란색 테두리 없애는 방법
웹디자인을 하다보면 input 이나 textarea 등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다. 원인 IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다. input 이나 textarea 에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다. 해결방법 outline 은 border 와 흡사한 방식으로 css 로 핸들링을 할 수 있습니다. 그래서 그냥 focus 되는 영역의 outline 의 두께를 0 으로 만들면 됩니다. 주로 input 이나 textarea , button 요소에 생기기 때문에 해당 요소의 focus 를 0 으로 처리하면 됩니다. textarea:focus { outline: none; } button:focus { outline: none; } input:focus { outline: none; } 유의 사항 outline 요소는 border 요소와 흡사한데... border 의 경우 두께에 따라 넓이나 높이에 영향을 미치는 반면 outline 는 두께에 상관없이 넓이나 높이에 영향을 미치지 않습니다. 예를들어 전체 1280px 의 넓이 중.. sidebar 영역 의 넒이가 280px 본문영역 의 넓이가 1000px 테두리(border) 의 두께가 1px 이라면.. 전체 넓이 1280px 에 테두리 두께를 더해서 총 넓이는 1284px 가 됩니다. 하지만 outline 으로 테두리를 표시한다면 그냥 1280px 이 됩니다. outline 은 그냥 레이아웃 위에 레이어 로 위치한다고 보면 됩니다. 그렇다고 레이아웃 계산이 쉽다고 outline 을 border 대신 사용하지는 않습니다. outline 은 그냥 참고로 볼 때만 주로 사용되기 때문입