#5 Floating, Positioning

뷰포트(Viewport)와 관련하여 레이아웃(배치)을 다루기 위한 float, clear 및 positon 속성 그리고 positon속성과 관련된 top, right, bottom, left, z-index 속성에 대해 알아보겠습니다.

레이아웃 디자인 - 플로팅 레이아웃(float)

대표적인 레이아웃 테크닉인 플로팅(Floating)과 포지셔닝(Positioning)을 알아보고, 모던 레이아웃인 플렉스박스(Flexbox)와
그리드(Grid) 레이아웃에 대해 알아보겠습니다. 먼저 플로팅 레이아웃에 대해 학습해 봅니다.

일반적인 레이아웃 흐름(Normal Layout Flow)

See the Pen normal layout by jaeheekim (@jaehee) on CodePen.

CSS 가 미반영된 화면에서 위에서부터 아래 방향으로 나열되는 것이 일반적인 레이아웃 흐름이라고 할 수 있습니다.
위 HTML 코드 마크업상 <h1> 요소 다음에 <p> 요소의 순서대로 제목이 나오고 단락이 나오는 형태가
HTML 문서를 해석한 웹브라우저가 화면에 그리는 방식입니다.

플로팅(Floating) 레이아웃

CSS float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다.

복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다

다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다.

여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다.

이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다.

See the Pen 플로팅 샘플 by jaeheekim (@jaehee) on CodePen.

css

.box {
    float: value;
}

다음은 float 의 속성값(value)입니다.

• left : 요소를 왼쪽 방향으로 부유하게 설정
• right : 요소를 오른쪽 방향으로 부유하게 설정
• none : 기본값(default), 요소를 띄우지 않는다.

플롯 속성을 사용할 요소는 position 속성의 absolute 값과 양립할 수 없습니다.

이미지에 텍스트를 둘러싸게 만들려는 목표로 나온 기법이 floating 이라는 기법입니다.

플로팅 모델 살펴보기

중요한 사실은 플로팅된 요소는 그 요소의 종류에 상관없이 블럭 박스가 된다는 점입니다.

인라인 요소인 링크(anchor)를 플로팅시키는 경우에 이 요소 특성은 블럭 박스로 변경되고 마치 div 인 것처럼 동작하게 됩니다.

대신 자신의 영역만을 가지고 있는 인라인 블럭 박스처럼 렌더링되는 것이 특이한 점입니다.

다시 말해, 플로팅된 요소는 display: inline-block; 을 선언한 것과 동일해지나 굳이 이를 선언해줄 필요는 없습니다.

clear - 플로팅 해제 기법

플로팅한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에 레이아웃을 무너뜨리게 되는 현상을 보게 될 것입니다.
이는 플롯을 사용하면 발생되는 현상이며 이러한 문제를 해결하기 위해서는 float 을 해제해 주어야 합니다.

여기서 "float 을 해제한다" 는 의미는 float 이 적용된 요소를 해제하는 것이 아니라
clear 속성을 적용해 float 의 영향을 받지 않도록 한다는 의미입니다.

플롯을 해제하는 방법 중에 전 세계적으로 통용되는 이름(관용적인 기법의 이름)으로 clearfix 라는 방법이 있습니다.

물론 clear 속성을 적용하기 보다 다른 방법으로도 플롯을 해제할 수는 있으나 float 을 사용해 레이아웃을 잡다보면 clear 가 필요해지기 때문에 가급적 플롯된 요소의 부모 요소에 clearfix 방법을 적용하는 것을 권장하고 있습니다.

다시 말해, float 이 적용된 자식 요소를 부모 요소가 감싸 안지 못하는 현상을 해결하기 위해서는 대략적으로 6가지 방법이 있는데
그 중 대표적으로 많이 사용 되는 방법이 clearfix 입니다.

즉, clearfix 방법은 무조건이라기 보다 필요에 의해서 사용하는 것입니다.

css

.clearfix { clear: value; }

clear 속성값은 다음과 같습니다.

• left : 왼쪽에 floating 된 요소를 지정 해제
• right : 오른쪽에 floating 된 요소를 지정 해제
• both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
• none : 기본값(default), floating 을 해제하지 않음

플롯을 해제하기 전과 해제 후 살펴보기

첫 번째 float 해제 방법

css

.parent { float: left; }

플롯된 요소가 자식 요소일 경우에 부모요소는 자식 요소(문서 흐름에서 벗어남)를 감싸지 못하는 특징으로 인해 레이아웃이 무너진 형태처럼 보이게 됩니다. 이는 플롯을 사용하게 되면 발생되는 현상이며 이 문제를 해결하기 위해서는 플롯의 영향을 받자 않도록 해야합니다.

