mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Thursday, March 08, 2007

HTML-CSS] 수직선 태그, 세로 줄 긋기, 다단 편집; Vertical Line Tag


웹페이지에서 수직선 즉 세로로 된 직선을 긋는 것은 좀 복잡합니다. 별도의 태그가 제공되지 않기에, 테이블 태그를 이용하여 직접 구현해야 합니다. 또는 워드프로세서처럼 다단 편집을 하는 용도로서 수직선을 사용할 수도 있습니다. 다음 예제와 같습니다.

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>

원리는, 우선 칸이 2개 있는 테이블(표)을 만든 후, 좌측 칸의 우측 변에만 빨간색 선을 지정하고, 다른 변들은 보이지 않게 하는 것입니다.

위의 예제 출력 결과는 다음과 같습니다:





소나무가 가로수로서, 뜬구름의 간격으로 심겨 있는 길이 나오고 있다. 지금 길은 텅 비어 있지만, 저 소나무들의 강렬한 형태로 인해, 텅 비어 있지 않은 듯한 느낌이 들고 있다. 저 소나무들이, 영원한 인적 人跡 처럼 보이고 있다. 소나무들 사이의 멀고 가까운 간격은, 저 영원한 인적들이 나누는 영원한 대화인 듯싶다.자신이 살아 있다는 사실을 깨닫게 되었던 순간, 기쁘지도 슬프지도 않았었다.






수평선 긋기 태그: ▶▶ HTML-CSS] 수평선 긋기 태그, 수평 라인(가로 줄) 표현; Horizontal Line Tag

▶▶ [HTML-CSS] 테이블 td 태그의 바탕색 한꺼번에 변경/ 테두리 색 지정 / 테두리 빈틈 없애기

▶▶ [HTML-CSS] 표/테이블 table 태그의 기초




tag: html
HTML | CSS | 자바스크립트 JavaScript

0 Comments:

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top