CSS3 - CSS 스타일 - float 속성 설정 (29)

CSS3 - CSS 스타일 - float 속성 설정 (29)

오늘은 CSS3의 스물아홉번째 내용으로는 float 속성 설정에 대해서 알아 보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

------------------------------------------------------------------------------

css 스타일 -  float 속성 설정이란?

먼저 float속성이란 '부유하다', '떠있다.' 라는 의미를 가지고 있으며

태그(요소)의 위치를 잡을때 아주 중요한 역활을 하는 css 스타일의 속성이다.

이번 포스팅에서는 태그(요소)의 위치를 잡을때 아주 중요한 역활을 하는 css 스타일 속성인

float 속성을 어떻게 사용하는지 그에 관련된 가장 간단한 방법을 알아 보도록 하겠다.

------------------------------------------------------------------------------------------------------

float 속성을 이용한 예

1. 먼저 html 부분에 img태그(요소)와 p태그(요소)를 이용하여 임의의 이미지 텍스트를

넣어 위와 똑같이 작성하고 웹브라우저에 출력한다.

------------------------------------------------------------------------------------------------------

2. 위 html 부분을 작성한 뒤 웹브라우저에 출력한 모습이다.

이 다음에는 css 스트일 부분에서 img 태그(요소)를 선택한뒤 float 속성을 적용하여 어떠한

변화가 생기는지 알아 보도록 하겠다.

------------------------------------------------------------------------------------------------------

3. css에서 위 1번째 html 작성부분에 img에 입력한 class="one"을 선택한 뒤 

float:left: 속성을 넣어 웹브라우저에 출력한다.

------------------------------------------------------------------------------------------------------

4. 출력시 위와 같은 화면이 나오게 된다.

여기서 대충 float속성이 어떠한 속성인지 감이 오는 사람이 있을 것이다.

float 속성은 위에서 이미지와 텍스트를 화면에 함께 표시할 때 이미지를 화면의 오른쪽이나 왼쪽으로 띄울때 유용한 속성으로 이미지의 float 속성을 위처럼 left로 지정하게 되면 이미지는 왼쪽으로 배치가 되고 이미지 뒤에 따르는 태그(요소) 즉 이미지, 텍스트, 비디오 등 여러가지 요소들이 float가 가 지정된 태그(요소)를 감싸며 표시되게 된다.

------------------------------------------------------

------------------------------------------------

이 다음은 위에서 지정한 float:left 속성을 float:right 속성으로 변경하고

웹브라우저로 출력을 해보도록 하겠다.

5. 다시 css로 돌아와 기존에 float:left 속성을 float:right 속성으로 변경하고

웹브라우저로 출력한다.

------------------------------------------------------------------------------------------------------

6. 웹브라우저로 출력된 화면이다.

여기서 기존 float:left 속성을 float:right속성으로 변경하고 난 뒤 출력했을때는

이미지는 오른쪽으로 배치가되고 img태그(요소)에 뒤따르는 태그(요소) 즉 이미지, 텍스트, 비디오 등 여러가지 요소들이 이미지를 감싸면서 오른쪽으로 배치가 된다.

------------------------------------------------------------------------------------------------------

여기까지  float속성에 가장 기본적인 방법을 알아 보았다.

이번 포스팅에서는 float속성을 이미지에 지정하여 예제를 만들어 설명했지만 float속성은 이미지 태그(요소)가 아닌 다른 태그(요소)에도 적용이 가능하다.

추가로 float 속성에 관련된 내용을 아래 링크를 참고 하시기 바랍니다.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_float&preval=none

이상 float 속성 설정 (29)에 관련된 포스팅을 마치도록 하겠습니다.