다시 말해, 부모요소는 플롯된 자식요소를 포함하는 경우에 부모요소는 높이를 인지하지 못하게 됩니다.

이 문제를 해결하는 방법 중에 하나가 부모(컨테이닝 요소)에게도 float 속성을 반영하는 방법입니다.

이렇게 하면 부모 요소는 자식 요소의 높이를 인지하게 되지만 부모 요소도 float 된 요소가 되어 인라인 블럭의 특징을 가지고 되기 때문에 비주얼 디자인 레이아웃에 따라 상황에 맞도록 사용해야 합니다.

두 번째 float 해제 방법

이 방법 역시 부모 요소에 적용하는데 display: inline-block; 속성을 사용하는 방법이 있습니다.

부모 요소는 자식 요소의 높이를 인지하게 되지만 되지만 부모 요소에 정의된 인라인블럭 속성 특성 때문에 본인 영역만큼만 너비를 가지게 됩니다.

css

.parent { display: inline-block; }

세 번째 float 해제 방법

세 번째 방법으로 플롯을 해제할 수 있는 속성은 overflow:hidden; 방식입니다.

이 속성 역시도 부모 요소에 적용해야 하며, 이 속성의 특징은 자식 요소가 부모 요소 박스보다 클 경우에 자식 요소 박스의 콘텐츠를 숨기고 보이지 않게 해주는 속성입니다.

overflow: auto;를 적용해도 되지만 자식 요소 박스의 너비가 부모 요소 박스의 너비보다 클 경우에 스크롤이 생기기 때문에 권장되지 않습니다.

overflow 특징대로 넘치는 것을 숨겨주는 속성인데, 여기선 다른 의미도 포함하고 있습니다.

넘치는 콘텐츠를 숨긴다는 의미는 부모 요소 박스가 그 자식 요소 콘텐츠를 숨긴다는 것입니다.

그런데 부모 요소가 플롯된 자식 요소로 인해 높이를 인지하지 못하고 있는 상황에서 overflow: hidden; 속성을 적용하게 되면 부모 요소(컨테이닝 박스)는 넘치는 요소를 숨김 처리를 하려고 하기 때문에 자식 요소의 높이를 인지하기 위해 자동으로 높이값을 계산하게 됩니다.

css

.parent { overflow: hidden; }

참고로 overflow:hidden; 속성을 적용하는 방법은 권장되지는 않습니다.

예를 들어, 동적(스크립팅)으로 자식, 자손 요소들 중에서 부모 요소 박스를 벗어나서 보여주어야 될 경우에 hidden 값으로 인해 보여주고자 하는 콘텐츠를 보여줄 수 없게 되기 때문에 잘 판단하여 선택적으로 사용해야 합니다.

네 번째 float 해제 방법

이 방식은 과거(Legacy)에 널리 사용되던 방식(현재는 지양)으로 플롯된 요소의 마자막 요소(형제 레벨)로 빈 엘리먼트 작성하여 clear 속성을 적용하는 방법이 있습니다.

HTML

<div class="box-group">
    <div class="box is-blue"></div>
    <div class="box is-yellow"></div>
    <div class="box is-green"></div>
    <div class="clear"></div>
</div>

이 방법 또한 불필요한 의미없는 빈 요소를 이용하는 것이기 때문에 가장 권장되지 않는 방법입니다.

다섯 번째 float 해제 방법

지금까지 소개한 방식 중 가장 널리 쓰이고 있는 테크닉으로 CSS의 가상(슈도클래스, 의사클래스) 클래스를 이용하는 방법이 있습니다.

앞서 소개한 방법은 불필요한 의미없는 요소를 작성해야 했지만 이 방법은 CSS 를 통해 빈 가상 요소를 생성하여 float 을 해제하는 방법입니다.

CSS 의 가상 요소 중에 :after 를 이용합니다.

css

.parent:after {
     content: "";
     display:block;
     clear:both;
}

이 방식은 구형 브라우저인 IE7 에서 가상 요소를 지원하지 않기 때문에 다음과 같은 핵을 사용해야 합니다.

가상 요소 대신에 부모 요소에 CSS 핵인 *zoom:1; 이라는 속성을 적용하는데 이는 MS사의 인터넷익스플로러 구형 브라우저 중에 [IE 5.5 ~ 7]은 hasLayout 이라는 속성을 가지게 구현해 놓은 IE 만의 고유한 속성입니다.

여섯 번째 float 해제 방법

마지막으로 소개해 드리는 방식은 micro clearfix 라는 이름의 테크닉입니다.

이 방법은 CSS 연구전문가인 니콜라스 갤러거가 고안한 방법(micro clearfix hack)으로 처음 HTML5 보일러플레이트란 템플릿 엔진을 통해 소개되었습니다.

