[부스트코스] CSS (3/3)

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

여기서 말하는 Element는 HTML 태그를 말한다.

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

 

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

하지만 네이버를 보면 알 수 있듯이 웹사이트의 배치는 단순히 위에서 아래로 배치되는 것만으로는 부족하다.

 

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

 

 

display(bolck, inline, inline-block)

 

1. display:block

diplay 속성이 block이거나 inline-block인 경우 그 엘리먼트는 벽돌을 쌓는 듯이 블록을 가지고 쌓인다. 대부분의 태그들의 기본값이 block이다.

<div>div</div>
<div>div2</div>
<div>div3</div>

jsbin에서 랜더링된 결과

 

2. display:inline

display 속성이 inline인 경우는 우측으로, 그리고 아래쪽으로 빈자리를 차지하며 흐른다. <span>, <a>, <strong> 등의 태그의 기본값은 inline이다.

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

jsbin에서 랜더링된 결과

 

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은 위 / 아래 / 좌 / 우 엘리먼트와 본인 간의 간격이다.

따라서 그 간격만큼 내 위치가 달라진다.

 

 

float: left

loat 속성으로 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수 있다.

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

따라서 뒤에 block엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩돼서 배치된다.

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

네이버 모바일 화면을 보면 크게 두 개의 열로 레이아웃이 나뉜 것을 볼 수 있다. css 속성을 자세히 보면 float:left가 있는 것이 보인다. float에 체크를 풀면 해당 화면이 왼쪽 열 밑에 붙는다.

 

 

box-model

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

margin, padding, border, outline으로 생성되는 것이다.

box-shadow 속성도 box-model에 포함지어 설명할 수 있다.

box-shadow는 border 밖에 테두리를 그릴 수 있는 속성이다.

www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

 

엘리먼트의 크기

block엘리먼트의 크기는 기본적으로는 부모의 크기만큼을 가진다.

예를 들어, width:100%는 부모의 크기만큼을 다 갖는 것과 같다.

 

 

box-sizing과 padding

padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있다.

box-sizing 속성으로 이를 컨트롤 할 수 있다.

box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 값만 늘릴 수 있다.

 

 

[부스트코스 관련 강의 링크]

Element가 배치되는 방법(CSS layout) - https://www.edwith.org/boostcourse-web/lecture/16677/