CSS.EduHTML.com - Cascading Style Sheet

Chapter 7

과 오브젝트의 합동 역할을 대신한다~! float

또 지난번 강좌에 대한 의견이 엄청(?) 나왔습니다..ㅡ.ㅡa

왜 같은걸 반복 하냐구요...ㆀ

하긴.. color랑 font는 기초강좌 할때 도우미 속성으로 나왔던적이 있었져..

음.. 그냥.. 다시 한번 새겨두라는 의미에서 보시면 안되나여? ^^ㆀ (돌날아 온다...)

읏.. 그래서 이번 강좌는(...ㆀ) 장난 아니게 유용한 속성을 하나 소개할까 합니다.

float 라고요.. 음..

영어 사전을 찾아보니.. 떠다닌다.. 라고 되어 있네요 ^^

쓰기는 쉬워도.. 용도는 가히(?) 용서가 안될 정도로 유용하니 잘 봐두시길..

왜 유용하냐구요? ^^a 그건 아래에서 자세히 설명 드리도록 하져.

▶float

<html>
 <head>
  <title>float</title>
  <style type="text/css">
   img.float {float:left}
  </style>
 </head>
 <body>
  <h2 align="center"><font color="green">Float를 적용 시키지 않았을때의 이미지와 오브젝트 입니다.</font></h2>
  <img src="" width="287" height="174">
   하핫.. 된장이네요.<br>
   맛있을까요? ^^<br>
   읏.. 맛없네요..ㅜ.ㅜ</img><br>
  <br>
  <br>
  <h2 align="center"><font color="green">이미지와 오브젝트의 높이를 정렬하기 위해
   &#60;table&#62;태그를 썼을때의 결과물 입니다.</font></h2>
  <table border="0">
   <tr>
    <td>
     <img src="" width="287" height="174">
    </td>
    <td>
     하핫.. 된장이네요.<br>
     맛있을까요? ^^<br>
     읏.. 맛없네요..ㅜ.ㅜ
    </td>
   </tr>
  </table><br>
  <br>
  <br>
  <h2 align="center"><font color="green">Float를 적용 시켰을때의 이미지와 오브젝트 입니다.</font></h2>
  <img src="" width="287" height="174" class="float">
   하핫.. 된장이네요.<br>
   맛있을까요? ^^<br>
   읏.. 맛없네요..ㅜ.ㅜ</img><br>
 </body>
</html>

예제보기 1st ← Click !

흠.. 예제가 좀 길죠? ^^*

그 이유는 float를 적용한 오브젝트와 적용 하지 않은 오브젝트를 비교하기 위함입니다.

에게~ 이게 뭐야~?! ..라고 하시는 분들은 이것의 유용함을 아직 발견 못하신 분.. 일거예요.. 아마.. ㅡ.ㅡa

위의 예제에서 보시다시피, 보통 이미지옆에 글자나 그림(통틀어 오브젝트라 합니다)들을 태그로 작성 해 놓으면,

죄다 밑으로 가라앉기(?) 때문에, 홈피를 좀 잘 쓰시는 분들은 이걸 태그로 묶어두어 고정 시킵니다.

예제에서 보실 수 있겠지만, 이렇게 고정 해 두면, 더이상 오브젝트가 태그의 테두리를 못벗어 나기 때문에,

아래로 내려가지 않게 됩니다.

아마도, 태그를 이런식으로 쓰시는 님들이 많으실 겁니다. (제말이 틀렸나요? ^^a)

그러나 float를 쓰시면 조금이나마 그 짜증남을 해소 시킬 수 있을겁니다.

float의 값으로는 left, right가 있습니다.

left로 하시면요..

float를 적용한 오브젝트가 왼쪽으로 가게 되구요.. (위의 예제에서 확인 할 수 있습니다.)

right로 하시면, 어케 될지 뻔할 뻔자죠? *^^*

기본값은 none입니다.

▶그러한 float에도 약점이 있다?!

그렇습니다.

간단한 이미지 설명, 간단한 레이아웃 정도는 이 float가 대신할 수 있지만..

그외 이미지 분할, 이미지 뷰어(작은 그림을 나열해 놓구 클릭하면 큰걸 볼 수 있게 한것), 복잡한 레이아웃은

아직까진 float하나론 좀 무리라는 생각이 듭니다.

어쩌면 이런 약점 때문에 float가 태그에게 뒤쳐지는 것일수도..

이번 강좌에서는 float에 대해서 알아 봤습니다.

유용하게 쓸 수 있음에도, 따를 당하는 속성 float.

이젠 잘 사용할 수 있겠죠? *^^*

그럼 다음 강좌에선 더 좋은(?) 내용으로 찾아 뵙겠습니다.

즐거운 하루 되세요 *^.^*

- End -

◀ 이전 강좌 목록으로 다음 강좌 ▶

<TABLE>과 오브젝트의 합동 역할을 대신한다~! float