2011년에 고안되었지만 이후 부트스트랩(Ver.1~3)에서 이 방법을 사용하면서 널리 알려지게 되었습니다.

css

.parent {
    /* For IE 6/7 only */
    *zoom: 1;
}
.parent:before,
.parent:after {
    content: "";
    display: table;
}
.parent:after {
    clear:both;
}

포지셔닝(Positioning)

CSS 레이아웃 중의 하나인 포지셔닝(Positioning) 레이아웃을 다뤄봅니다.
포지셔닝 레이아웃에는 position 속성과 이와 관련된 top, right, bottom, left, z-index 속성에 대해 알아보도록 합니다.

앞서 학습한 플로팅(floating) 레이아웃은 일반적으로 큰 틀을 잡는데 사용할 수 있으나 세부적인 배치 작업을 할 때는 포지셔닝이란 테크닉을 사용할 필요가 있습니다. 포지셔닝이란 사전적 의미대로 위치를 잡을 때 사용하는 것으로 웹브라우저가 렌더링하는 기본 레이아웃 흐름(Normal Layout Flow)을 재정의하여 디테일한 위치를 지정하고자 할 때 사용합니다.

예를 들어, 페이지의 다른 부분 위에 떠있는 UI 요소를 나타내거나, 페이지의 스크롤과 상관없이 항상 브라우저 창의 동일한 위치에 자리한 UI 요소를 만들고자 하는 경우에 이용합니다.

포지셔닝(Positioning) 레이아웃 유형

• 정적(static) 위치 : 기본값
• 상대(relative) 위치
• 절대(absolute) 위치
• 고정(fixed) 위치
• 달라붙는(sticky) 위치 : IE 브라우저 미지원   단, IE9 이상에서 자바스크립트를 이용하면 구현 가능함.

css

.element {
    position:relative;
    left:50px;
    top:10px;
    z-index:1;
}

static

static 은 기본값(default)으로, 문서의 흐름에 따라 순서대로 위치를 지정합니다.
이 값은 요소가 가지고 있는 기본(초기)값으로 위치를 지정하지 않을 때와 같고, 보통 static 을 사용할 일은 잘 없지만 position 의 오프셋 속성값을 무시하고자 하는 경우에 사용될 수 있습니다.
기본값이기 때문에 블록 레벨 요소는 문서 흐름에 포함된 사각 박스를 생성하고, 인라인 레벨 박스는 부모 요소의 흐름에 포함된 한 줄 이상의 라인 박스를 생성하며, top, bottom, left, right 속성값이 적용되지 않습니다.

relative

relative 는 사전적 의미대로 상대적으로 위치를 이동하게 됩니다.
그렇다면 상대 위치인 relative 는 누구를 기준으로 상대 위치를 가지느냐 하는 것은 일반 흐름을 기준점으로 위치를 이동하게 됩니다.
예를 들어 {left:20} 이면 요소 박스가 특정 거리만큼 위치 이동하게 되어 20픽셀이 요소의 왼쪽에 위치하게 됩니다.
여기서 중요한 점은 HTML 의 기본 레이아웃 흐름에서는 요소가 플롯이 되었을 때 아래에 있는 요소 박스는 위(플롯이 적용된 요소)에 있는 박스가 없다고 인식하고 위로 올라가지만 position:relative; 를 사용하게 되면 이동하기 전의 요소가 자라잡고 있던 공간(박스의 원래 위치에 있던 공간)은 유지한 채 이동한다는 점입니다.
즉, 기본 레이아웃 흐름을 그대로 유지하는 것입니다.
정리하면, offset 값을 설정하기 전인 요소 기존 공간은 그대로 유지(기존 공간(분신)을 두고 이동하는 특성)되기 때문에 그 공간 역시 이 요소가 차지하게 됩니다. 그리고 별도의 offset 값을 지정하지 않으면 static 과 동일하게 동작합니다.

absolute

해당 요소의 첫번째 부모 요소 위치(static 제외)에 따라 위치가 결정됩니다.
이 요소 박스는 문서의 흐름에서 완전히 벗어나 버리기 때문에 요소가 일반적인 문서의 흐름에서 차지하던 공간은 그 요소가 가지고 있던 위치는 없는 것처럼 사라져 버립니다.
그리고 기존 요소가 있어야 할 위치와 상관없이 위치를 지정할 수 있기 때문에 절대 위치라고 합니다.

하지만 가장 가까운 상위 요소(부모요소) 중에 relative 나 absolute 가 적용된 요소를 기준으로 위치가 결정됩니다.

즉, 본래 자신의 위치 혹은 부모 요소의 속성중 relative 나 absolute 가 선언된 요소를 기준으로 좌표 속성을 통해 이동시킬수 있습니다.

상위 요소가 없다면 위치는 html 이나 body 를 기준으로 설정됩니다. (브라우저마다 다름)

