Part 01 웹 프로그램 언어의 기초_17

Naver BoostCourse Full-Stack Developer Course

Part 01 웹 프로그래밍 기초

16. Element가 배치되는 방법 (CSS layout)

※ Intro

- CSS의 배치를 위해 여러가지 중요한 개념 이해

- block과 inline의 차이, position 속성 이해

- float 성질 이해

※ 개념

- 박스 모델 (Box model)

- margin

- border

- padding

- position

※ 엘리먼트가 배치되는 방식

- 엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고도 함

- 기본 엘리먼트는 위에서 아래로 배치되는 것이 기본

- 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용

display(block, inline, inline-block) position(static, absolute, relative, fixed) float(left, right)

※ 엘리먼트가 배치되는 방식 - (display : block)

- display 속성이 block이거나 inline-block 인 경우 그 엘리먼트는 벽돌을 쌓든 블록을 가지고 쌓임

<div> block1 </div> <p> block2 </p> <div> block3 </div>

※ 엘리먼트가 배치되는 방식 - (display : inline)

- display 속성이 inline 인 경우 우측으로, 아래쪽으로 빈 자리를 차지하며 흐름

- 높이와 넓이를 지정해도 반영되지 않음

<div>   <span> 나는 어떻게 배치되나요? </span>     <span> 좌우로 배치되는군요 </span>   <a> 링크는요? </a>   <strong> 링크도 강조도 모두 좌우로 흐르는군요 </strong>    모두다 display 속성이 inline 엘리먼트이기 때문입니다. </div>

※ 엘리먼트가 배치되는 방식 (position : static, relative, absolute)

- 엘리먼트 배치가 순서대로만, 위아래로 또는 좌우로 흐르면서 쌓이기만 하면 다양한 배치를 하기 어려움

- position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월함

1) position 속성으로 특별한 배치를 할 수 있음

- position 속성은 기본 static 

- 그냥 순서대로 배치됨

2) absolute 는 기준점에 따라서 특별한 위치에 위치함

- top / left / right / bottom 으로 설정함

- 기준점을 상위 엘리먼트로 단계적으로 찾아가는데 static 이 아닌 position이 기준점

3) relative는 원래 자신이 위치해야할 곳을 기준으로 이동

- top / left / right / bottom 으로 설정

4) fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작함

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

- margin으로 배치가 달라질 수 있음

- margin 은 위 / 아래 / 좌 / 우 엘리먼트와 본인 간의 간격임 

- 따라서 그 간격만큼 내 위치가 달라짐

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

- float 속성으로 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수도 있음

- 일반적인 배치에 따라 배치된 상태에서 float는 벗어난 형태로 특별히 배치됨

- 뒤의 block 엘리먼트가 float된 엘리먼트를 의식하지 못하고 중첩돼서 배치됨

- float 속성은 이런 특이성때문에 웹 사이트의 전체 레이아웃 배치에서 유용하게 활용됨

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

- 블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정함