CSS.EduHTML.com - Cascading Style Sheet

Chapter 16

스타일 시트의 디자이너~ Box Object ② -border-

이번엔 Box관련 속성중 border에 대해 배워 보도록 하겠습니다.

border라..

어디서 많이 본 것같지 않으세요? ^^

넵.

태그의 속성인 border와 의미가 같습니다.

바로 테두리죠~ 테두리~~ 흠흠.. ㅡ.ㅡa

태그의 border와 아무리 의미가 같다지만..

그 기능까지 같을까요?

Oh~ no no.. (저 영맹 입니다.. -_-ㆀ 맘껏 비웃어 주시길..)

아니져..

오히려 스타일 시트의 border가 그 기능이 많답니다. (당연한가? 흠..)

border에는 세가지 부가 속성이 있답니다. 그리고 그 부가 속성엔 또다른 부가 속성이 존재하죠.. ㅡ.ㅡa

※ 알아두세여 ~ ♬

Box 관련 속성중 하나인 border를, 필자는 대표 속성을 쓰길 권장합니다.

그래서 이번도 대표속성 위주로 강좌를 만들었습니다.

border의 대표속성을 사용시, 속성의 값을 4방향의 테두리에 각각 적용 시키지 않고, 한가지만 쓸경우,

가령 예를 들어

border-color:yellow blue red green

이런식이 아니라..

border-color:red

이렇게 하면, 4곳의 테두리에 한꺼번에 적용 됩니다.

즉, border-color:red 같은건, border-color:red red red red 와 같다는 뜻이 되지요.

이것을 잘 알아 두셔서 괜한 일이 늘어 나는 것을 방지 하도록 하십시오 ^^

그럼 소개 하도록 하죠.

▶border 부가 속성 도표

border

styleBox의 테두리 형태를 바꿔줍니다. 정말정말 유용 *^^*border-style:top right bottom left

widthBox의 테두리 굵기를 결정하는 속성 입니다.border-width:top right bottom left

colorBox의 테두리 굵기가 1px이상일 경우, 테두리의 색상을 지정하는 속성 입니다.border-color:top right bottom left

▶border-style

border속성을 제대로 쓰기위해선 필수 아이템인 border-style 입니다.

이건 무얼 의미 하냐하면,

border-style을 적용 시키지 않으면,

이 속성의 기본값인 none(없음)으로 적용 되어서,

앞으로 배우게될 border-color, border-width같은 속성들을 적용 불가능 해 진다는 말이죠.

그래서 border관련 부가 속성들은 기본적으로 border-style을 써 주어야 하는 불편함이 따른다

..라고 할까요?

아무튼 border-style은 그 말 그 뜻대로 테두리선의 형태를 정한다는 것입니다.

종류는.. 와~ 꽤나 많군요 ^^ 8가지 정도 된답니다.

border-style 속성값을 소개하는 동시에, 적용하면 어떠한 형태의 테두리선이 나오는지 보여 드릴게요.

기본값은 none입니다.

dotted

하핫.. 점으루 이뤄진 테두리 군요 ^^

solid

흠.. 단독선 하나 입니다. 좀 굵죠? ^^a

dashed

점선 입니다. dotted와 혼동 마시길.

double

많이 보셨져? ^^ 그쳐? 그쳐?

groove

헉거덕.. 필자가 개인적으로 좋아하는 형태 입니다. 추천~~ ^^*

ridge

3D를 좋아하시는 님이라면 아주 좋아하시겠져? *^^*

inset

들어 갔습니다. 들어 갔습니다. 네스에선 보이나요?

outset

호홋. 튀어 나왔네요. 정말 많이 봤져.. ㅡ.ㅡa

<html>
 <head>
  <title>background-color</title>
  <style type="text/css">
   table {border-style:solid dotted dashed groove}
  span {border-style:double groove dashed inset}
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td width="640" height="480">
     잼나죠? ^^*<br>
     쿠쿡.. &#60;table&#62;태그로 쓸때의 예제 입니다.
    </td>
   </tr>
  </table>
  <br>
  <span>
   핫핫핫.. 어떠신지요? ^^
   에?! 별루라구요? 흑.. 미오.. ㅜ.ㅜ
  </span>
 </body>
</html>

예제보기 1st ← Click !

※ 알아두세여 ~ ♬

border-style을 태그가 아닌 보통 글자 같은것에 적용 하실때, 조심해서 써쓰셔야 합니다.

