[CSS3] CSS Display and Positioning - Flow of HTML (1)

브라우저는 CSS파일이 포함되지 않은 순수 HTML 파일의 요소들을 왼쪽에서부터 오른쪽으로, 위에서부터 아래로 요소가 HTML 파일 상에서 존재하는 순서대로 렌더링 한다. 이를 HTML 요소들의 흐름(flow)라고 한다

 

HTML 요소들을 스타일 하는 속성에 더해, CSS는 브라우저가 요소들을 위치시키는(positioning) 속성들을 또한 포함한다. 이러한 속성들은 요소가 어디에 위치해야 하는지, 다른 요소들과 같은 줄에 위치할 수 있는지, 그리고 이와 관련된 다른 여러 속성들을 설정할 수 있다

 

이번 포스팅에서 다음과 같이 HTML 요소를 포지셔닝하는 다섯 가지 속성들에 대해서 알아보도록 하자

 

• position
• display
• z-index
• float
• clear

각 속성들은 우리가 웹 페이지의 요소들을 위치시키고 보여지는 양상을 정의할 수 있게 해 준다. 이 속성들은 우리가 이미 알고 있는 다른 스타일링 속성들과 함께 사용될 수 있다

 

 

 

Position

 

다음과 같은 블럭 단위(block-level) 요소가 존재한다고 생각해보자

 

<그림 1> block-level element(출처: codecademy.com)

 

이러한 block-level 요소는 그들의 부모 요소의 width 만큼의 블록을 생성한다. 이는 같은 부모 내 자식 요소들이 동일한 수평선 상에 오지 못 하게 만든다. 위의 박스는 다음과 같은 CSS 속성을 포함한다

.boxes {
  width: 120px;
  height: 70px;
}

그리고 다음과 같은 HTML로 구성된다

<div class="boxes"></div>
<div class="boxes"></div>

위 그림의 block-level 요소들이 각각 그들만의 라인을 차지하고 있다는 것을 주목하자. 즉 결과적으로 이들은 서로 오버랩되지 않는다. 이것이 바로 block-level 요소들의 디폴트 포지션(position)이다

 

요소의 디폴트 포지션은 position 이라는 속성을 정의하여 바꿔줄 수 있다. position 속성은 다음과 같은 키워드를 값으로 가질 수 있다

 

1. static - 디폴트 값(명시할 필요 없음)
2. relative
3. absolute
4. fixed

다음 섹션에서 위 키워드에 대해 순서대로 알아보도록 하고, 지금은 디폴트 값으로 유지하고 싶다면 position 속성을 정의할 필요가 없다는 것을 기억하자

 

 

 

Position: Relative

 

디폴트 포지션을 수정하는 한 가지 방법은 position속성 값으로 relative를 주는 것이다. 이 값은 한 요소를 이의 디폴트 포지션에 대해 상대적으로 위치할 수 있게 만들어준다

.box-bottom {
  background-color: DeepSkyBlue;
  position: relative;
}

위 코드는 브라우저에게 해당 요소를 relative하게 배치하라고 알려주었지만, 정확히 어디에 배치되어야 하는지는 알려주지 않는다

.box-bottom {
  background-color: DeepSkyBlue;
  position: relative;
  top: 20px;
  left: 50px;
}

위 코드는 해당 요소를 네 가지 오프셋(offset)속성 중 두 가지 속성에 의해 포지셔닝시키고 있다. 오프셋 속성은 다음과 같다:

 

1. top - 요소를 주어진 값 만큼 위에서 아래로 내린다
2. bottom - 요소를 주어진 값 만큼 아래에서 위로 올린다
3. left - 요소를 주어진 값 만큼 왼쪽에서 오른쪽으로 옮긴다
4. right - 요소를 주어진 값 만큼 오른쪽에서 왼쪽으로 옮긴다

위의 코드로 인해 아래쪽 상자는 원래의 디폴트 위치로부터 오른쪽으로 50px, 아래쪽으로 20px 만큼 이동하게 된다. 아래 그림은 새롭게 포지셔닝된 요소를 보여주고 있다. 점선으로 표현된 부분은 원래의 디폴트(static) 위치를 나타내고 있다

 

<그림 2> relatively positioned block-level element(출처: codecademy.com)

 

오프셋 속성의 값은 px, em, 또는 percentage가 주어질 수 있다. 오프셋 속성은 position 속성이 static 일때는 작동하지 않는다는 것에 주의하자

 

 

 

Position: Absolute

 

요소의 포지션을 변경할 수 있는 또 다른 방법은 해당 요소의 포지션을 absolute 로 설정하는 것이다. 한 요소의 포지션이 absolute로 설정될 때, 모든 다른 요소들은 그 요소를 무시(ignore)하고 그 요소가 페이지에 존재하지 않는 것처럼 동작한다. 해당 요소는 가장 가까운 위치에 있는 부모 요소를 기준으로 배치된다

.box-bottom {
  background-color: DeepSkyBlue;
  position: absolute;
  top: 20px;
  left: 50px;
}

위 코드에서, 아래 쪽 박스는 부모 요소의 왼쪽 위를 기준으로 아래로 20px, 오른쪽으로 50px 만큼 떨어지게 된다. 만약 오프셋 속성이 정의되지 않으면, 위쪽 박스는 올라온 아래쪽 박스에 의해 완전히 덮이게 될 것이다. 다음 gif 그림은 새롭게 배치된 box-level 요소를 보여주고 있다

 

<그림 3> Absolutely positioned block-level element(출처: codecademy.com)

 

아래쪽 박스가 이를 담고있는 부모 요소를 기준으로 오프셋만큼 떨어진 위치에 자리 잡게 되었다. 여기서는 스크롤하는 사진을 보여주었는데, 다음 섹션에서 absolute와 fixed 가 스크롤할 때 어떤 차이를 보이는지 알아보도록 하자

 

 

 

Position: Fixed

 

만약 한 요소의 position 속성이 absolute 로 설정되면 유저가 스크롤할 때 따라 올라가게 된다. 우리는 요소를 특정 위치에 고정(fix)시킬 수 있는데, fixed로 설정해 줌으로써 이를 달성할 수 있다

.box-bottom {
  background-color: DeepSkyBlue;
  position: fixed;
  top: 20px;
  left: 50px;
}

위 코드에서 아래 쪽 박스는 주어진 위치에 고정되게 된다. 사용자가 스크롤을 하게 되더라도 말이다. 이를 보여주는 그림은 아래와 같다

 

<그림 4> Fixed box-level element(출처: codecademy.com)

 

이 테크닉은 종종 헤더 메뉴를 고정시키는 데 사용된다

 

 

지금까지 요소를 위치시키는 position 속성이 갖는 네 가지 값(static, relative, absolute, fixed)과 각각의 작동 방식에 대해서 알아보았다. 다음 포스팅에서는 HTML 요소를 포지셔닝하는 5가지 속성 중 나머지 속성들에 대해서 알아보도록 하자