[CSS] <input> 박스 클릭 시 생기는 테두리 제어하기

<input> 박스 클릭 시 생기는 테두리

<input> 박스를 클릭 했을 때 outline 속성의 기본값이 적용되어 원하지 않는 테두리가 생기는 일이 종종 발생한다.

outline

outline 속성은 border 바깥 영역에 생기는 외곽선을 의미한다.

border 와 생김새는 유사하지만, outline 은 너비가 페에지 레이아웃에 관여하지 않는다는 점이 큰 차이점이다.
따라서 레이아웃을 완성한 후, 특정 요소를 눈에 띄게 표시하기 위해 사용하기도 한다.

사용법

outline: <color> <style> <width>;

예시

input:focus {outline: 2px solid #d50000;} /* outline 테두리 속성 수정 */
input:focus {outline: none;} /* outline 테두리 없애기 */