워드프레스

[CSS 공부] float와 display 속성

Photo of author

By OKePaPa

| 업데이트 :

float와 display 속성은 CSS에서 요소의 배치와 레이아웃을 제어하는 중요한 역할을 합니다. 이 속성들의 특성에 대해서 알아보고, 사용 예시를 살펴 보겠습니다.

float와 display 속성 개요

float와 display는 CSS에서 요소의 배치와 레이아웃을 제어하는 중요한 속성입니다.

  1. float: float 속성은 요소를 왼쪽 또는 오른쪽으로 “띄우는” 역할을 합니다. 이를 통해 텍스트나 다른 인라인 요소가 그 주위로 흐르도록 할 수 있습니다. 웹 디자인 초기에는 float 속성이 컬럼 레이아웃을 만드는 주요 방법이었습니다. 하지만 현재에는 Flexbox나 Grid와 같은 레이아웃 기술들이 도입되면서, float의 사용은 이미지 등 몇 가지 특정 경우로 줄어들었습니다.
img {
    float: right;
}

위 예시에서 이미지는 오른쪽으로 띄워져 있고, 주변의 텍스트나 인라인 요소들은 그 주위로 감싸게 됩니다.

  1. display: display 속성은 요소가 어떻게 보여질지 결정합니다. 가장 자주 사용되는 값으로 block, inline, inline-block, none, 그리고 최근에 추가된 ‘flex’와 ‘grid’ 등이 있습니다.
  • block은 새로운 줄에서 시작하고 종료하는 박스를 생성합니다.
  • inline은 새로운 줄을 시작하지 않고, 내용의 넓이만큼 차지하는 박스를 생성합니다.
  • inline-block은 inline과 block의 성질을 모두 갖습니다.
  • none은 해당 요소를 화면에 보여주지 않습니다(DOM 상에서 삭제되진 않으므로 JavaScript 등으로 다시 보여줄 수 있습니다).
  • flex와 grid는 고급 레이아웃 시스템을 위한 값입니다.
div {
    display: flex;
}

span {
    display: block;
}

위 예시에서 div 태그가 flex container가 되며, span 태그가 block-level element가 됩니다.

float 속성

float 속성은 속성의 명칭과 같이 요소를 화면위에 떠있는 형식으로 배치 합니다. float 속성을 이용하며 좌측 혹은 우측부터 정렬되는 박스 콘텐츠를 배열할 수 있습니다.

float

  • float: left; 혹은 float: right;를 지정하면 width는 콘텐츠를 표시할 때 필요한 만큼만 차지하고 다른 요소가 들어올 만큼의 공간을 비워 둡니다.
  • float 속성이 더이상 동작하지 않도록 원할 경우 다음에 나오는 clear 속성을 반드시 지정해 주어야 합니다.

clear

  • clear 속성은 float 속성이 더 이상 유용하지 않다고 알려 주는 속성입니다.
  • 만약 float: left;로 왼쪽으로 배치했다면 clear: left;로 무효화시킬 수 있습니다.
  • 무조건 기본 상태로 되돌리고 싶다면 clear: both;라고 하면 됩니다.

float와 clear 속성의 사용

float와 clear 속성은 CSS에서 요소의 배치를 제어하는 데 사용됩니다.

  1. float 속성: float 속성은 요소를 왼쪽 또는 오른쪽으로 “띄우는” 역할을 합니다. 이를 통해 텍스트나 다른 인라인 요소가 그 주위로 흐르도록 할 수 있습니다.
img {
    float: right;
}

위 예시에서 이미지는 오른쪽으로 띄워져 있고, 주변의 텍스트나 인라인 요소들은 그 주위로 감싸게 됩니다.

  1. clear 속성: clear 속성은 float된 요소 아래에 새로운 ‘행’을 시작하는 것을 지정합니다. 값으로는 ‘left’, ‘right’, ‘both’, ‘none’이 사용될 수 있습니다.
  • left: 왼쪽에 있는 모든 float된 요소 아래에 새로운 줄이 시작됩니다.
  • right: 오른쪽에 있는 모든 float된 요소 아래에 새로운 줄이 시작됩니다.
  • both: 양쪽 방향의 모든 float된 요소 아래에 새로운 줄이 시작됩니다.
  • none: 기본값입니다. clear를 하지 않습니다.
div {
    clear: both;
}

위 예시에서 div 태그는 양방향(float:left와 float:right)의 모든 floating element들 밑에서 시작하게 됩니다.

주요 웹 레이아웃 기법 중 하나인 clearfix도 이 clear 속성을 활용합니다. clearfix는 부모요소가 자식요소들을 올바르게 “감싸” 보일 수 있도록 하는 기법입니다(자식요소들 중 하나라도 float되어 있다면 부모요소가 자식요소들의 높이를 올바르게 인식하지 못하는 문제 해결).

display 속성

display 속성은 요소를 보여주는 방식을 지정하는 속성 입니다. 콘텐츠를 보이지 않게 할수도 있고 float 을 대체해 콘텐츠를 나란히 배치하는데 사용되기도 합니다.

  • none : 보이지 않음 , visibility:hidden 속성과 유사하나 영역 자체가 없어짐.
  • block : 블록 박스
  • inline : 인라인 박스
  • inline-block : block과 inline의 중간 형태

