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

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

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

Saturday, August 05, 2006

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:

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