4. Element가 배치되는 방법

 [ 엘리먼트가 배치되는 방식 ]

 

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

 

1. display : block, inline

 

1) display:block

 

위 아래로 쌓아짐 . 

 

2) display:inline

 

우측으로, 그리고 아래쪽으로 빈자리를 차지하며 흐름. 높이와 넓이를 지정해도 반영이 되지 않음.

 

2. position : static, relative, absolute

  

1) position

 

 position 속성은 기본 static임. 그냥 순서대로 배치됨. 

 

2)  absolute

 

기준점에 따라서 특별한 위치에 위치함. top / left / right / bottom 으로 설정.

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

예를들어 , 자신의 상위 클래스가 relative > static 순서로 있는 경우 static 이 아닌 relative를 기준점으로 삼음.

 

* top, left 값을 (0,0) 이라도 주는게 좋음. 또한 상위 요소를 relative로 쓰는게 좋음. 

 

 

위와 같은 경우, absolute는 static(default) 가 아닌 .wrap { position : relative; } 를 따라감.

 

3)  relative

 

원래 자신이 위치해야 할 곳을 기준으로 이동.

top / left / right / bottom로 설정.

 

4) fixed

 

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

 

3. float

 

float는 블록상태의 객체를 정렬할때 많이 사용하는 속성. 블록상태의 객체는 한자리를 혼자 다 차지 하기 때문에 다른 객체와 나란히 놓을 수 없음. 그럴때 사용하는 속성 중 하나가 float.

 

블록요소인 div 태그는 한자리를 다 차지함

 

다른 요소와 나란히 놓기 위해 float를 줌. 그러면 div의 가로값은 최소 크기로 변경되고, float 상태가 된 div의 크기가 줄면서 빈공간이 생기고 그 빈공간에 뒤에 있던 오렌지 div가 올라오게 됨.

 

그럼 이렇게 2개의 요소가 같은 라인에 놓여지게 된다. (green div만 float 된 상태)

 

두 개의 div에 모두 float를 주면 최소 크기로 변경되면서 빈공간이 생기고 그 뒤에 또 다른 객체가 따라 올라오게 됨.

 

그 . 런 . 데 . 

 

div에 float 속성을 주면 문제가 발생함. float는 말 그대로 요소가 둥둥 떠 있는 상태임. 앞에 요소가 떠 있기 때문에, 그 다음에 있는 요소가 그 자리가 비었다고 생각하고 그 자리로 올라오게 됨. 

이런 식으로.

이걸 해결해주는 방법은 

 

가상요소 ::after 을 사용하면 됨.

 

부모요소에게 ::after를 사용하며 가상요소를 만들어 줌. 그리고 가상요소에게 display:block 요소를 적용해 한 줄 가득차게 함. 그리고 빈 콘텐츠를 넣어주고, clear를 적용시켜줌. 부모 뒤에 보이지 않는 가상요소를 만들어 뒤에 요소가 위로 따라 올라가지 않게 해줌.

div.clearfixed::after{display:block;content:"";clear:both}
     div.box1, div.box2{float: left}

 

 

---

 

참고 사이트 

 

https://ddorang-d.tistory.com/12