1. position 속성

태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖는다.

  • static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.
  • absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있다.
  • relative: 원래 있던 위치를 기준으로 좌표를 지정한다.
  • fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한다.
  • inherit: 부모 태그의 속성값을 상속받는다.

좌표를 지정해주기 위해서는 left, right, top, bottom 속성과 함께 사용한다. position을 absolute나 fixed로 설정하면 가로 크기가 100%가 되는 block태그의 특징이 사라진다.

image.png

  1. display 속성

웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다.

  • inline

    전후 줄 바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 대표적으로 <span>, <a>, <em> 등이 있다.

    inline 엘리먼트를 사용할때 주의점은, width와 height 속성을 무시해도 된다는 점이다. 이유는 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어있어서이다. 또한 margin과 padding 속성은 좌우 간격만 반영되고 상하 간격은 반영되지 않는다.

  • block

    전후 줄바꿈이 들어가 다르 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다. 대표적으로 <div>, <p>, <h1> 등이 있다.

    block 엘리먼트는 width, height, margin, padding 속성이 모두 반영된다.

  • inline-block

    기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 하지만 상하좌우 간격 모두 지정이 가능해진다. <button>, <select> 등이 있다.

    이 엘리먼트는 display: inline-block로 지정해줘야 한다. 이 엘리먼트를 이용하면 여러개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다.

  1. float 속성

    원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.

image.png

  • inherit: 부모 요소에서 상속

  • left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.

  • right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.

  • none - 요소를 부유시키지 않음

left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외)
또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.

ref:

  1. https://ofcourse.kr/css-course/position-%EC%86%8D%EC%84%B1
  2. https://www.daleseo.com/css-display-inline-block/
  3. https://ofcourse.kr/css-course/float-%EC%86%8D%EC%84%B1