TIL 11 | CSS Layout

song hyun·2021년 8월 4일
1

HTML/CSS

목록 보기
4/5
post-thumbnail

CSS

HTML문서만으로 웹 페이지를 제작할 경우 보통의 흐름 때문에 위에서 아래로 배치하게 된다. 그래서 이러한 경우에 작업 시간이 오래 소요되며, 완성 후에도 유지 보수가 힘들기 때문에 W3C에서 이러한 단점을 보완하기 위해서 만든 스타일 시트 언어가 CSS 스타일 시트(Cascading Style Sheet) 언어(language)이다.

CSS Layout

CSS 페이지 레이아웃 기술은 웹 페이지에 포함된 요소들을 취합할 수 있게 해주며, 그 요소들이 어느 위치에 놓을 것인지 제어하는 것을 말한다. 레이아웃은 기술은 보통 흐름(normal flow), display, position, float 등등이 등등이 있다.

display property

모든 요소는 한 가지 display 속성값을 갖고 있으며, 해당 하는 요소에 기본 동작을 지정하는데 사용된다. 예를 들어서<div> 요소는 display: block 속성을 가지고 있는데 inline 값으로 바꿀수도 있고, inline-block 값으로 바꿀수도 있다.

플로팅 레이아웃(Floating Layout)

일반적인 레이아웃 흐름은 기본적으로 화면에 렌더링 될 때 마크업 순서대로 위에서 아래의 방향으로 나열되게 되는데 float속성을 사용하게 되면 박스를 왼쪽 또는 오른쪽에서 위치시킬 수 있게 된다. 즉, 기본적인 문서 배치 흐름에서 벗어나 요소의 모소리가 페이지의 왼쪽 또는 오른쪽으로 이동하는 것을 말한다.

float property value

float속성을 사용할 요소는position: absolute와 양립할 수 없다.

  • none : 기본값으로 요소를 띄우지 않게 설정
  • left : 요소를 왼쪽 방향으로 설정
  • right: 요소를 오른쪽 방향으로 설정

float property의 특징

플로팅된 요소는 그 요소의 종류에 상관없이 블럭 박스가 된다. 예를 들어 인라인 요소인 링크(anchor)를 플로팅 시키는 경우에는 이 요소의 특성은 블럭 박스를 변경되고 마치 div 요소 인 것 처럼 동작하게 된다. 즉, 플로팅 된 요소는 display: inline-block을 선언한 것과 동일해지기 때문에 따로 선언해줄 필요는 없다.

float 속성 해제

플로팅한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에 레이아웃을 무너트리게 되는 현상에 접하게 된다. 이는 자주 발생되는 현상이며 이러한 문제를 해결하기 위해서는 float를 해제 해주어야 한다. 여기서 말하는 "해제"는 float가 적용된 요소를 해제하는 것이 아니라 clear속성을 적용해 float의 영향을 받지 않도록 한다는 의미이다.

float 해제하는 방법은 여러가지 방법이 있는데 그중에 많이 사용되는 방법은 다음과 같다.

/*  float 속성을 적용한 부모 요소에게 가상 요소를 적용하여 float를 해제하는 방법*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

포지셔닝 레이아웃(Positioning Layout)

포지션(position)속성을 사용하게 되면 웹 페이지 기본 흐름을 재정의할 수 있다. 즉, 레이아웃 내부에 있는 일부 요소의 위치를 조정하기 위해서position 속성하여 조정할 수 있다. position 속성에는 다음과 같은 유형들이 있다.

  • 정적 위치(static position)
  • 상대 위치(relative position)
  • 절대 위치(absolute position)
  • 고정된 위치(fixed position)
  • 달라붙는 위치(stick position)

정적 위치(static position)

static은 기본값으로 문서 흐름에 따라 순서대로 위치를 지정한다. 이 값은 요소가 가지고 있는 기본값으로 위치를 지정하지 않을 때와 같다. 즉, 자기가 원래 위치해야 하는 그 곳에 위치해야 한다. position속성 값이 static일 경우에 offset 값을 무시한다.

상대 위치(relative position)

relative는 내가 가지고 있는 일반 흐름의 위치에서 상대적으로 이동하며 기본 흐름을 유지한다. 즉, 자기가 원래 위치해야 하는 위치를 기준으로 상대적인 offset 거리만큼 이동한다.

절대 위치(absolute position)

상위 요소가 없다면 html 또는 body기준으로 설정되는데 브라우저 마다 다르다.

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

고정된 위치(fixed position)

fixed는 부모 요소와 관계 없이 브라우저 화면(view port)를 기준으로 위치를 고정한다. 즉, fixed가 적용된 요소는 뷰포트에 상대적으로 위치가 지정되는데 이는 페이지가 스크롤 되더라도 같은 곳에 위치한다는 의미이다. 그리고 상위(부모) 요소를 찾지 않는다.

달라붙는 위치(stick position)

position: sticky로 설정할 경우 relative처럼 동작하면서 relative 요소가 없는 경우에는 fixed 처럼 동작하는 두가지 효과를 모두 가질 수 있다. 수익 목적의 광고를 노출하는 경우에 많이 쓰인다.

Reference

css position →(SITE)
sticky positioning →(MDN)
position sticky →(CSS-TRICKS)

profile
Front-end Developer 🌱

0개의 댓글