상자속성 4


float

clear

overflow

direction

unicode-bidi


float(요소의 가로배치)

float :속성값

  • 속성이 적용된 요소의 위치를 좌우측으로 정렬시킵니다.
  • 요소를 좌측으로 정렬하고 다음에 오는 요소를 우측으로 정렬할 경우에는 속성값을 left로 입력하고, 요소를 우측으로 정렬하고 다음에 오는 요소를 좌측으로 정렬할 경우에는 속성값을 right로 입력합니다.
  • 기본값은 none이고, 속성을 사용하지 않았을 경우에 같은 결과를 나타냅니다.

float 적용예제
메모장
< HTML >
< HEAD >
< STYLE type="text/css" >
BODY {font-size:10pt }
#ONE {float: right }
< /STYLE >
< /HEAD >
< BODY >
< IMG SRC="float.jpg" BORDER=0 ID="ONE" >
오늘처럼 비오는 날< p >
예전에 알던 누군가를 보고 싶어합니다.< br >
나는...< p >
그 사람의 얼굴이 기억나지 않을 때도 있습니다.< br >
가끔은...< p >
다음에는 기억나기를 바라며 창 밖만 봅니다.< br >
오늘은...
< /BODY >
< /HTML >
브라우저

float:right 		요소의 가로 정렬 {float} 오늘처럼 비오는 날

예전에 알던 누군가를 보고 싶어합니다.
나는...

그 사람의 얼굴이 기억나지 않을 때도 있습니다.
가끔은...

다음에는 기억나기를 바라며 창 밖만 봅니다.
오늘은...

브라우저

float: left 		요소의 가로 정렬 {float} 오늘처럼 비오는 날

예전에 알던 누군가를 보고 싶어합니다.
나는...

그 사람의 얼굴이 기억나지 않을 때도 있습니다.
가끔은...

다음에는 기억나기를 바라며 창 밖만 봅니다.
오늘은...


clear(float 속성 설정의 해제)

clear :속성값

  • float속성에서 설정한 좌우 정렬을 해제시키는 역할을 합니다. 기본 속성값은 none으로 속성을 사용하지 않았을 때와 같이 아무런 해제도 시키지 않습니다.
  • 속성값
    none 기본값으로 아무 변화도 생기지 않습니다.
    left float 속성의 속성값이 left로 적용된 경우에 이를 해제합니다.
    right float 속성의 속성값이 right로 적용된 경우에 이를 해제합니다.
    both float속성의 모든 값을 해제합니다.

  • 이 속성은 float 속성이 사용된 요소에 사용하는것이 아니라 그 다음에 오는 요소 중 float 속성의 영향을 받는 요소에 사용합니다. 즉, float 속성을 right로 사용했다면 해당 요소의 우측정렬로 인해 우측에 나타나는 요소에 이 clear 속성을 right로 사용하면, float속성이 해제되는 것입니다. 아래의 예제를 잘 살펴보세요.

clear 적용예제
메모장
< HTML >
< HEAD >
< STYLE type="text/css" >
BODY {font-size:10pt }
#three {float: right}
#four {clear: right}
< /STYLE >
< /HEAD >
< BODY >
< IMG SRC="float.jpg" BORDER=0 ID="three" >
오늘처럼 비오는 날< p >
예전에 알던 누군가를 보고 싶어합니다.< br >
나는...< p >
그 사람의 얼굴이 기억나지 않을 때도 있습니다.< br >
가끔은...< p >
다음에는 기억나기를 바라며 창 밖만 봅니다.< br >
오늘은...< p >
< IMG SRC="float.jpg" BORDER=0 ID="four" >
< /BODY >
< /HTML >
브라우저 요소의 가로 정렬 해제 {clear} 오늘처럼 비오는 날

예전에 알던 누군가를 보고 싶어합니다.
나는...

그 사람의 얼굴이 기억나지 않을 때도 있습니다.
가끔은...

다음에는 기억나기를 바라며 창 밖만 봅니다.
오늘은...

overflow(박스를 벗어난 부분의 설정)

overflow:속성값

  • 박스형태로 되어있는 요소에서 박스의 범위를 벗어난 부분이 있을 경우에 이 부분의 처리에 관한 설정을 합니다.
  • 속성값
    auto 브라우저의 설정에 따라 다르게 나타납니다..
    visible 박스를 벗어나는 부분도 보이도록 설정합니다.
    hidden 박스를 벗어나는 부분은 보이지 않도록 설정합니다.
    scroll 스크롤바를 생성해서 박스 안에서 볼 수 있게 설정합니다.

  • 익스플로러와 넷스케이프 모두 속성값을 auto로 설정할 경우 입력 부분이 박스를 넘을 때는 스크롤바가 생성됩니다. 그러나 scroll속성을 사용햇을 경우에는 박스 범위를 넘지 않더라도 스크롤바가 생성되어 출력됩니다.

