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

• 기본 배치에서 벗어나 떠있기 - float

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

• 하나의 블록 엘리먼트는 box 형태이다. - box-model

블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정한다.
margin, padding, border, outline으로 생성된다.

box-shadow 속성도 box-model으로 설명할 수 있다.
box-shadow는 border 밖에 테두리를 그릴 수 있는 속성이다.

 

* margin의 순서는 시계방향 (top > right > bottom > left) 순이다.

 

• 엘리먼트의 크기는 부모의 크기가 기본이다.
  block 엘리먼트의 크기는 기본적으로 부모의 크기만큼 가진다.
  
  
• box-sizing과 padding
  padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있다. box-sizing으로 이것을 컨트롤 할 수 있다. box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 값만을 늘릴 수 있다.

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

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

웹 프로그래밍(풀스택)