Visual Web Developer에서 HTML 표 편집에 대한 팁
업데이트: 2007년 11월
Visual Studio HTML 표 편집기는 HTML 표를 조작하여 웹 페이지의 레이아웃을 정의하고 내용을 열 형식으로 표시할 수 있는 강력한 기능의 도구입니다. 다음은 HTML 표 편집기를 가장 효과적으로 사용하는 데 도움이 되는 팁입니다.
HTML 표 편집
다음은 일반적인 표 편집 동작에 대한 설명입니다.
HTML 표 편집기는 table, tr, td 같은 HTML 표 요소를 시각적으로 편집할 수 있는 도구입니다. HTML 표 편집기를 사용하면 이러한 요소를 편리하게 편집할 수 있지만 HTML 표에서 지원하지 않는 기능은 편집할 수 없습니다.
표 편집기를 사용하면 HTML 표(table 요소 및 자식 요소)를 편집할 수 있지만 ASP.NET Table 컨트롤(asp:table 요소)은 편집할 수 없습니다. ASP.NET Table 컨트롤은 HTML 표가 사용되는 정적 레이아웃보다는 주로 프로그래밍 방식으로 사용하도록 되어 있습니다.
디자인 뷰는 브라우저에 실제로 나타나는 방식과 비슷하게 표를 렌더링합니다. 이는 브라우저에서 표의 HTML 요소를 해석하는 방식과 거의 비슷한 방식을 사용하기 때문입니다. 자세한 내용은 이 항목의 뒤에 나오는 "크기 지정 및 조정 동작" 단원을 참조하십시오.
편집 범위
디자인 뷰에서 편집한 내용이 표 요소에 적용되는 방식을 이해하면 도움이 됩니다. 다음 사항을 참고하십시오.
표의 각 셀은 디자인 뷰에서 해당 셀이 시작되는 행 또는 열의 멤버입니다. 행 또는 열에서 수행하는 작업은 해당 행이나 열의 모든 멤버에 적용됩니다. 셀에 colspan 또는 rowspan 특성이 포함된 경우 디자인 뷰의 셀을 소스 뷰의 해당 td 요소에 매핑하면 예상한 대로 결과가 나타나지 않을 수도 있습니다.
행 작업은 해당 행의 각 td 요소에 영향을 주고 tr 요소에는 영향을 주지 않습니다.
열을 선택하거나 수정하면 해당 열에 있는 모든 th 요소에 영향을 줍니다.
크기 지정 및 조정 동작
표, 행 또는 열 크기를 처음으로 지정하거나 이러한 요소의 크기를 조정하는 경우 표 편집기에서 예기치 않은 동작이 발생할 수 있습니다. 표 요소 크기의 동작은 브라우저에서의 표 동작을 반영합니다. 예를 들어 특정한 너비 설정이 없는 열은 표의 전체 너비, 표에 있는 다른 열의 너비 및 모든 열에 포함된 내용에 따라 확장 또는 축소됩니다.
내용 크기 우선 적용
일반적으로 셀 내용의 크기는 셀이나 행의 너비 또는 높이 설정보다 우선 순위가 높습니다. 예를 들어 표 셀에 그래픽이나 img 요소가 포함된 경우에는 그래픽 크기가 셀 또는 표의 너비보다 우선합니다. 마찬가지로 표 셀의 컨트롤도 우선 순위가 높습니다.
nowrap 특성이 설정되지 않은 셀에 텍스트가 포함되어 있으면 해당 셀의 너비 내에서 텍스트가 줄 바꿈됩니다. 그러나 텍스트에 빈 칸이나 문장 부호 같은 공백이 없는 경우에는 텍스트를 줄 바꿈할 위치가 없으므로 텍스트를 포함할 수 있도록 셀 너비가 다시 조정됩니다.
셀 내용은 행 높이보다도 우선합니다. 셀 내에서 텍스트가 줄 바꿈되면 행을 나타내는 tr 요소에 지정된 height 설정보다 행이 더 높아질 수 있습니다.
표 크기 지정 및 조정 지침
HTML의 디자인 방식 때문에 표와 표 요소에 할당되는 크기 설정이 충돌할 수 있습니다. 예를 들어 두 개의 열이 포함된 표에 100% 너비가 할당되고 두 열에 각각 100픽셀의 너비가 할당될 수 있습니다.
다음 표에서는 표 편집기에서 크기 조정 동작이 처리되는 방식을 요약하여 설명합니다. 모든 경우에서 셀 내용의 너비가 가장 우선합니다.
지정된 크기 |
동작 |
|---|---|
표 및 표의 모든 열에 너비가 지정되거나 표 및 표의 모든 행에 높이가 지정된 경우 |
표 크기의 우선 순위가 높으며 표 크기에 비례하여 열 또는 행 크기가 계산됩니다. |
표 및 표의 일부 열에 너비가 지정되거나 표 및 표의 일부 행에 높이가 지정된 경우 |
크기가 지정된 요소는 정확한 크기를 사용하여 렌더링되고 나머지 요소는 표의 전체 크기에 맞게 조정됩니다. .gif "참고") 참고:
표 편집기에서는 크기가 지정되지 않은 표 요소의 너비가 "auto"로 표시됩니다.
|
표의 각 열에만 너비가 지정되고 표 자체에는 지정되지 않거나 표의 각 행에만 높이가 지정되고 표 자체에는 지정되지 않은 경우 |
모든 표 열의 너비 또는 모든 표 행의 높이를 합하여 표 너비와 높이가 계산됩니다. |
표 또는 표 요소에 너비나 높이가 지정되지 않은 경우 |
테두리에 필요한 공백 및 셀 내용에만 너비나 높이가 계산됩니다. |
| 참고: |
|---|
td 요소에 사용되는 높이 또는 너비 단위가 서로 다른 경우에는 행이나 열의 크기를 조정할 때 표 편집기에서 단위를 픽셀로 정규화합니다. |