HTML 레이아웃 잡을 때 박스 안쪽 테두리 실전 2가지 방법

웹을 디자인(개발?) 하다 보면 레이아웃을 잡기 위해서 외곽 (border) 를 임시로 설정하는 경우가 많습니다.

하지만 외곽을 주면 그 보더의 두께에 따라서 영역이 커집니다. 예를 들어 100% 짜리 폭의 div 에 border 를 1px 주면 (브라우저에 따라서 다르지만) 원하지 않던 스크롤바가 생기게 되죠. 그래서 전체 레이아웃에 오차가 발생될 수 있고 약간의 짜증이 나기도 합니다.

이럴때는 안쪽 테두리를 주는게 레이아웃에 더 합리적입니다.

예를 들어서 다음과 같이 모든 div 에 보더를 주는데 영역을 안쪽으로 주는 방법입니다.

div {
	border: #f00 3px solid;
	box-sizing: border-box;
}

 

다음은 영역 안쪽의 그림자를 주는 방식입니다. 예를 들어서 다음과 같이 3px 짜리 안쪽 테두리를 줄 수 있습니다.

참고로 저는 이 방법을 더 선호합니다. 이유는 테두리 두께로 인해서 안쪽에 있는 콘텐츠의 위치에 영향을 주지 않기 때문입니다.

div {
	box-shadow: 0 0 0 3px #f00 inset;
}

 

다음의 그림들을 확인해 보세요. 예로써 두께를 10px 를 적용해 보았습니다. 왼쪽의 그림이 앞에 설명한 border 를 이용한 것이고 오른쪽의 그림이 box-shadow 를 이용한 것입니다. 각각 장단점이 있을 겁니다. 단지 박스 안쪽의 콘텐츠 표시가 중요하다면 왼쪽의 방법 (border)이 좋을 것이며, 박스 안쪽의 레이아웃이 중요하다면 오른쪽 방법 (shadow) 을 택하면 될 것 같습니다. 또한, CSS 에서 두 줄보다 한줄이 편하긴 하죠.