TIL 5. 레이아웃의 모든 것

CSS 레이아웃의 모든 것을 알아보자.

📝 position 속성

• position은 HTML에서 element를 배치하는 방법을 지정하는 속성이다.

relative

• 자기자신을 기준으로 상대적 위치를 잡으며(부모) 해당 오프셋은 다른 요소에 영향을 주지 않는다. 요소에 특별한 속성을 부여하지 않는다면 static과 동일하게 작용한다. margin:auto가 사용이 가능한 position 속성이다.

absolute

• 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점(자식)을 제외하면 fixed와 비슷하게 동작하며, 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 document body를 기준으로 삼고, 페이지 스크롤에 따라 움직인다.

fixed

• 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻으로 relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다.

📝 inline, inline-block, block에 대해서

• display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티이다.
  모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있고
  그 기본 표시값으로는 block이나 inline으로 이루어져있다.

inline

• 대표적인 태그로는 span, a 태그가 있다.
  해당 속성값으로 지정되면 앞뒤 줄바꿈없이 요소들이 나란히 배치된다.
  크기변경 태그가 사용불가하며 비슷한 맥략으로 margin과 paading은
  좌우간격은 조절가능하나, 상하조절은 무시된다

inline-block

• 대표적인 태그로는 selcet, button 태그가 있다.
  inline과 block의 성질이 합쳐진 속성.
  앞뒤 줄바꿈없이 있는 태그의 크기변경, 여백변경이 가능하다.

block

• 대표적인 태그로는 div, p 태그가 있으며,
  block은 브라우저의 가로폭을 전체를 차지하기에 줄바꿈없는 inline과 달리 아래로 떨어지는 특징이 있고 상하좌우 여백 변경, 크기변경이 자유롭다.

📝 float에 대해서

• 요소가 띄워지게 만드는 태그이다.
  float 속성이 지정되면 이름의 뜻과 동일하게 공간은 차지하지만 다른요소 배치에 영향을 주지 않게 되며 left,right로 좌우설정, inherit로 상위요소에서 상속, none으로 지우기 등이 가능하다

  ---