[CSS] 요소 영역의 사이즈 변화 없이 border 주는 방법

CSS로 레이아웃을 잡을 때 보통 영역을 정확하게 확인하기 위해 해당 영역에 색상을 입히거나 임의의 텍스트를 넣어줍니다.

저는 보통 border style을 사용하는데 border는 상하좌우 1px씩을 더 먹게 되어 사이즈가 변하게 됩니다.

예를 들어 가로 300px, 세로 400px의 DIV 영역을 만들었을 경우, 여기에 border:1px solid red; 스타일을 적용했을 경우 DIV영역은 가로 302px, 세로 402px가 됩니다.

이런 1~2px 차이때문에 레이아웃이 깨지는 경우가 생겨 확인하는데에 불편함이 있습니다. 하지만 border 말고도 비슷한 역할을 하는 스타일이 존재합니다. outline 이라는 스타일입니다. 사용법은 border와 같고 해당 영역의 사이즈에 변화를 주지 않습니다.

단 border-left, border-top 같은 부분 적용은 안되는 듯합니다. 아마 다른 방법이 있는 듯합니다. 이 부분은 좀 더 찾아보고 다음 포스팅에서 다루겠습니다.

찐빵

이 곳에 작성된 모든 컨텐츠는 CCL 규약의 CC BY-NC-SA (저작자표시-비영리-동일조건변경허락) 조건을 따릅니다. 비상업적 용도로 출처를 밝혀주시면 얼마든지 공유 가능합니다.

You may also like...

%d 블로거가 이것을 좋아합니다: