[ HTML+CSS ] float과 포지셔닝(static, relative, absolute, fixed)

오늘은 html 요소들의 위치를 옮기는 방법에 대해 알아볼 것이다. 

1. Float

float는 단어뜻 그대로 html 요소를 띄우는 역할을 한다. '박스 모델을 띄운다'가 정확한 표현인 것 같다. 예를 들어 아래와 같이 세 개의 div 태그가 있다고 해보자. 각 요소는 배경색으로 구분할 수 있다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

여기서 가장 상위의 박스 width를 20vw로 설정하고 'float: left' 속성을 부여해보자. 박스를 왼쪽으로 띄운다는 뜻이다. 

 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

결과 분석해보자. 원래 div 태그는 block 요소이기 때문에 화면상에서 한 줄을 다 차지해야 한다. 그런데 결과를 보면 한 줄에 두 개의 div 태그가 존재하고 있다. 이게 가능한 이유는 'skyblue'가 'gray' 위에 떠있기 때문이다. 그림을 2차원으로 나타내면 아래와 같다. 

 

 

이게 바로 'float' 속성이다. 그림을 보면 어렵지 않게 이해할 수 있다. 그러면 여기에 gray의 witdh를 20vw로 설정하고, 'float:left' 속성을 부여해보자. 결과는 아래와 같다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

gray 요소가 위로 뜨면서, 왼쪽으로 정렬된 것을 확인할 수 있다. 이 결과로부터 float 속성이 부여된 요소끼리는 같은 층을 공유하고 있다는 사실을 알 수 있다. 같은 층을 공유하고 있기 때문에 skyblue와 gray가 왼쪽으로 나란히 정렬될 수 있다.

 

그러면 pink 요소가 float 밑층에 있지 않도록 하는 방법은 없을까? 있다!! 'clear: both' 속성을 부여해주면 '나는 float을 무시하겠다'는 뜻이다. 따라서 pink 요소에 'clear: both' 속성을 부여해주면 pink 요소가 float 아래쪽에 위치하게 된다. 아래처럼 말이다. 이번에는 gray 요소에 'float: right' 속성을 부여해봤다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

2. 포지셔닝

CSS에서 'position' 속성은 특정 요소의 위치를 이동할 때 기준점을 잡아주는 역할을 한다. position과 세트로 따라다니는 속성이 'left, right, bottom, top' 속성이다. 이는 position 속성을 기준으로 얼마나 이동할지를 나타내는 속성이다. 앞으로 이 네 가지 이동 속성을 통틀어 '오프셋'이라고 부르겠다. 

1) static (기본값)

모든 태그들은 기본적으로 position 속성이 static으로 부여되어 있다. Static 상태에서는 오프셋을 설정할 수 없다. 따라서 박스 모델 또한 이동이 불가능하다. 

2) relative

원래 위치가 기준점이 된다. 따라서 오프셋을 설정하면 화면 상에서 원래 위치를 기준으로 이동한다. 오프셋을 설정했을때와 설정하지 않았을 때의 차이를 보자. 먼저 아래는 오프셋을 설정하지 않았을 때다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

오프셋을 설정하지 않으면 위치 변화가 없기 때문에 static과 큰 차이가 없다. 그러면 이제 relative 박스에 'left: 10%' 과 'top:5%' 속성을 부여해보자. 위치가 어떻게 변하는지 유심히 살펴보자. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

위치 변화를 보면 relative 박스의 원래 위치를 기준으로 오른쪽으로 10%, 아래로 5% 이동한 것을 확인할 수 있다. 오프셋 값은 오프셋 속성을 기준으로 얼만큼 여백을 줄 것인지를 나타내기 때문에 박스의 이동 방향은 오프셋 속성과 반대 방향이 된다. 

 

3. absolute

가장 가까운 부모 중 position이 relative인 박스가 기준점이 된다. 말로 하면 좀 헷갈리니깐 예제로 설명하겠다. 두 가지 케이스로 비교해보자. 

 

먼저 기본 설정을 해주자. 세 개의 div 태그를 생성하고 부모 자식 관계를 [ gray > skyblue > pink ] 로 설정했다. HTML 코드로 부모 자식 관계를 확인해보자. 화면상에는 아래와 같이 나타난다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

여기서 가장 하위 태그인 pink에게 'position: absolute'를 부여해주고, skyblue와 gray에게 'position: relative'를 부여해보자. 그리고 pink 박스에 'right: 10%' 과 'bottom:5%' 속성을 부여해주자. 가장 가까운 부모 중에서 relative인 박스가 skyblue이므로 pink의 이동 기준점은 skyblue가 된다. 따라서 결과를 대략적으로 예상해보면 pink는 skyblue 박스의 오른쪽 아래에 위치할 것이다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

이제 gray에게만 'position: relative' 속성을 부여하고, pink는 'position: absolue'로, 오프셋 값은 동일하게 설정해보자. 결과는 어떻게 될까? 가장 가까운 부모 중에서 relative인 박스가 gray이므로 pink의 이동 기준점은 gray가 된다. 따라서 결과를 대략적으로 예상해보면 pink는 gray 박스의 오른쪽 아래에 위치할 것이다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

만약에 relative 속성을 가진 부모가 하나도 없다면 어떻게 될까? 그러면 absolute의 이동 기준점은 뷰포트(viewport)가 된다.

4. fixed

브라우저 상에서 위치를 고정시키는 속성값이다. 네이게이션바를 상상해보면 이해하기 쉽다. 눈으로 보면 바로 이해가기 때문에 예제를 보자. skyblue 박스에만 'position: fixed' 속성을 부여해줬다. 스크롤바를 내려보면 skyblue 박스의 위치가 화면 상에서 고정되는 것을 확인할 수 있다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.