웹 페이지를 만들다 보면 수많은 <table> 과 <div> 에 둘러 싸여 내가 지금 도대체 어디쯤에 작업을 하고 있는지 알수 없게 되어 버리는 경우가 있다.
물론 요즘에는 크롬이나 익스플로어나 모두 개발자 도구 기능을 제공하고 있고, 그 덕분에 작업하고 있는 영역의 태그가 어느 부분인지 알아내는 것이 그다지 어렵지는 않다.
하지만, 내가 구세대라서 그런가... -_-;;
역시 화면에 네모나케 줄이 떡하니 그어져 있는게 마음이 좀 안정된다.
<table> 이야 <table border="1'> ... 뭐 이런식으로 하면 간단하게 되지만, <div> 태그는 이렇게 간단하게 되지는 않는다. 결국 스타일 시트를 써야하는데...
<div> 테그가 사용된 영역을 테두리 선으로 표현 하려면...
<div style="border-width:1px;border-style:solid;border-color:#000000;" > </div>
이렇게 해주면 된다.
단, border-color 는 생략해도 되지만, border-style 는 지정해 줘야 한다.
위에서 border-color 까지 지정해 준것은 스타일시트라는 것이 이전 속성이 "상속" 되기 때문에 이전에 쓴 <div> 태그의 색상 속성 때문에 보이지 않거나, 알아보기 어려운 경우가 있기 때문이다.
