계발하는 개발자

어떤 요소에 테두리 효과를 주기 위해 일반적으로 border를 사용한다. 그러나 border값을 주는 순간 요소에 실제로 그만큼의 공간을 차지하게 되어 레이아웃에 영향을 끼친다. 아래 예시를 통해서 보면 border 적용된 div박스(왼)는 테두리 값만큼 공간을 차지해서 영향을 미치는 것 볼 수 있다. 반면 outline을 적용한 요소는 영향을 받지 않는다. 테두리 속성은 위 그림처럼 outline>border 순으로 요소에 효과를 주게 되는데 때문에 컨텐트 요소와 가장 가까이에 위치한 border값을 주게 되면 레이아웃에 영향을 미치게 된다. - - 일단 여기까지 보면 outline이 border 보다 더 좋아보인다. 그렇지만, outline 경우 boder-top, border-right 처럼 특정 ..