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

CSS로 레이아웃을 잡을 때 보통 영역을 정확하게 확인하기 위해 해당 영역에 색상을 입히거나 임의의 텍스트를 넣어줍니다. 저는 보통 border style을 사용하는데 border는 상하좌우 1px씩을 더 먹게 되어 사이즈가 변하게 됩니다. 예를 들어 가로 300px, 세로 400px의 DIV 영역을 만들었을 경우, 여기에 border:1px solid red; 스타일을 적용했을 경우 DIV영역은 가로 302px, 세로 402px가 됩니다. 이런 1~2pxContinue reading “[CSS] 요소 영역의 사이즈 변화 없이 border 주는 방법”

[CSS] Table의 cellpadding, cellspacing, border 속성 style로 정의하기

옛날 우리는 Table을 이용해 레이아웃을 짜던 시절.. 거의 외우다 시피한 속성들이 있었죠. cellpadding, cellspacing, border.. 일명 DIV 코딩이라 불리우는 div 레이아웃을 사용하는 이 시점에서도 Table을 레이아웃으로 사용하지 않는다 뿐이지 아직도 Table은 유용한 녀석입니다. 하지만 예전같이 Table 태그라인 안에 속성을 박아넣고 W3C 검증을 받으면 Warning 메세지를 볼 수 있습니다. 즉, 형태를 꾸며주는 태그 속성대신 css를 이용하는Continue reading “[CSS] Table의 cellpadding, cellspacing, border 속성 style로 정의하기”