[CSS] border 스타일 정리 (예제 포함)

블로그&홈페이지 팁 2009/07/04 18:39

홈페이지에 이미지 테두리나 테이블 또는 그냥 박스를 만들 때 이미지로 하지 않고 스타일시트(CSS)의 border 속성을 이용해서 만들 수가 있다.

 

간단하게 테두리를 두르는 일반적인 박스는 solid로 하면 되는데, 그 외 것들을 자꾸 까먹어서 정리해 본다.

 

박스(정확히 말하면 객체의 테두리 선) 만들때의 기본 요소는 선의 모양(border-style), 선의 굵기(border-width), 선의 색상(border-color) 3가지다.

 

 

선의 모양(border-style)
solid, double, groove, dotted, dashed, inset, outset, ridge, hidden

 

border-style

 

 

 

선의 굵기(border-width)와 선의 색상(border-color)은 별도로 설명할 필요는 없을 것 같아 선의 모양(border-style)과 같이 표현해 보겠다.

 

 style에 inset 을 넣고 노란색으로 10pt의 박스를 만든 예

style="border-width: 10pt; border-style: inset; border-color:yellow"

 

 테이블에 border style 을 적용한 예

스타일시트를 적용한 테이블

스타일시트 소스

<style>
table { border-color: #408080; border-style: dashed; }
td { border-color: #FFBD32; border-style: ridge; }

</style>

 

 

 

이 밖에도 박스의 위/아래/좌/우를 별도로 지정해서 값을 지정할 수도 있다.

속성의 명칭은 border-style, border-width, border-color의 중간에 top. bottom, left, right 를 넣으면 된다.

예를 들면, 상단선의 색상의 속성 명칭은 border-top-color 이 된다.

 

 아래에 선을 넣은 예

style="border-bottom-color:green; border-bottom-style:dotted; border-bottom-width:10px;"

 

 좌/우에 선을 넣은 예

style="border-left-color:pink; border-left-style:double; border-left-width:20px; border-right-color:cyan; border-right-style:ridge; border-right-width:10px"

 

 

 

(별군 님께서 지적해 주신 내용을 추가합니다.)

또한, 이 3가지 설정을 한번에 처리할 수도 있다.

3가지 설정값을 묶어서...

상단 : BORDER-TOP: 색상 두께 스타일;

좌측 : BORDER-LEFT: 색상 두께 스타일;

우측 : BORDER-RIGHT: 색상 두께 스타일;

하단 : BORDER-BOTTOM: 색상 두께 스타일;

 

예를 들어 상단 선에 대한 처리를 할 경우 border-top-color, border-top-width, border-top-style 이라고 각각 설정을 해야 하지만

 BORDER-RIGHT: yellow 6px inset;

이렇게 한번에 처리할 수 있다.

 

 

여기까지~!

<추천>해 주시면 더욱 많은 분들이 글을 볼 수 있습니다.
Posted by 명섭이
TAG , , , , , , ,
트랙백 1개, 댓글 6개가 달렸습니다

트랙백 주소 :: http://blog.bsmind.co.kr/trackback/79 관련글 쓰기

  1. Subject: 하츠의 생각

    Tracked from itry's me2DAY 2009/07/04 18:45  삭제

    [CSS] border 스타일 정리 홈페이지에 이미지 테두리나 테이블 또는 그냥 박스를 만들 때 이미지로 하지 않고 스타일시트(CSS)의 border 속성을 이용해서 만들 수가 있다. 간단하게 테두리를 두르는 일반적인 박스는 solid로 하면 되는데, 그 외 것들을..

댓글을 달아 주세요

  1. BlogIcon 별군 2009/07/07 10:34  댓글주소  수정/삭제  댓글쓰기

    여러 속성을 따로 적용하는 방법 말고, 한번에 적용하는 방법도 알려주셨으면 좋았을텐데요 ^^;
    예) border-top:1px solid red;
    좋은 글 잘보고 갑니다 : )

    • BlogIcon 명섭이 2009/07/07 11:09  댓글주소  수정/삭제

      기본적인 것을 알아야 응용도 가능하다고 생각해서 그랬어요.
      간단하게라도 기재해야 겠네요^^
      감사합니다~~

  2. BlogIcon jiny 2009/08/31 11:32  댓글주소  수정/삭제  댓글쓰기

    저 같은 초보에게 참 도움되는 글이라능 ^^

    고마와효~

    • BlogIcon 명섭이 2009/08/31 12:59  댓글주소  수정/삭제

      제가 까먹어서 불편한 것을 정리한 것이 다른분에게도 도움이 되니 더욱 마음이 좋습니다.
      jiny님 감사합니다.
      좋은 한주되세요^^

  3. CrazyQ 2011/03/29 05:10  댓글주소  수정/삭제  댓글쓰기

    저멀리에서 외쿡인 노동자도 많은도움 받아갑니다.
    감사합니다~^^

페이의지 맨위로