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)태그에, 점선 테두리 만들기

☞ HTML/CSS/JavaScript

0 Comments: