Thursday, March 08, 2007
HTML-CSS] 수직선 태그, 세로 줄 긋기, 다단 편집; Vertical Line Tag
웹페이지에서 수직선 즉 세로로 된 직선을 긋는 것은 좀 복잡합니다. 별도의 태그가 제공되지 않기에, 테이블 태그를 이용하여 직접 구현해야 합니다. 또는 워드프로세서처럼 다단 편집을 하는 용도로서 수직선을 사용할 수도 있습니다. 다음 예제와 같습니다.
빨간 수식선을 그어 양쪽 문단을 다단 편집합니다.
파일명: example.html
원리는, 우선 칸이 2개 있는 테이블(표)을 만든 후, 좌측 칸의 우측 변에만 빨간색 선을 지정하고, 다른 변들은 보이지 않게 하는 것입니다.
위의 예제 출력 결과는 다음과 같습니다:
수평선 긋기 태그: ▶▶ HTML-CSS] 수평선 긋기 태그, 수평 라인(가로 줄) 표현; Horizontal Line Tag
▶▶ [HTML-CSS] 테이블 td 태그의 바탕색 한꺼번에 변경/ 테두리 색 지정 / 테두리 빈틈 없애기
▶▶ [HTML-CSS] 표/테이블 table 태그의 기초
2단 편집; 수직선(세로 직선) 만들기 예제
빨간 수식선을 그어 양쪽 문단을 다단 편집합니다.
파일명: example.html
<table>
<tr style="vertical-align:top">
<td style="width:190px; border-right:1px solid red; padding-right:12px; text-align:justify">소나무가 가로수로서, 뜬구름의 간격으로 심겨 있는 길이 나오고 있다. 지금 길은 텅 비어 있지만, 저 소나무들의 강렬한 형태로 인해, 텅 비어 있지 않은 듯한 느낌이 들고 있다. 저 소나무들이, 영원한 인적 人跡 처럼 보이고 있다. 소나무들 사이의 멀고 가까운 간격은, 저 영원한 인적들이 나누는 영원한 대화인 듯싶다.</td>
<td style="padding-left:10px">자신이 살아 있다는 사실을 깨닫게 되었던 순간, 기쁘지도 슬프지도 않았었다.</td>
</tr>
</table>
<tr style="vertical-align:top">
<td style="width:190px; border-right:1px solid red; padding-right:12px; text-align:justify">소나무가 가로수로서, 뜬구름의 간격으로 심겨 있는 길이 나오고 있다. 지금 길은 텅 비어 있지만, 저 소나무들의 강렬한 형태로 인해, 텅 비어 있지 않은 듯한 느낌이 들고 있다. 저 소나무들이, 영원한 인적 人跡 처럼 보이고 있다. 소나무들 사이의 멀고 가까운 간격은, 저 영원한 인적들이 나누는 영원한 대화인 듯싶다.</td>
<td style="padding-left:10px">자신이 살아 있다는 사실을 깨닫게 되었던 순간, 기쁘지도 슬프지도 않았었다.</td>
</tr>
</table>
원리는, 우선 칸이 2개 있는 테이블(표)을 만든 후, 좌측 칸의 우측 변에만 빨간색 선을 지정하고, 다른 변들은 보이지 않게 하는 것입니다.
위의 예제 출력 결과는 다음과 같습니다:
| 소나무가 가로수로서, 뜬구름의 간격으로 심겨 있는 길이 나오고 있다. 지금 길은 텅 비어 있지만, 저 소나무들의 강렬한 형태로 인해, 텅 비어 있지 않은 듯한 느낌이 들고 있다. 저 소나무들이, 영원한 인적 人跡 처럼 보이고 있다. 소나무들 사이의 멀고 가까운 간격은, 저 영원한 인적들이 나누는 영원한 대화인 듯싶다. | 자신이 살아 있다는 사실을 깨닫게 되었던 순간, 기쁘지도 슬프지도 않았었다. |
수평선 긋기 태그: ▶▶ HTML-CSS] 수평선 긋기 태그, 수평 라인(가로 줄) 표현; Horizontal Line Tag
▶▶ [HTML-CSS] 테이블 td 태그의 바탕색 한꺼번에 변경/ 테두리 색 지정 / 테두리 빈틈 없애기
▶▶ [HTML-CSS] 표/테이블 table 태그의 기초
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home