CSS layout

엘리먼트가 배치되는 방식

이때 엘리먼트는 html태그들이다. div나 span등이 어떻게 배치되는지 볼 것이다.
엘리먼트를 화면에 배치하는 것을 layout 작업 또는, Rendering 과정이라고도 하는데 우리는 배치라고 한다.
기본 엘리먼트는 위에서 아래로 블록을 이루면서 배치된다.
하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용한다.
중요하게 이해해야 할 속성은 다음과 같다.

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

box model

display

block

• display속성이 block이거나 inline-block인 경우 그 엘리먼트는 블록을 가지고 쌓인다.
• 즉 위에서 아래로 쌓이듯이 채워지고, 높이값을 주면 더 높은 크기로 엘리먼트가 쌓인다.
• 기본 속성이 block인 div나 p와 같은 태그에 display: inline;값을 주면 inline속성으로 적용가능하다.

inline

• 옆으로 흐르는 엘리먼트(display:inline)
• display속성이 inline인 경우는 우측으로, 그리고 아래쪽으로 빈자리를 차지하며 흐른다.
• 참고로 inline속성의 엘리먼트는 높이와 넓이를 지정해도 반영되지 않는다.
• inline속성에는 span, a, strong태그등이 있는데 이들은 좌에서 우로 흐른다.

position

• 좀 다르게 배치시키기(특별한 배치 가능)
• 엘리먼트 배치가 순서대로만 위아래로 또는 좌우로 흐르면서 쌓이기만 하면, 다양한 배치를 하기 어렵다.
• position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월합니다.

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

• position 속성은 기본 static이다.
• static은 그냥 순서대로 배치된다.

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

• top / left / right / bottom 으로 설정한다.

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

• relative와 같은 속성을 현재 위치에서부터 위로 찾아간다.

  
  
  
  
  

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

• top / left / right / bottom로 설정한다.

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

• 스크롤할때마다 따라다니지 않고 고정되어 있는 광고같은 것을 의미한다.
  
  
  
  
  

margin

• 간격을 다르게 해서 배치하기 (margin: 10px)
• margin으로 배치가 달라질 수 있다. margin은 위/아래/좌/우 엘리먼트와 본인간의 간격이다. 따라서 그 간격만큼 내 위치가 달라진다.

float

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

float 자리침범

float을 사용하게 되면 float밑의 블럭이 float이 떠있는 것으로 인식하고 float의 자리를 침범하므로 밑의 블럭에 clear: left;을 써준다.
clear는 네 위의 있는 float과 같은 것을 인식하라고 하여 올라가지 않게 해준다.
clear:left는 float:left;를 인식하라는 것이고,
clear:both는 float:left와 float:right를 둘다 인식해서 올라가지 말라는 뜻이다.

float 자식 인식

자식이 float인 경우 자기의 자식으로 생각하지 않는다.
둥 떠있기 때문에 float속성을 자식으로 인정을 하지 않아 높이값으로 생각하지 않는다.
이런경우 부모에게 overflow라는 속성을 주어서 부모가 float을 인식하게 할 수 있다.
overflow: auto;

보충하려면 다음 사이트를 참고하는 것이 좋겠다.

링크텍스트

box-model

• 하나의 블록엘리먼트는 box형태이다.
• 블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정한다.
• margin, padding, border, outline으로 생성되는 것이다.

엘리먼트의 크기

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

box-sizing과 padding

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

.box-content{
	box-sizing: content-box; //padding값을 늘리면 박스크기도 늘어남
}

.box-boder{
	box-sizing: box-border; //padding값을 늘려도 박스크기는 유지됨
}