[CSS] :focus 사용시 주의할 점! / border / outline / 차이
프로젝트를 하던 중 input 태그에 위와 같은 스타일을 적용하고 focus 되었을 때 border의 색을 바꿔주고 싶어 focus 가상 클래스에 아래와 같이 border를 바꾸어 주었다.
그런데 이렇게 적용이 안되고 까만색으로 표시된다.
문제를 찾기 위해 개발자도구를 켰지만..
개발자 도구 상으로는 잘 적용됐다고 나온다..!!ㅋㅋㅋ
저번에는 배경 색을 변화시킬 때 background-color 대신 background를 사용했더니
잘 적용된 기억이 있어서 혹시 border 대신 사용되는 속성이 있는지 찾아보았다.
구글링 해보니 outline이라는 속성을 찾을 수 있었다. 따라서 border 대신 outline을 사용해서 구현해 보았다.
구현은 잘 되는데 과연 border과 outline을 바꿔서 사용해도 될까?
따라서 둘의 차이를 찾아보았다.
쉽게 말하면 둘의 차이는 다음과 같다.
div에 border, outline을 2px 준다고 하고, div의 크기를 100px X 200px로 지정했다고 하자.
border는 div 바깥에 선을 더해주기 때문에 총 border까지 합한 div의 크기는 102px X 202px이 된다.
반대로 outline은 div 내부에 그려진다고 생각하면 된다.
즉 outline과 border를 더해도 크기는 여전히 100px X 200px이다.
따라서 본인의 필요에 맞게 둘 중에 골라 사용하면 된다.
나는 border를 주어야 했기 때문에 outline으로 문제를 해결하면 안 됐다.
팀원에게 물어봐 기본적으로 주어진 outline을 none으로 바꿔보라는 조언을 들었다.
기존에 설정되어 있던 outline이 두꺼워 border를 가릴 수도 있다는 이야기를 해 주었다.
따라서 다음과 같이 outline:none으로 변경 후 border의 색상을 변경하니 잘 작동했다.
reset css를 적용했음에도 input의 outline을 없애주지 않는 게 신기하기도 했고
앞으로 주의해야겠다는 생각이 들었다.