margin 값이 적용되지 않는 이유에 대해 딱 한마디로 이야기할 수 있습니다. 기계는 거짓말을 하지 않는다
포스팅을 꾸미기 위해 태그를 가끔 사용합니다. 가끔 사용하는 태그는 주로 테이블 태그입니다. 도표를 이미지로 넣기 보다는 테이블을 제공하면 도표속에 있는 텍스트는 뭉개지는 것 없이 읽을 수 있습니다. 다만 표가 화면보다크기에 가로 스크롤 바가 생기는 것이 부담이기는 합니다만, 이미지 보다는 테이블이 빠르고 분명하게 전달할 수 있을 것 같아 웬만하면 테이블로 제공합니다.
그런데 이 테이블를 약간 꾸미기 위해 margin을 사용했는데 적용되지 않네요.
<table style="border-collapse: collapse; margin: 0 100 0 100; width: 150px;">
<tr>
<td style="width: 150px; height: 150px; border: 1px solid black; text-align: center;">
넓이150 높이150 <br> padding: 0 100 0 100;
</td>
</tr>
</table>
넓이150 높이150 padding: 0 100 0 100; |
결과를 보면 전혀 마진값이 적용되지 않습니다.
이 소스는 흔한 겁니다. 이전부터 사용했던 소스이며, 기본적인 스타일 값에 적용했던 것이죠,
body,table,td,tr,table {
font-family:맑은 고딕; font-size:11pt; margin : 10 0 30 10;
<!-- 각종 적용값 -->
}
가장 흔하게 보는 소스이며, 이 소스 역시 유명한 자료에서 가져와서 오랫동안 사용했었는데, 그런데도 magin 값이 적용되지 않는 겁니다.
결론은 딱 하나입니다.
magin값 작성이 잘 못되었습니다. 이렇게 작성해야 합니다.
<table style="border-collapse: collapse; margin: 0 100px 0 100px; width: 150px;"> <tr> <td style="width: 150px; height: 150px; border: 1px solid black; text-align: center;"> 넓이150 높이150 <br> padding: 0 100px 0 100px; </td> </tr> </table>
넓이150 높이150 padding: 0 100px 0 100px; |
이전에 사용했던 margin: 0 10 0 10; 이것을 magin값 속성에 단위를 반드시 넣어줘야 합니다. 이전에는 정상적으로 작동했는지 모르지만, 그동안 웹 표준이 더욱 엄격해지면서 잘못된 CSS코드는 최신 브라우저에서는 작동하지 않습니다. 그리서 웹표준 HTML5 등의 이름으로나오고 있죠. 이전에는 잘 사용했더라도 시대가 요구하는 흐름에 조금씩 익숙해져여 합니다.
참고로 margin: 10 100px 20 100px; 이것은 위에서 부터 시작해서 오른쪽 방향으로 적용됩니다. 위에는 10px을 띄우고 오른쪽 100px, 아래 20, 왼쪽 100px을 띄워라는 명령입니다. magin값은 테이블 외부 간격을 나타내고 테이블 내부 간격을 조절하는 것은 padding가 있습니다.
<td style="padding: 10px;">셀 내용</td>
이렇게 사용할 수 있습니다.
그리고 테이블을 속성에서도 태그를 잘 못 사용하는 예를 볼 수 있는데요,
<table border="1" style="border-spacing: 10px; border-collapse: collapse;">
border-spacing: 10px; 이 속성은 셀 간의 간격을 10픽셀로 설정합니다.
border-collapse: collapse; 이 속성은 테이블의 셀 간 테두리를 하나로 합쳐줍니다. 이렇게 하면 셀 경계가 겹쳐서 단일 테두리로 표시됩니다. 셀 간의 테두리를 분리하고 싶다면 separate로 설정할 수 있습니다.
여기서 착각하는 것은 이 두개의코드를 같이 사용할 수 없다는 겁니다. border-collapse: collapse;가 적용되면 border-spacing 속성은 무시됩니다. 즉, 두 속성을 함께 사용해도 문제는 없지만, border-collapse: collapse;를 사용하면 border-spacing이 효과를 발휘하지 않습니다. 그래서 border-collapse: collapse; 을 사용할 때는 border-spacing는 사용하지 않습니다.
이렇게 사용하면 됩니다.
<style>
table {
border: 1px solid black; /* 테이블의 테두리를 설정 */
border-collapse: collapse; /* 셀 간의 테두리를 하나로 합침 */
}
td {
padding: 10px; /* 셀 내부의 여백을 설정 */
}
</style>