[FE] Border vs Outline

Border

border는 가장 기본적으로 많이 사용하는 박스에 테두리를 만드는 방식

 

border를 이용해서 테두리를 만들었을 때 테두리가 바깥쪽에 생성되므로 공간을 차지

=> 100px x 200px div 박스에 5px 테두리를 만들었다면 110px x 210px의 크기가 되는 셈

 

공간을 차지하기 때문에 주변 element를 움직이게 하여 레이아웃에 영향을 미친다는 의미

=> 특성 상태에 따라서 border를 변경한다면? 성능에 문제가 되겠지...

이유가 궁금하다면...?

근데 왜 사용하는걸까?

border를 적용시킬 때 반드시 모든 엣지에 적용시켜야 하는게 아님

border-right : 1px solid #000000; 을 이용하면 오른쪽 엣지에만 적용할 수 있음!

tailwind도 마찬가지로 border-방향을 통해서 특정 엣지에만 적용 가능

 

Outline

레이아웃에 영향을 미치지 않게 하기 위해서 사용할 수 있는 방법

border와 마찬가지로 박스에 테두리를 만드는 방식 중 하나

 

단, border와 다르게 공간을 차지하지 않음

=> 박스 안쪽에 테두리가 생성

Outline만 사용해도 되는거 아닌가요?

물론 공간을 차지하지 않는 것이 장점이 될 수도 있지만...

박스 영역 위에 존재한다는 건 해당 박스의 안의 요소와 겹칠 수도 있다는 것

또한 border와 다르게 특정 엣지에만 설정하는것도 불가능

게다가 모든 브라우저에서 인식이 안된다는 것도 큰 단점

Input Tag

input 태그를 사용하면 기본적으로 focus 되었을 때 테두리가 보이는데...?

이걸 없애고 싶으면 어떻게 해야할까...

 

해당 테두리는 outline으로 설정되어 있기 때문에 border: none; 속성으로는 아무 일도 일어나지 않음

반드시 focus: outline-none으로 설정해줘야 하는 것을 명심