[Wecode] position 속성(relative, absolute, fixed) 와 display 속성(inline, inline-block, block) 에 대해서

Position

• css에서 요소를 배치하는 방법을 지정하는 속성이다.

• 모든 속성값은 어디를 기준으로 하는가에 초점을 맞춘다.
  그 기준에 맞춰 left, right, top, bottom 에 원하는 값을 주어서 요소를 배치한다.

Static : 아무런 position도 설정하지 않았을때 기본값으로 수어지는 속성값이다.
일반적인 코드 흐름 처럼 작성한 코드 순대로 배치 되어진다.

Relative : 요소의 현재 위치 즉, 자기 자신을 기준으로 요소를 배치할수있는 속성값이다.

Absolute : 자신의 부모요소 또는 가장 근접한 상위 요소를 기준으로 요소를 배치할수있는 속성값이다. 만일 상위 요소 중 static이 아닌 요소가 없다면 자연스럽게 [body] 가 배치 기준이 되어진다.

Fixed : 현재 보고 있는 웹페이지 전체를 기준으로 움직이는 속성값이다. 즉 어떤 콘테이너에 속하지 않고 좌측 상단 끝을 기준으로(전체 페이지, 페이지 자체를 기준) 요소를 배치할수있는 속성값이다. 보통 화면을 스크롤 하여도 움직이지 않는 상단바, 하단바 등을 구현할때 많이 사용한다.

Display

• Display는 요소를 어떻게 보여줄지를 결정하는 속성이다.

Block : 대표적으로 div, p, h, il 태그가 해당 된다.

• 한 영역을 차지하는 속성값으로 기본적으로 width 값이 100% 가 되기에 콘텐츠의 크기 와 별개로 한 줄을 모두 차지한다.

• 그렇기에 줄바꿈이 일어나는 특징을 가지고 있다. 또한 width, height, margin, padding 값을 지정할수있다.

inline : 대표적으로 span, b, i, a 태그 등이 해당 된다.

• 컨텐츠의 크키 만큼 영역을 차지하는 속성값으로 한줄에 다른 요소들과 나란히 배치 되어질수있다. 그렇기에 줄바꿈 현상은 일어나지 않는다.

• block 과는 달리 width, height 값을 조절 할수없고 (값을 주더라도 적용되지않음) margin, padding 값은 좌우 값만 반영되어지고 상하값은 시각적으로는 추가 되어지는것 처럼 보이지만 공간을 차지하진 않는다.

• 만약 크기를 조절하고 싶다면 display : inline-block을 사용하면 크기 조절이 가능하다.

Inline-block : inline의 특징과 block의 중간 정도애 있는 속성값이다.

• inline 처럼 줄바꿈이 이루어지지 않지만 block 처럼 width, height 조절이 가능하다.
• 만약 width 와 height 를 설정하지 않으면 inline 처럼 컨텐츠의 크기 만큼 영역을 차지 한다.