HTML, CSS - position, display, float

TIL 1. position

position property에 지정할 수 있는 속성값은 아래와 같다.
position: relative;
position: absolute;
position: fixed;

• position: relative;
  별도로 위치 지정을 하지 않는 한 position property의 default 값(static)과 동일하게 동작한다.
• position: absolute;
  위 속성을 가진 개체는 가장 가까이 있는 조상 요소 중 위치가 지정된 (즉, position: static;이 아닌) 조상 요소에 상대적으로 위치한다.

빨간색 박스의 가장 가까운 조상 요소는 초록색 박스이며, 초록색 박스의 가장 가까운 조상 요소는 노란색 박스다. 따라서 각 조상 요소가 어디에 있는지를 기준으로 위치한다.

만약 모든 조상 요소의 위치가 지정되어있지 않으면 body를 기준으로 위치한다.

참고) position: absolute; 속성값을 가진 개체는 block-element라고 해도 inline-element의 속성을 갖는다.

• position: fixed;
  위 속성은 개체를 뷰포트의 특정한 위치에 고정한다. 화면 스크롤과 상관 없이 일정한 위치에 고정해야 하는 navigation bar 등에 사용한다.

TIL 2. inline, inline-block, block

요소의 display 형태를 지정할 수 있는 속성값은 아래와 같다. display: inline;
display: inline-block;
display: block;

• display: inline;
  inline 요소는 요소 크기만큼만의 너비를 가진다. 태그로 구분을 하더라도 줄바꿈이 되지 않고 이전 태그 바로 옆에 위치한다. span은 대표적인 inline 요소다.
• display: inline-block;
  inline-block 요소는 inline 요소와 비슷하지만 너비와 높이를 지정할 수 있다. inline 요소를 감싸는 블럭 박스가 생성된다고 보면 된다.
• ‘display: block;’
  block 요소는 기본적으로 뷰포트만큼의 너비를 가진다. 한 줄을 전부 차지하기 때문에 태그 간 줄바꿈이 된다. div p는 대표적인 block 요소다.

참고) block 요소인 div 태그도 display 속성값을 inline으로 지정하면 inline 요소로 출력된다. inline 요소도 마찬가지

TIL 3. float

float: left;
float: right;

이 속성은 웹페이지 레이아웃을 짤 때 주로 사용한다. float 속성을 적용한 요소는 container의 왼쪽 혹은 오른쪽에 위치하며 텍스트가 있는 경우 float로 띄운 요소를 둘러싼다.

아래 예시처럼float로 띄운 요소가 그렇지 않은 요소에 겹쳐지면 clear 속성을 이용해서 해결한다.

clear 속성 적용 후

만약 이미지나 텍스트가 container 바깥으로 넘치는 경우엔 overflow: hidden 속성을 이용한다.

overflow: hidden 속성 적용 후

참고) float를 이용한 레이아웃 예제