Orchemi

Orchemi

I start where others stop.

[CSS] 레이아웃에 영향을 주는 CSS 속성 ‘float’

작성:    

업데이트:

카테고리:

태그: , ,

float 속성이란?

  • 선택된 태그를 띄워서 부모의 공간을 기준으로 왼쪽/오른쪽 끝에 배치할 때 사용
  • 왼쪽 끝부터 순서대로 정렬할 때는 float: left;
  • 오른쪽 끝부터 순서대로 정렬할 때는 float: right;
*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>float 속성의 활용</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="left"></div>
    <div id="right"></div>
  </body>
</html>

* css 파일 # left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: yellow;
}

# right {
  float: right;
  width: 200px;
  height: 400px;
  background-color: blue;
}

이 float 속성과 레이아웃을 구성하는 여러 태그들을 이용해 웹 사이트 레이아웃을 만들 수 있다.

댓글남기기

참고