overflow 적용예제
메모장
< HTML >
< HEAD >
< STYLE type="text/css" >
DIV.five {overflow:auto; width: 250px; height:100px;
border-style:outset;}
TD {font-size:10pt}
< /STYLE >
< /HEAD >
< BODY >
< TABLE BORDER=1 align=center >
< TR>< Th WIDTH=255 >속성값을 auto로 설정< /Th >< /TR >
< TR >< TD >
< DIV CLASS="five" >
Andante.68< p >
나를 허락하면 좋을 사람.< br >
웃어 줄게요.< br >
그대 떠나야만 한다해도.< p >
나를 가둬두는 미운 사람.< br >
눈물 흘러요.< br >
그댈 사랑하는 순간에도.< p >
알아요.< br >
아끼며 살고 싶다고< br >
그렇게 살고 싶다고< br >
내 안에 그댈 남길 때< br >
우리는 편할 수 없다는 걸..
< /DIV >
< /TD >< /TR>< /TABLE >
< /BODY >
< /HTML >
브라우저
속성값을 auto로 설정 속성값을 scroll로 설정
Andante.68

나를 허락하면 좋을 사람.
웃어 줄게요.
그대 떠나야만 한다해도.

나를 가둬두는 미운 사람.
눈물 흘러요.
그댈 사랑하는 순간에도.

알아요.
아끼며 살고 싶다고
그렇게 살고 싶다고
내 안에 그댈 남길 때
우리는 편할 수 없다는 걸.......

Andante.68

나를 허락하면 좋을 사람.
웃어 줄게요.
그대 떠나야만 한다해도.

나를 가둬두는 미운 사람.
눈물 흘러요.
그댈 사랑하는 순간에도.

알아요.
아끼며 살고 싶다고
그렇게 살고 싶다고
내 안에 그댈 남길 때
우리는 편할 수 없다는 걸.......

속성값을 hidden으로 설정 속성값을 visible로 설정
Andante.68

나를 허락하면 좋을 사람.
웃어 줄게요.
그대 떠나야만 한다해도.

나를 가둬두는 미운 사람.
눈물 흘러요.
그댈 사랑하는 순간에도.

알아요.
아끼며 살고 싶다고
그렇게 살고 싶다고
내 안에 그댈 남길 때
우리는 편할 수 없다는 걸.......

Andante.68

나를 허락하면 좋을 사람.
웃어 줄게요.
그대 떠나야만 한다해도.

나를 가둬두는 미운 사람.
눈물 흘러요.
그댈 사랑하는 순간에도.

알아요.
아끼며 살고 싶다고
그렇게 살고 싶다고
내 안에 그댈 남길 때
우리는 편할 수 없다는 걸.......


direction(문자열 표시 방향)

direction:속성값

  • 문자열의 기본적인 표시 방향인 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 출력할 수 있습니다.
  • 속성값
    ltr Left To Right란 뜻으로 왼쪽에서 오른쪽으로 출력한다는 의미입니다. 기본값입니다..
    rtl Right To Left란 뜻으로 오른쪽에서 왼쪽으로 출력한다는 의미입니다.

direction 적용예제
메모장
< HTML >
< HEAD >
< STYLE TYPE="text/css" >
P.two{direction:rtl}
< /STYLE >
< /HEAD >
< BODY >
< P class=two >Andante.68< br >
나를 허락하면 좋을 사람< br>
웃어 줄게요< br>
그대 떠나야만 한다해도< br>< br>
나를 가둬두는 미운 사람< br>
눈물 흘러요< br>
그댈 사랑하는 순간에도< br>< br>
알아요< br>
아끼며 살고 싶다고 < br>
그렇게 살고 싶다고< br>
내 안에 그댈 남길 때< br>
우리는 편할 수 없다는 걸< /p>
< /BODY>
< /HTML>
브라우저

Andante.68
나를 허락하면 좋을 사람
웃어 줄게요
그대 떠나야만 한다해도

나를 가둬두는 미운 사람
눈물 흘러요
그댈 사랑하는 순간에도

알아요
아끼며 살고 싶다고
그렇게 살고 싶다고
내 안에 그댈 남길 때
우리는 편할 수 없다는 걸

unicode-bidi(텍스트 표시 방향)

unicode-bidi:속성값

  • 익스플로러 전용 속성인 unicode-bidi는 텍스트의 기본적인 출력 방향인 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 설정합니다.
  • 속성값으로는 기본값인 nomal, inline 요소일 경우에 사용하는 embed, 해당 요소가 블록 요소일 경우에 사용하는 bidi-overide가 있습니다.
  • 속성값 bidi-override와 direction 속성에 rtl속성값을 함께 사용하면 텍스트의 출력이 반대로 됩니다.

unicode-bidi적용예제
메모장
< HTML >
< HEAD >
< STYLE TYPE="text/css" >
P.three {direction:rtl; unicode-bidi:bidi-override}
< /STYLE >
< /HEAD >
< BODY >
< p class=three >Andante.68< br>
나를 허락하면 좋을 사람< br>
웃어 줄게요< br>
그대 떠나야만 한다해도< br>< br>
나를 가둬두는 미운 사람< br>
눈물 흘러요< br>
그댈 사랑하는 순간에도< br>< br>
알아요< br>
아끼며 살고 싶다고< br>
그렇게 살고 싶다고< br>
내 안에 그댈 남길 때< br>
우리는 편할 수 없다는 걸< /p>
< /BODY >
< /HTML >
브라우저

Andante.68
나를 허락하면 좋을 사람
웃어 줄게요
그대 떠나야만 한다해도

나를 가둬두는 미운 사람
눈물 흘러요
그댈 사랑하는 순간에도

알아요
아끼며 살고 싶다고
그렇게 살고 싶다고
내 안에 그댈 남길 때
우리는 편할 수 없다는 걸