HTML&CSS - [CSS] Layout (요소배치) 완전 정복 1 - 개요

서론

웹 페이지를 만드는 과정에서 요소를 원하는 위치에 배치하는 것은 아주 중요한 일입니다.

그리고 CSS를 통해 요소를 배치하는 방법은 정말 여러 가지 방법이 존재합니다.

 

처음 공부하는 과정에서는 "요소 가운데 정렬하는 방법", "요소 위치 설정"등으로 검색해서 그대로 따라 하는 식으로 사용하곤 했습니다. 분명히 따라 하면 잘 되긴 하는데... 문제를 해결하는 방법이 너무 많다.  "언제 어떤 방법을 왜 쓰는 것이고 무엇이 효과적인가?"라는 의문점이 생겼습니다.

 

결과적으로 의문을 해소하기 위해 공부를 하다 보니, 이 정도는 알아야겠다는 생각이 들어 포스트를 작성하게 되었습니다.

• CSS에는 요소 배치를 위한 기술이 꾸준히 발전되고 있다.
  
  • 다양한 요소 배치 기술이 존재한다.
  • 장단점이 존재한다.
• 다양한 요소 배치 기술을 배우면 장점
  • 프로젝트를 진행하는데 일관된 기술을 통해 충돌을 피하고, 유지보수에 용의 하다. 
  • 또한 알맞은 목적에 적절히 사용하면 시간 대비 능률 또한 향상할 수 있다.
  • 과거의 기술을 이해하고 있다면, 오래된 웹 페이지들을 참고하는데 도움이 된다.

이런 배경 목적을 가지고 앞으로 CSS를 통한 요소 배치에 대한 이해를 돕고자 포스트를 작성할 예정입니다.

대부분의 내용은 MDN을 참조하여 작성되었습니다.

---

CSS의 레이아웃 기술

레이아웃이란 무엇일까요? 간단하게 설명하자면 구성 요소를 보기 쉽게 효과적으로 배치하는 작업을 말합니다.

CSS에서는 다양한 레이아웃 구성 방법을 제공합니다.

 

무엇들이 있는지 먼저 살펴보도록 합시다.

 

• 기본적인 배치 방법 (Normal flow)
• Display 속성을 이용하는 방법
  • flex
  • grid
• Float속성을 이용하는 방법
• Position 속성을 이용하는 방법
• Table layout
• Muti-column layout
• 기타 기존 방법들...

이제 CSS를 통한 요소 배치를 정말 정복하기 위해서 CSS에서 제공하는 다양한 레이아웃 배치 기술을 하나씩 배워보도록 합시다. 

본문에서는 각각의 개요만 기술하고 다음 글에서 하나씩 자세하게 살펴보도록 하겠습니다.

 

---

Normal flow - 기본적인 배치 방법

순수 HTML만으로 작성된 소스코드를 웹 브라우저에서 실행시킨다면 어떤 결과가 발생될까요? 

CSS를 통한 아무런 요소 배치 제어를 하지 않아도 기본적인 배치 순서는 존재합니다.

기본적인 배치 순서에 대한 이해를 해야만, 어떤 식으로 CSS에서 요소 배치를 하는지 알 수 있기 때문에 매우 중요합니다.

 

순수 HTML로 작성된 소스코드는 각각의 태그(요소)들로 이루어져 있습니다. 웹 브라우저는 소스코드를 처음부터 끝까지 읽어가며 순서대로 차곡차곡 요소들을 생성해서 배치합니다.

 

그런데.. 이를 확인하려고 순수 HTML을 작성하고 웹브라우저에서 실행해 봤더니 뭔가 이상한 부분이 있습니다.

See the Pen span vs div by Gon (@gon-91) on CodePen.

• div 태그를 사용한 요소는 자동으로 줄 넘김이 발생했다.
• span 태그를 사용한 요소는 줄 넘김이 발생하지 않았다.

웹 브라우저는 분명히 순서대로 요소들을 생성하고 배치했습니다. 하지만 div와 span으로 생성된 각각의 요소는 뭔가 배치하는 방법이 차이가 있는 것을 알 수 있습니다.

이를 통해 우리는 각각의 요소마다 배치되는 방법이 정의되어 있다고 알 수 있습니다.

그리고 배치되는 방법은 정의하지 않아도 설정된 기본 값으로 정의된다고 알 수 있습니다.

 

