인디노트

웹을 디자인(개발?) 하다 보면 레이아웃을 잡기 위해서 외곽 (border) 를 임시로 설정하는 경우가 많습니다. 하지만 외곽을 주면 그 보더의 두께에 따라서 영역이 커집니다. 예를 들어 100% 짜리 폭의 div 에 border 를 1px 주면 (브라우저에 따라서 다르지만) 원하지 않던 스크롤바가 생기게 되죠. 그래서 전체 레이아웃에 오차가 발생될 수 있고 약간의 짜증이 나기도 합니다. 이럴때는 안쪽 테두리를 주는게 레이아웃에 더 합리적입니다. 예를 들어서 다음과 같이 모든 div 에 보더를 주는데 영역을 안쪽으로 주는 방법입니다. div { border: #f00 3px solid; box-sizing: border-box; } 다음은 영역 안쪽의 그림자를 주는 방식입니다. 예를 들어서 다음과 같이 ..