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

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

 
Saturday, August 05, 2006

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


div 태그에 테두리를 만들고 색깔을 지정해 주기 위해서는

CSS 의 border 속성을 사용합니다. border 속성의 자세한 사용법은 여기에 있습니다: ▶▶ [HTML-CSS] DIV 태그로 간단한 박스(Box) 그리기 예제


그런데 border 속성은, div 박스의 상하좌우의 테두리를 한꺼번에 지정합니다. 만약 한쪽 면씩 다른 테두리를 지정하려면 이렇게 방향을 지정해 주어야 합니다.

상 -> border-top
하 -> border-bottom
좌 -> border-left
우 -> border-right


예제 (테두리마다 다른 스타일과 굵기 지정):
<div style="border-top:1px solid; border-bottom:10px solid; border-left:1px dashed; border-right:1px groove; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

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



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

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

왼쪽은 점선, 위쪽은 그냥 선, 오른쪽은 입체적인 선, 아래쪽은 굵은 선입니다.


예제 (테두리마다 다른 색깔 지정):
<div style="border-top:2px solid blue; border-bottom:2px solid red; border-left:2px solid chartreuse; border-right:2px solid yellow; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

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


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

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




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




tag: html
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 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top