자, 그렇다면 div와 span은 요소를 배치하는 방법이 무엇일까요?

• div : block
• span : inline

뒤에 조금 더 자세히 설명하겠지만 순수 HTML 소스코드로 생성된 div요소는 display:block으로 span요소는 display:inline으로 정의됩니다.

 

---

Display 속성

내용을 이해하면서 내려왔다면 아직 설명을 안 했지만, Display속성이 무엇을 말하려는지 예상해 볼 수 있을 것입니다.

Display속성은 요소가 배치되는 방법에 대한 정의입니다. 즉 요소가 보이는 방법이죠.

 

순수 HTML로 작성하고 생성된 요소들에도 Display속성이 존재하며, 그 안에 기본 값으로 설정이 되어있는 것뿐입니다.

 

그럼 먼저 Display속성에 적용되는 대표적인 값들은 다음과 같습니다.

• block
• inline
• flex
• grid

block과 inline은 이미 사용해 봤습니다. 차이를 조금 더 확인하기 위해서 소스코드를 살펴보도록 하겠습니다.

 

See the Pen divvsspan2 by Gon (@gon-91) on CodePen.

차이점이 느껴지나요? 

• display:block의 특징
  • 줄 넘김이 있다.
  • width와 height 속성을 적용된다.
• display:inline의 특징
  • 줄 넘김이 없다.
  • width와 height 속성이 적용되지 않는다.

가장 기본적인 유형의 속성 값이며 요소 자체를 외부에 어떻게 보이게 될 것인가를 결정할 수 있습니다. 하지만 자유도가 상당히 떨어지는 느낌이 들긴 합니다. Layout을 설정하기에는 부족한 부분이 있다는 생각이 들죠.

 

그래서, 요소자체의 내부를 어떻게 보일 것인가를 결정할 수 있는 속성 값도 존재합니다.

바로 flex와 grid입니다.

이 두가지의 속성 값이 바로 특정 요소에서 Layout을 만드는 있는 가장 대표적인CSS 기술 중 하나입니다.

 

Display속성을 적절히 변경한다면, 전체적인 흐름은 Normal flow를 거스르지 않으면서 요소들이 보이는 방법을 정의하여 Layout을 설정할 수 있습니다.

 

---

Float 속성

떠다니는 의미를 가지는 Float은 말 그대로 요소를 Noraml flow에서 벗어나 떠다니는 효과를 주는 속성입니다.

 

원래 이 속성이 탄생된 목적은 신문과 같은 간단한 레이아웃을 만들기 위해 도입된 기술입니다.

상당히 도입된 지 오래된 과거의 낡은 기술이라고 할 수 있습니다.

See the Pen float sample by Gon (@gon-91) on CodePen.

하지만 flex나 grid가 도입되기 이전 많이 사용하고 지금도 알아두면 효율적인 부분이 있기 때문에 알아두면 좋습니다.

 

---

Position 속성

Position 속성을 이용한 요소 배치 방법은 개념적으로 위에 설명한 내용과 약간의 차이가 있습니다.

 

위에서 설명한 레이아웃 기법들은 요소들이 어떻게 생성되는지를 결정해 주는 레이아웃 기법이지만,

Position닝 속성은 특정 기준으로부터 요소들의 위치를 제어하는 관점의 레이아웃 기법입니다.

 

따라서 요소들에 애니메이션 효과 또는 뷰포트를 기준으로 요소들을 제어하기에 효과적인 방법입니다.

 

Position속성은 특정 기준으로부터 요소들의 위치를 제어한다고 말했습니다.

• static
• relative
• absolute
• fixed
• sticky

각각의 속성 값마다 특정 기준은 무엇인가에 대한 정의가 되어있습니다.

---

요약정리

자, CSS 레이아웃 다양한 레이아웃 기법에 대해서 간략하게 알아보았습니다. 

각각의 기법들은 다음 글에서 좀 더 자세히 다뤄보도록 하고 오늘 내용을 정리하며 글을 마무리하겠습니다.

• CSS는 요소 배치하는 다양한 레이아웃 기법이 존재한다.
  
  • display속성
  • float속성
  • position속성
• display속성 값 중 flex와 grid가 현시점 가장 효율적인 레이아웃 기법으로 각광받고 있다.
• float속성은 상대적으로 구 기법이지만 알아둘 필요는 있다.
• position속성은 주로 애니메이션이나, 뷰포트 기준 요소제를 할 때 효과적이다.