TIL. 21 CSS - 레이아웃 속성

🎈 position 속성

문서 안의 텍스트나 이미지와 같은 요소를 원하는 위치로, 어떤 방식으로 배치할지 결정하는 속성이다.

• relative 기본 설정값에 대해 상대적이다.

  • 기본 설정값이 50px이라면, relative로 5px을 줬을 시 55px이 된다.

• absolute , 가장 가까운 부모, 조상 요소중 position의 relative 요소 기준으로 원하는 위치를 지정한다.

  • 만약 가까운 기준이 없다면 브라우저 기준의 절대값이 기준이 된다.

• fixed absolute와 비슷하나, 기준이 브라우저 창이다.

  • 현재 보이는 브라우저에서의 위치만 설정하며, 이를 통해 콘텐츠를 화면에 고정시킬 수 있다.(ex: 고정된 내비게이션바)

🎈 display 속성

• inline block 속성과 다르게 줄바꿈 없이 한 줄에 다른 요소들이 나란히 배치된다.(ex: span, a, em 태그)

  • width, height 속성을 지정해도 무시된다.
  • margin, padding 속성은 좌우 간격만 반영된다.

• block 줄바꿈이 들어가 여백없이 한 줄을 채우는 값이다.(ex: div, p, h1 태그)

• inline-block 기본적으로 inline처럼 나란히 배치된다.(ex: button, select 태그)

  • width, height, margin, padding 속성 지정이 가능하다.

🎈 float 속성

레이아웃 설계 실무에서 많이 사용하는 속성이며, 특정 요소를 기본적인 문서 배치에서 벗어날 수 있게 해준다.

• float 속성은 position 속성의 absolute 값과 양립할 수 없다.

  • none 비활성
  • left, right
  • initial 기본값으로 설정
  • inherit 부모 요소를 따라감

• 보통 컨테이너 안에 요소들이 있지만, float을 사용하면 요소들이 컨테이너를 벗어나는 문제점이 발생할 때가 있다.

  • clear 속성 left, right, both, none 값으로 텍스트가 사진 옆으로 붙지 않게 할 수 있지만, 구 브라우저에서는 지원하지 않기 때문에 추가적인 조치가 필요하다.
  • overflow 속성 auto 값을 지정하면, 벗어난 요소만큼 사이즈가 변경되고, hidden 값을 지정하면 벗어난 부분이 잘려서 보이지 않게 한다.