absolute 와 float 의 차이점

float 의 경우, 설정된 요소 보다 마크업 순서상 먼저 작성된 요소들에게는 영향을 끼치지 않고 오직 float 이 적용된 요소보다 나중에 작성된 요소들에게만 영향을 끼치게 됩니다.
반면 absolute 가 적용된 요소는 마크업 순서상 먼저 작성 되었던, 나중에 작성 되었던 상관 없이 모두 영향을 받게 됩니다.

fixed

해당 영역에 위치를 고정
absolute 값으로 설정된 경우와 비슷하게 동작하지만 브라우저 화면(뷰포트)를 기준으로 위치를 이동하게 됩니다.

fixed 가 부여된 요소는 뷰포트에 상대적으로 위치가 지정되는데 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 의미입니다.

relative, absolute 와 마찬가지로 offset 값으로 제어가 가능합니다. 따라서 화면이 스크롤되면서 화면전환이 일어나더라도 항상 같은 위치의 고정된 위치를 설정할 수 있습니다.

다시말해, 상위(부모) 요소에 영향을 받지 않습니다.

top, right, bottom, left

위에서 학습한 CSS 속성과 함께 top, right, bottom, left 을 설정하여 세부적인 위치 이동을 할 수 있습니다.

다시 말해, position 속성 값은 top / bottom / left / right 값을 기준으로 위치 이동하는데 양수 값이면 박스 영역의 안쪽 뱡향으로 이동하고 음수 값이면 박스 영역의 바깥쪽 방향으로 이동합니다.

양수값은 다음과 같습니다.

• left: 100px : 요소의 왼쪽을 기준으로 오른쪽으로 이동
• top: 100px : 요소의 위쪽을 기준으로 아래로 이동
• right: 100px : 요소의 오른쪽을 기준으로 왼쪽으로 이동
• bottom: 100px : 요소의 아래쪽을 기준으로 위쪽로 이동

음수값은 다음과 같습니다.

• left: -100px : 요소의 왼쪽을 기준으로 왼쪽으로 이동
• top: -100px : 요소의 위쪽을 기준으로 위로 이동
• right: -100px : 요소의 오른쪽을 기준으로 오른쪽으로 이동
• bottom: -100px : 요소의 아래쪽을 기준으로 아래쪽으로 이동

포지션 속성을 사용해 박스를 위치 이동시킬 때 top 또는 bottom, left 또는 right 기준점을 설정합니다.

정리하면 위치 이동의 기준 축 설정은 사각형의 각 모서리가 됩니다.

• 좌측 상단 (top, left)
• 우측 상단 (top, right)
• 좌측 하단 (bottom, left)
• 우측 하단 (bottom, right)

이어서 이동 거리 설정은 양수, 0, 음수 설정이 가능하고, 각 설정에 따라 이동하는 방향은 박스를 그렸을 때, 양수는 박스 내부 방향으로 이동하게 됩니다. 반대로 음수는 박스 외부 방향으로 이동하게 됩니다.

그렇기 때문에 박스의 위치 이동 기준점에 따라 값은 양수 또는 음수 설정이 필요하게 됩니다.

z-index

z-index 속성은 해당 요소에 대한 순차적인 위치(어떤 요소가 앞으로 나오고 뒤에 나오게 할지 배치 순서를 결정)를 지정하는 것이며, 숫자가 가장 크게 지정된 요소가 항상 제일 앞(위)쪽에 위치하게 됩니다.

즉, z-index 는 요소의 순서를 제어하는 속성입니다.

여기서 순서라는 것은 상,우,하,좌의 2차원적 순서가 아닌 속성 이름에서도 알 수 있듯이 z축의 3차원적 순서를 의미합니다.

결국 가장 위쪽에 위치한다는 말은 z축을 기준으로 겹침 상태에서의 가장 위를 의미하며, 숫자가 낮을 수록 아래로 배치되며 숫자가 높을 수록 위로 배치하게 됩니다.

z-index 는 position: relative, absolute, fixed 속성이 적용된 요소에서만 동작한다는 점을 기억해야 합니다.

그리고 z-index 값은 일단위보다는 십단위나 백단위로 설정하는 것을 권장합니다.
추후 마크업 작업 중에 수정사항이 발생하게 되는 경우 마크업의 순서, 즉 요소의 depth 가 깊어지면서 중간 단계에 새로운 요소들을 추가할 때 위치 순서가 바뀌면서 복잡하게 꼬이게 됩니다.
그래서 용이하게 관리하기 위해서는 십단위, 백단위로 설정하는 것이 좋습니다.

Related Info

1. CSS 레이아웃 (https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout)
2. Position (https://developer.mozilla.org/ko/docs/Web/CSS/position)

Jaehee's WebClub