[웹] CSS Layout. Element 배치

 

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

기본적으로 엘리먼트들은 block인지 inline인지 정해져있습니다. 예를들어 <div>, <p>는 block방식이고 <span>, <a>, <strong>은 inline 방식입니다. 

block은 말 그대로 벽돌을 쌓듯 아래로 띄워지면서 써지고 inline은 책처럼 쭉쭉 옆으로 글이 써져나가고 최대길이에 도달하면 한줄이 띄워져서 이어써져갑니다.

그러나 이렇게 기존에 정해져있는 방식을 css에 display속성을 설정하여 inline방식을 block방식으로도 변경해줄 수 있습니다.

---

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

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

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

 

1. position 속성으로 특별한 배치를 할 수 있습니다.

position 속성은 기본 static입니다.

그냥 순서대로 배치됩니다.

 

2. absolute는 기준점에 따라서 특별한 위치에 위치합니다.

top / left / right / bottom 으로 설정합니다.

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

(밑의 예시코드를 보면 absoulte에서 상위 엘리먼트중 가장 가까운 static이 아닌 position을 갖고있는것은

<div class = "wrap">입니다. css속성을 보면 relative입니다. 그럼 이것을 기준으로 위치가정해지는데 fixed는 특수한 경우이므로 이것은 <div class = "wrap">안의 범위에 들어가져 있지 않다고 생각하면 편합니다.

 

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

top / left / right / bottom로 설정합니다.

 

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

예를들어, 네모난 박스 광고를 생각하면됩니다. 스크롤을 내려도 항상 그자리에 위치하는..

code 바로가기

 

 

 

---

 

이밖에도 다음과 같은것들이 있습니다.

(float:left) + Clear

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

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

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

code 바로가기

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

추가 : http://blog.naver.com/PostView.nhn?blogId=iyakiggun&logNo=100165916259

CSS float 속성 마스터하기

https://aboooks.tistory.com/79

[html/css] clear 속성에 대해 배워 보자 (clear:none, right, left, both)

 

 

(box-model)

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

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

code 바로가기

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

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

엘리먼트의 크기

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

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

box-sizing과 padding

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

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

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

code 바로가기

---

margin과 border, padding은 위와 같습니다.

margin은 바깥테두리간격(border밖 테두리) , border는 테두리 굵기 및 선, padding은 내용물과(contents) border간의 간격이라고 보면됩니다. 

---

출처 : https://www.edwith.org/boostcourse-web/lecture/16677/

[LECTURE] 5) Element가 배치되는 방법(CSS layout) : edwith