드림코딩 by 엘리_CSS 레이아웃 정리 display, position 완성

---

CSS 레이아웃 정리 display, position

---

 

웹사이트를 만들때 가장 중요한것은?

우리가 잘 정리한 박스들을 원하는 위치에 그리고 원하는 사이즈로 배치할 수 있는것이 가장 중요하다.

이것들을 하기위해서는 CSS의 display와 position에 대해서 아는 것이 중요하다.

 

Display : 기본값은 CSS를 통해서 변경 가능 

display CSS 속성은 요소가 블록 또는 인라인 요소로 처리되는지 여부와

flow layout, grid 또는 flex와 같은 자식에 사용되는 레이아웃을 설정한다.

공식적으로 display 속성은 요소의 내부 및 외부 표시 유형을 설정한다.

외부 유형은 flow layout에서 요소의 참여를 설정한다.

내부 유형은 자식의 레이아웃을 설정한다.

 

 

display

 - display: inline-block 으로 변경 시 inline level이 되고, 한 줄에 여러개를 넣는데 block 단위로 즉 상자로 변환 되어서 안의 content의 크기와는 상관없이 CSS에서 지정한 사이즈에 의해서 표기가 된다.

 - display: inline 으로 변경 시 inline level이 되고, 이는 content 자체만을 꾸며준다. 즉 content가 없으면 표시되지 않는다.

 - display: block 으로 변경 시 상자긴 상자인데 한 줄에 하나 표기된다.

 - 정리하면 inline은 물건, inline-block은 상자인데 한 줄에 여러개가 진열될 수 있는 특별한 상자, block은 상자인데 한 줄당 하나씩 들어가는 상자

 

block 요소는 블록 요소 상자를 생성하여 일반 흐름에 있을 때 요소 앞뒤에 줄 바꿈을 생성한다.

inline 요소는 앞이나 뒤에 줄 바꿈을 생성하지 않는 하나 이상의 인라인 요소 상자를 생성한다.

정상적인 흐름에서 공백이 있는 경우 다음 요소는 같은 줄에 있다.

 

position

position CSS 속성은 문서에서 요소가 배치되는 방식을 설정한다.

top, right, bottom, left 속성은 배치된 요소의 최종 위치를 결정한다.

 

position: static 을 default 값으로 갖는다.

이 static은 HTML에 정의된 순서대로 브라우저상에 자연스럽게 보여지는것을 의미한다.

요소는 문서의 정상적인 흐름에 따라 배치된다.

top, right, bottom, left, and z-index 속성은 효과가 없다.

 

 

postition: relative 설정 시 .box가 원래 있어야 하는 자리에서 상대적으로 이동한것이 확인 가능하다.

요소는 문서의 일반적인 흐름에 따라 배치된 다음 top, right, bottom, left 값을 기반으로 자체적으로 오프셋된다.

(여기서 상대적으로 이동한것을 오프셋 된다 라고 한다.)

오프셋은 다른 요소의 위치에 영향을 주지 않는다.

따라서 page layout의 요소에 제공된 공간은 위치가 정적인 경우와 동일하다.

이 값은 z-index 값이 auto가 아닐 때 새로운 stacking context을 생성한다.

 

 

position: absolute 설정 시 내 아이템이 담겨있는 내 아이템과 가장 가까이에 있는 박스 안에서 위치변경을 일어난다.

요소가 일반 문서 흐름에서 제거되고 page layout에서 요소를 위한 공간이 생성되지 않는다.

가장 가까운 위치에 있는 조상을 기준으로 위치가 지정된다(조상이 있는 경우).

그렇지 않으면 초기 포함 블록을 기준으로 배치된다.

최종 위치는 top, right, bottom, left의 값에 의해 결정된다.

이 값은 z-index 값이 auto가 아닐 때 새로운  stacking context를 생성한다.

absolutely positioned boxes의 여백은 다른 여백과 함께 축소되지 않는다.

 

 

position: fixed 설정 시 상자안에서 완전히 벗어나서 window안에서 즉 페이지 상에서 움직이는 것이다.

요소가 일반 문서 흐름에서 제거되고 page layput에서 요소를 위한 공간이 생성되지 않는다.

viewport에 의해 설정된 초기 포함 블록에 상대적으로 위치한다.

이 값은 항상 새로운 stacking context를 생성한다.

In printed documents 요소는 모든 페이지의 동일한 위치에 배치됩니다.

 

 

position: sticky 설정 시 원래 있던 그 자리에 있는데, 이것을 scrolling 되어도 없어지지 않고 원래 있던 자리에 그대로 붙어있는것을 의미한다.

요소는 문서의 일반적인 흐름에 따라 배치된 다음 top, right, bottom, left 값을 기반으로 가장 가까운 scrolling 조상 및 포함 블록(가장 가까운 블록 수준 조상)을 기준으로 오프셋된다.

오프셋은 다른 요소의 위치에 영향을 주지 않는다.

 

즉 relative는 원래 아이템이 있어야 하는곳에 자리에서 상대적으로 옴겨간 반면에 absolute는 아이템이 담겨 있는 상자안에서 옴겨간것을 볼 수 있다. 

 

정리하면 position은 default값은 static이고,

relative를 쓰면 원래 있어야되는 자리에서 변경이 되고,

absolute를 쓰면 가까이에 있는 상자에서 위치변경이 일어나고,

fixed를 쓰면 상자에서 벗어나서 페이지상에서 포지션이 지정이되며,

sticky는 원래 있어야 되는 자리에 있는데 scrolling하면 변하지 않고 있던 자리에 붙어 있는것이다.

 

예전에는 jQuery나 Bootstrap 같은 라이브러리를 많이 사용했었는데, 이제는 CSS와 자바스크립트의 발달로 많이 사용하고 있지 않는다.

CSS의 새로운 기능을 쓸때는 항상 모든 브라우저에서 호환이 되는지 호환성 여부를 검사한다.

호환성을 확인하는 사이트 : https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc