레이아웃

김예랑·2021년 6월 8일

포지션 속성은 요소의 위치를 top, bottom, left, right 값과 함께 지정한다.

relative: 문서의 흐름상 원래 있어야 할 위치를 기준으로 이동, 위치.

absolute: 가장 가까운 부모 요소를 기준으로 위치. 부모에 relative 필요.

fixed: 브라우저 창 기준으로 고정된 위치.

inline: 줄바꿈 없음, 콘텐츠의 크기만큼 너비 차지, 너비와 높이 설정 불가

block: 전 요소에서 줄바꿈하여 위치, 화면 너비의 100% 차지, 너비와 높이 설정 가능

inline-blok: inline과 block의 성질을 둘다 가짐. 한줄로 나열되지만 너비와 높이 설정이 가능

float은 특정 요소를 떠있게, 부유하게, 흐르게 하는 속성이다. 특정 요소를 기본적인 문서의 배치에 흐름에서 벗어나게 함으로써 화면 배치를 자연스럽게 할 수 있다.

하지만 float된 요소는 문서의 흐름상에서 벗어나 있기 때문에 레이아웃을 무너뜨리기도 한다.

이 문제를 해결하기 위해 대표적으로 clearfix라는 기법을 쓴다.

근데 아직 float에 대해서는 잘 이해가 안가므로 추후에 수정해야겠다.

안녕하세요. 백엔드 애송이 백송이 김예랑 입니다.