본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

overflow, float, clear

최초 작성일
최종 수정일
이번 시간에는...
CSS 레이아웃을 잡는데 기본이 되는 속성들을 살펴봅니다. overflow의 scroll, hidden, 등을 통해 내부 콘텐츠가 넘쳤을 때를 알아보고, float의 left와 right를 통해 요소를 배치 시키며, clear의 both 등을 통해 이를 해제 해보도록 합니다.

이번에 살펴볼 속성들은 앞으로 요소들을 배치할 때 많이 활용하게 될 속성입니다. 이번 시간에는 각 속성의 기본적인 용도에 대해 살펴보고, 바로 다음 시간에 이를 통해서 요소들의 배치 레이아웃을 어떤 방식으로 잡는지 알아보겠습니다.

overflow 속성

overflow 속성은 박스 모델 안에서, 안의 콘텐츠가 박스를 벗어날 때 어떻게 처리할 지를 결정합니다. (안의 콘텐츠는 요소 내부의 텍스트 뿐 아니라, 포함된 요소들 모두를 말합니다.) 예를 들어, 박스의 높이를 벗어난 텍스트가 있을 때, 스크롤을 보여줄 것인지 또는 벗어난 영역을 숨길 것인지 등을 결정할 수 있습니다.

visible
기본 값으로, 박스를 벗어나는 콘텐츠가 그대로 보여집니다.
scroll
우측에 스크롤 바를 노출하여, 스크롤 바를 통해 콘텐츠를 확인할 수 있도록 합니다.
hidden
벗어나는 콘텐츠를 모두 숨겨버립니다.
auto
scroll 속성 값은 스크롤 바가 항상 노출 되지만, auto 속성 값은 콘텐츠가 박스를 벗어날 때에만 스크롤 바를 노출합니다.
inherit
부모의 속성 값을 물려 받습니다.
visible

이 속성 값을 사용한 요소는 안에 콘텐츠들이 박스를 벗어나더라도 그대로 노출시킵니다.

scroll

이 속성 값을 사용한 요소는 스크롤로 내용을 확인할 수 있습니다.

hidden

당신은 이 박스를 벗어나는 내용을 볼 수 없습니다. 왜냐하면 hidden 처리 되었기 때문이죠.

auto

내용이 짧으면 스크롤 안보임.

auto

하지만 내부의 콘텐츠가 박스를 벗어나기 시작하면 스크롤을 노출시킵니다.

float 속성

float 속성은 여러분들이 글을 작성할 때, 종종 본문 중간에 이미지를 넣고자 할 때가 있을 것입니다. 이미지가 본문 중간에 왼쪽이나 오른쪽으로 위치하고, 텍스트가 자연스럽게 그 옆에 나오고 있는 모습 말입니다. 이 속성은 이름 그대로 요소를 띄워서(float) 왼쪽이나 오른쪽에 배치할 수 있도록 만들어 줍니다.

왼쪽이나 오른쪽으로 float 속성을 적용한 요소의 다음 요소들(float나 clear를 주지 않은 요소) 안의 텍스트(또는 인라인 요소)들은 적용한 요소 옆에 위치하게 됩니다.

돼지머리 이미지가 왼쪽에 삽입된 본문
float를 이용한 본문의 요소 삽입
none
기본 속성으로, 요소를 띄우지 않습니다.
left
요소를 왼쪽으로 띄웁니다.
right
요소를 오른쪽으로 띄웁니다.
inherit
부모의 속성을 상속 받습니다.

이 속성은 특히 레이아웃을 잡을 때 많이 사용하는 속성이면서, 초보자들이 제일 어려워하는 속성 중에 하나입니다. 그 만큼 이 속성만의 특성이 좀 있다는 것인데요, 그 특성에 대해서는 다음 시간에 다루도록 하겠습니다.

clear 속성

float을 사용해서 이미지 등을 본문에 넣었다가, 이미지 옆에서가 아닌, 이미지 아래에서 새로운 섹션을 시작하고 싶을 때가 있을 수 있습니다. 다음의 이미지를 참고해 주세요.

플로트가 잘 정리되어 보이는 레이아웃
float된 이미지 다음에 시작되는 새로운 섹션

하지만 원치 않게도, 이미지가 다 끝날 때까지 텍스트들은 이미지 옆에 나열됩니다.

플로트가 겹쳐지면서 깨져보이는 레이아웃
원치않게 이미지 옆에 계속 나열되는 콘텐츠

이런 문제를 해결해 줄 수 있는 속성이 바로 clear 속성입니다. 이 속성은 float를 해제시킴으로써 줄 바꿈 되어 구역을 새롭게 시작합니다. 이 속성은 floatleftright를 선택해서 해제할 수 있으며, 둘 다 동시에 해제할 수도 있습니다.

none
아무런 해제를 하지 않습니다.
left
float: left를 해제합니다.
right
float: right를 해제합니다.
both
모든 float(left, right)를 해제합니다.
inherit
부모 속성을 상속받습니다.

여기까지 속성들을 간단히 살펴보았습니다. 다음 시간에는 요소의 배치를 어떻게 하는지에 대해 알아볼 예정입니다. 이를 통해서 오늘 배운 속성들의 조금 특이한 특성들을 제대로 이해해 보도록 하겠습니다.

요점 정리
  • overflow:visible - 내부 내용이 넘치더라도, 넘친 모습을 그대로 노출.
  • overflow:scroll - 요소에 스크롤바를 보여 주며, 스크롤을 통해 내부 내용을 접근.
  • overflow:hidden - 내부 내용이 넘칠 경우, 넘친 부분을 숨김. 넘친 부분은 접근 불가능.
  • overflow:auto - 요소가 넘칠 때에만 스크롤바를 노출.
  • float 속성은 left나 right을 통해서 좌측 또는 우측에 정렬.
  • float된 요소 주변의 인라인 요소들은 float 주변으로 채워짐.
  • float된 요소의 행이 끝나기 전까진 다른 float된 요소와 인라인 요소가 float된 요소 옆에 배치되기 때문에, 의도치 않은 깨짐이 발생할 수 있음.
  • clear 속성은 float된 것을 해제하여, float 옆에 배치가 아닌, 다음 행에 배치가 됨.
  • clear 속성 값으로 해당 float 값인, left, right가 올 수 있으며, both을 통해 모두 해제할 수 있음.

이 글이 유용하셨다면 친구들에게 공유 해주세요.