block과 inline

block 태그는 width=100% 인 태그들로 요소를 나란히 배치할 수 없습니다. inline 은 콘텐츠의 크기만큼만 자리를 차지하기 때문에 다른 콘텐츠와 나란히 배치될 수 있습니다. 다만 width와 height 를 사용할 수 없어 주변 콘텐츠와 균형을 맞추기가 어려운 문제가 있습니다.

inline-block

display 속성을 사용하면 block 태그에 inline 속성을 가지도록 변경할수도 있고 그 반대도 가능합니다. 또한 inline 속성을 가지면서 즉, 다른 콘텐츠와 나란히 배치 되면서 block 요소의 width, height 등의 속성이 적용되도록 하는 inline-block 속성도 있습니다.

display 속성의 사용 예시

display 속성은 HTML 요소의 표시 유형을 결정합니다. 주로 사용되는 값으로는 block, inline, inline-block, none, 그리고 최근에 추가된 ‘flex’와 ‘grid’ 등이 있습니다.

  1. block: 이 값은 요소를 블록 수준 요소로 만듭니다. 블록 수준 요소는 새로운 줄에서 시작하며 가능한 한 넓은 영역을 차지합니다.
div {
    display: block;
}

위 예시에서 div 태그가 block-level element가 됩니다.

  1. inline: 이 값은 요소를 인라인 수준으로 만듭니다. 인라인 요소는 새로운 줄을 시작하지 않으며 필요한 만큼의 너비만 차지합니다.

span {
    display: inline;
}

위 예시에서 span 태그가 inline-level element가 됩니다.

  1. inline-block: 이 값은 요소를 인라인-블록 수준으로 만듭니다. 인라인-블록 요소는 새로운 줄을 시작하지 않지만, 블록처럼 너비와 높이를 지정할 수 있습니다.

img {
    display: inline-block;
}

위 예시에서 img 태그가 inline-block element가 됩니다.

  1. none: 이 값은 해당 요소를 화면에 보여주지 않습니다(DOM 상에서 삭제되진 않으므로 JavaScript 등으로 다시 보여줄 수 있습니다).

div {
    display: none;
}

위 예시에서 div 태그는 화면에 표시되지 않게 됩니다.

  1. flex와 grid: 이들 속성값은 고급 레이아웃 시스템을 위해 설계되었습니다.

.container {
    display: flex; /* or grid */
}

위 예제에서 .container 클래스를 가진 엘리먼트들이 flex container 혹은 grid container가 되어 자식요소들의 배치를 제어하게 됩니다.

각각의 경우, 웹 페이지의 전체 구조와 필요에 따라 적합한 방식을 선택하면 됩니다.

float와 display 속성의 주요 차이점

float와 display 속성의 주요 차이점은 다음과 같습니다:

  1. 용도: float는 주로 이미지 주위로 텍스트를 감싸거나 간단한 레이아웃을 만드는 데 사용되며, display 속성은 문서의 레이아웃을 보다 복잡하게 제어하는데 사용됩니다.
  2. 문제 해결: float는 겹치는 문제가 발생할 수 있고 복잡한 레이아웃에서 관리하기 어려울 수 있습니다. 반면에 display: flex;, display: grid; 등의 값은 복잡한 반응형 디자인을 만드는 것을 목적으로 설계되었으므로 레이아웃 문제가 발생할 가능성이 적습니다.
  3. 흐름(Flow): float 속성은 요소를 일반적인 문서 흐름에서 벗어나게 하므로 예기치 않은 결과를 초래할 수 있습니다. 반면에 display 변경사항은 적용된 요소와 그 자식 요소에만 영향을 줍니다.
  4. 클리어링(Clearing): float된 요소들 사이의 레이아웃 문제를 방지하기 위해 ‘clear’ 처리가 종종 필요합니다. 그러나 flex나 grid와 같은 display 속성에서는 이런 처리가 필요하지 않습니다.
  5. 미래 사용: float를 이용한 레이아웃 구현 방법은 약간 구식으로 여겨집니다. 복잡한 레이아웃을 생성하는데는 현대 CSS 레이아웃 기술인 flexbox나 grid가 권장됩니다.

현대 CSS 레이아웃 기술인 flexbox나 grid 레이아웃 기술에 대해서는 아래 링크 참조.

HTML/CSS
[CSS 공부] Flexbox와 Grid 모델
float를 이용한 레이아웃 구현 방법은 약간 구식으로 여겨집니다. 복잡한 레이아웃을 생성하는데는 현대 CSS 레이아웃 기술인 flexbox나 grid가 권장됩니다. 복잡한 레이아웃 생성을 위해 안정적으로 사용할 수 있는 flexbox나 grid 모델에 대해서 알아봅니다.


워드프레스 카테고리의 다른 글

[CSS 공부] 포지션 속성

[CSS 공부] Flexbox와 Grid 모델

댓글 작성