왜냐하면, 태그는 오브젝트가 도표 안에 갇혀 있다라고, 웹브라우저가 Box를 인식 합니다.

그러나 글자 같은 경우, 과 같이 공식적으로 Box라고 웹브라우저에게 밝히질 않았습니다.

그래서 만약, 글자를 잘 쓰다가

태그 같이 다음 줄로 내려주는 역할을 하는 태그를 쓸 경우,

스타일 시트 오류가 일어나게 됩니다.

웹브라우저가 잘 가다가 끊어진 Box라고 인식 하기 때문죠.

그렇잖아요?

문장들을 한줄 아래로 내리는 것은

문장이 너무 길어서 문장 정렬 셈치고 하는 것이 대반수 이기 때문 아닌가요?(적어두 필자는 그러합니다.)

그것과 비슷한 경우라고 생각하시면 됩니다. *^^*

물론, 이런 단점을 이용해서 괜찮은 디자인을 연구하시는 님도 계시겠지만..

그건 예외구..

아무튼 이해가 안되시거든, 위의 예제중 아래것 예제,

태그에 적용 시켰을때의 예제에서

태그를 사용 해 보세요.

아래가 그 예입니다.

핫핫핫.. 어떠신지요? ^^

에?! 별루라구요? 흑.. 미오.. ㅜ.ㅜ

이렇게 된다는 말 입니다.

아셨져? 조심하세요 *^^*

▶border-width

테두리의 굵기를 조절 합니다.

부가 속성 종류로는..

border-top-width

border-right-width

border-bottom-width

border-left-width

이렇게 4가지가 있습니다.

뭐, Box니까, 4가지일건 당연한 말이지만.. ㅡ.ㅡa

후훗.. 이번도, 그리구 다음에 나올 Box의 부가 속성 순서두 잘 외울 자신 있져? *^^*

사용하는 길이 단위는 앞서 말한 것들과 다를바가 없습니다.

정말 모르시겠다면 여기를 클릭하세요.

이 속성두 하나하나 일일이 쓰면 일이 하나 더 늘어나게 되니..

앞에서도 밝혔지만, 대표 속성으로 나가겠습니다.. ㅡ.ㅡa

사용 방법 예제 입니다.

<html>
 <head>
  <title>background-color</title>
  <style type="text/css">
   span {border-style:solid}
   .width {border-width:5px 1px 5px 1px}
  </style>
 </head>
 <body>
  <span class="width">
   핫핫핫.. 어떠신지요? ^^<br>
   에?! 별루라구요? 흑.. 미오.. ㅜ.ㅜ
  </span>
 </body>
</html>

예제보기 2nd ← Click !

보시다시피..

스타일 시트에선 테두리선의 굵기를 4방향 다르게 표현 할 수 있습니다.

물론, 전 미(美)를 강조하기 위해 마주보는 것끼리는 같은 값으로 설정 했지만 말이죠..

태그를 많이 쓰셨다면, 태그의 border속성처럼 써 주시면 되겠습니다.

겉보기엔 굉장한 기술 같아 보여두..

알고보면 별거 아니랍니다 *^^*

▶border-color

이제 border의 마지막 입니다.

color. 뻔할 뻔자 아닙니까? ^^

너무나 웃겨서(?) 단어에 대해선 생략하구요...

사용법은 아래와 같습니다.

<html>
 <head>
  <title>background-color</title>
  <style type="text/css">
   span {border-style:solid}
   .color {border-color:#ff7700 #008800 blue red}
  </style>
 </head>
 <body>
  <span class="color">
   핫핫핫.. 어떠신지요? ^^
   에?! 별루라구요? 흑.. 미오.. ㅜ.ㅜ
  </span>
 </body>
</html>

예제보기 3rd ← Click !

보셨져?

후훗.. 위의 예제와 같이..

RGB 컬러 코드랑, 영문 컬러를 동시에 써두 된다는 사실을~!

사용법은 여느 color와 다를바가 없죠.

그리고, 부가 속성 위치도 다른 border의 부가 속성들과 별반 차이점이 없습니다.

border-color:top right bottom left

그럼.. 후.. 오늘따라 저 굉장히 성격이 급해 졌어여.. ㅡ.ㅡa

무엇 때문인지는 저두 잘 모르구여..

아무래도 피곤해서 그러것 같네요.

이해해 주시길..

그럼 다음 강좌에서 만나여~

빠빠이~~ ^^

- End -