[CSS] 레이아웃 만들기

display : 배치 방법 결정

display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. 

display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용되고, 이미지를 표 형태로 배치할 수도 있다.

• block : 인라인 레벨 요소를 블록 레벨 요소로 만든다.
• inline : 블록 레벨 요소를 인라인 레벨 요소로 만든다.
• inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다.
• none : 해당 요소를 화면에 표시하지 않는다.

  <style>
     ul li {
      display: inline-block;      
      padding: 20px;
      margin: 0 20px;
      border: 1px solid #222;
    }
  </style>

 

 

float : 왼쪽이나 오른쪽으로 배치

문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 때 float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러 싸도록 할 수 있다. (<p> 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없다)

float 속성은 웹 요소를 왼쪽이나 오른쪽 구석에 배치되게 만들 수 있다.

• left : 해당 요소를 문서의 왼쪽에 배치한다.
• right : 해당 요소를 문서의 오른쪽에 배치한다.
• none : 좌우 어느 쪽에도 배치하지 않는다. (기본값)

  <style>
    img {
      float:left;
      margin-right:40px;
    }
  </style>

 

 

clear : float 속성 해제

float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달된다.

이 때 float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 필요한데, 그것이 바로 clear 속성이다.

• left : float: left 를 해제한다.
• right : float: right 를 해제한다.
• both : float: legt 와 float: right 를 해제한다.

<style>
  #box {
    clear:left;
  }
</style>