[HTML, CSS] Element가 배치되는 방법 (CSS Layout)

엘리먼트 배치

엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering과정이라고 한다.
엘리먼트는 위에서 아래로 순서대로 블럭을 이루며 배치되는 것이 기본이다. 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하기 때문에, 이를 다양한 방식으로 배치할 수 있도록 css에는 추가적인 속성을 제공한다.

 

css의 중요 속성
- display (block, inline, inline-block)
- position (static, absolute, relative, fixed)
- float (left, right)

 

 

block : 영역을 가지는 기본 속성
* inline 속성을 기본으로 가지는 태그 <span>, <a> 등은 블록을 가지고 있지 않아서 위에서 아래로 쌓듯이 생기지 않고, 좌에서 우로 흐른다.

 

• 블록으로 쌓이는 엘리먼트 (display: block)
  display 속성이 block이거나 inline-block인 경우 그 엘리먼트는 벽돌을 쌓든 블록을 가지고 쌓
  구현한 코드는 화면에서 위에서 아래로 쌓이듯이 채워진다.
  높이값을 더 주면 더 높은 크기로 엘리먼트가 쌓인다.
  
  * p태그는 위 아래 마진값을 기본으로 가지고 있는 속성이다.
  
  
• 옆으로 흐르는 엘리먼트 (display: inline)
  display 속성이 inline인 경우는 우측으로, 그리고 아래쪽으로 빈 자리를 차지하며 흐른다. inline 속성의 엘리먼트는 높이와 넓이를 지정해도 반영이 되지 않는다.
  
  

 

 

 

• position 속성
  엘리먼트 배치가 순서대로 위아래 또는 좌우로 흐르면서 쌓이기만 하면 다양한 배치를 하기 어렵다.
  position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월하다.
  
  1) position 속성으로 특별한 배치를 할 수도 있다.
  position 속성은 기본 static이다. 그냥 순서대로 배치된다.
  
  2) absolute는 기준점에 따라서 특별한 위치에 위치한다.
  top / left / right / bottom 으로 설정한다.
  기준점을 상위 엘리먼트로 단계적으로 찾아가는데 static이 아닌 position이 기준점이다.
  즉, 상위 엘리먼트 포지션이 static이면 기준점으로 삼지 않고, 한 단계 더 위로 올라가서 상위 엘리먼트의 기준점이 예를 들어 relative일때 기준점을 삼아 그 기준점으로 값이 설정된다.
  
  * absolute는 top, left값을 꼭 주는 것이 좋다. top, left를 0, 0 이라도 주는 것이 좋다.
  
  3) relative는 원래 자신이 위치해야 할 곳을 기준으로 이동한다.
  top / left / right / bottom로 설정한다.
  
  4) fixed는 viewport(전체화면) 좌측, 맨위를 기준으로 동작한다.

간격을 다르게 해서 배치하기

엘리먼트가 배치되는 방식 (margin : 10px)

margin으로 배치가 달라질 수 있다. margin은 위, 아래, 좌, 우 엘리먼트와 본인 간의 간격이다. 따라서 그 간격만큼 내 위치가 달라진다.

 

엘리먼트가 배치되는 방식 (float: left)

float 속성으로 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수 있다.
일반적인 배치에 따라서 배치된 상태에서 float는 벗어난 형태로 배치된다.
따라서 뒤에 block 엘리먼트가 float된 엘리먼트를 의식하지 못하고 중첩돼서 배치된다.

엘리먼트가 배치되는 방식 (box-model)

블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정한다. margin, padding, border, outline으로 생성되는 것이다. box-shadow 속성도 box-model에 포함지어 설명할 수 있다.
box-shadow는 border 밖에 테두리를 그릴 수 있는 속성이다.


엘리먼트의 크기

block 엘리먼트의 크기는 기본적으로는 부모의 크기만큼을 가진다.
예를 들어, width: 100%는 부모의 크기만큼을 다 갖는 것과 같다.


box-sizing과 padding

padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있다. box-sizing 속성으로 이를 컨트롤 할 수 있다.
box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding값만을 늘릴 수 있다.


layout 구현방법

전체 레이아웃은 float을 잘 사용해서 2단, 3단 컬럼 배치를 구현한다. 
최근에는 css-grid나 flex 속성 등 layout을 위한 속성을 사용하기 시작했으며 지원범위를 확인해서 사용한다.
특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정한다.
네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 한다.
엘리먼트 안의 텍스트의 간격과 다른 엘리먼트간의 간격은 padding과 margin 속성을 잘 활용해서 위치시킨다.

 

 

 

 

 

 

참고 : boostcourse    https://www.boostcourse.org/web316/lecture/254263/?isDesc=false

웹 프로그래밍(풀스택)