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

 
Previous Post [HTML-CSS] DIV 태그에 테두리 만들고 색깔 변경 / 상하좌우 다른 테두리 만들기...컴퓨터 화면 저장(캡처;갈무리)하는 법은? 모니터 화면을 파일로 저장하는 방법은? - Sc...게임 화면 캡처 / 마우스 커서까지 갈무리 / 다이렉트 엑스(DirectX) 화면 캡쳐; ...[Font] 만화 그리기에 적당한 폰트는? / 필기체, 손글씨 글꼴은?윈도우 계산기로 루트 근사값 (제곱근) 계산하기 - Windows Calculator : ...선풍기 과열로 화재날 뻔함 / 부채의 재발견 - Electric Fan[포토샵] 각종 효과와 필터 테스트 / 모니터 색 보정용으로 좋은 사진: Photoshop...[엑셀 팁] 셀의, 결과 값과 수식을 서로 토글하여 나타내기; 결과와 수식을 전환 - Ex...다이렉트 엑스, 버전 알아보기; DirectX 진단 도구 (dxdiag.exe) - Dir...Crafty : 공개 체스 엔진 / 텍스트 모드 체스 게임 / Chess 엔진 C소스

HTML-CSS] DIV 태그/테이블(TABLE, TD)태그에, 점선 테두리 만들기

Saturday, August 05, 2006

다음과 같이 border 속성에 dashed 라는 값을 지정해 주면 테두리가 점선으로 나옵니다:

DIV 태그 테두리에 점선 지정 예제


보통 점선:
<div style="border:1px dashed; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
</div>


저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.





좀더 굵은 점선
<div style="border:2px dashed; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
</div>


저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.




아주 굵은 점선
<div style="border:5px dashed; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
</div>


저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.





점으로 된 점선
위에서 사용된 dashed 는 실은 점이 아니라 짧은 직선들로 이루어져 있습니다. 아래와 같이 dotted 로 하면 "진짜 점"으로 된 점선이 만들어지기는 하는데, IE와 파이어폭스에서 서로 다르게 보이기 때문에 되도록, dashed 를 사용하는 것이 좋습니다. 즉 이 예제는 추천하지 않습니다.
<div style="border:5px dotted; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
</div>


저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.





테이블 태그에 점선 지정 예제


<table style="border:1px dashed black; border-collapse:collapse;">
  <tr><td style="border:1px dashed black; padding:10px;">내용 1</td></tr>
  <tr><td style="border:1px dashed black; padding:10px;">내용 2</td></tr>
</table>


내용 1
내용 2




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





▶▶ [HTML-CSS] DIV 태그에 테두리 만들고 색깔 변경 / 상하좌우 다른 테두리 만들기 - border

▶▶ [HTML-CSS] DIV 태그로 간단한 박스(Box) 그리기 예제


☞ HTML/CSS/JavaScript

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

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