[HTML / CSS] 레이아웃의 모든 것

1. position

relative

부모 Element 지정 값. relative 박스의 위치를 아주 약간씩 top이나 right, bottom, left로 조정하고 싶을 때 사용하는 효과. 처음 놓인 위치(static: 기본 값)에서 상하좌우로 움직인다.

absolute

relative(부모 Element)를 기본 값으로 잡고 상하좌우(top, bottom, left, right) 값의 설정을 통해 위치 이동을 하는 자식 Element를 말함.
만약 relative(부모 Element)가 없는 경우엔, 본문인 문서 본문 body 를 부모 Element로 기본값을 잡는다.

fixed

위치 고정 Element. 초기에 위치한 자리 그대로 레이아웃 상에서 그려진 위치에서 고정된다. 상하좌우(top, bottom, left, right) 값을 설정하여 통해 원하는 위치를 재설정해준다. 위치를 재설정해줬을시 부모 Element에 지정했던 모든 레이아웃을 무시하고 초기값을 기준으로 변경되기 때문에 조심해야 한다.

2. inline, inline-block, block 이란 무엇인가?

block

Element가 크기와 상관 없이 바로 옆에 다른 element가 위치하는 것을 허용하지 않는다. 폭, 높이가 존재하기에, 높이와 넓이를 지정할 수 있다.

inline

컨텐츠의 길이만큼 존재하는 display. 폭, 높이가 존재하지 않으며 오로지 content의 크기에 따라 차지하는 범위가 결정된다.
inline 요소를 가진 box에 margin을 적용한다면, 좌/우의 속성 값 밖에 적용할 수 없다. 왜냐하면 inline 요소를 가진 box는 높이와 너비를 가질 수 없기 때문이다.

inline-block

Element가 크기와 상관 없이 바로 옆에 다른 element가 붙을 수 있도록 하면서(inline 속성), 폭과 높이 역시 존재(block 속성)한다.
inline-block은 해당 element를 inline으로 인식하되, block 속성처럼 높이와 폭도 존재할 수 있도록 만든다.

하지만 inline-block의 속성은 정해진 속성이 없고, 기본값이 주어지며(다시 재설정해야한다.) 특히 반응형 웹페이지에 작동되지 않는 큰 단점이 있다.

3. float에 대해서

한 요소(element)가 일반적인 레이아웃 흐름(Normal Layout Flow)로부터 빠져 텍스트 및 inline 요소가 주위를 감싸는 container의 좌우측을 따라 배치되어야 함을 지정한다. MDN : css-float 페이지 참고

1. 일반적인 레이아웃 흐름 Normal Layout Flow

HTML에서 마크업한 순서대로 위에서부터 아래 방향으로 나열되는 흐름을 의미한다.

<h1>일반적인 레이아웃의 흐름</h1>
<h3>마크업한 순서대로 나열됩니다.</h3>
<span>html이 기본적으로 화면에 렌더링하는 것을 말하죠</span>코드를 입력하세요

2. 플로팅 레이아웃 Floating Layout

레이아웃 설계하는 과정에서 많이 사용하는 속성이다. 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성. 즉, float 속성을 사용하여 좌/우로 "부유" 시키는 레이아웃 기법이다. float 요소를 사용하면 텍스트의 흐름과 관계없이 화면 배치를 유연하게 할 수 있다.

html

<h1>플로팅 레이아웃의 흐름</h1>
  <h3>float 요소를 사용하면 텍스트의 일반적인 흐름과는 관계 없이 배치할 수 있습니다.</h3>
  <div class="container">
    <div class="float-left">
      <ul>
        <li>왼쪽으로 플로팅</li>
        <li>왼쪽으로 플로팅</li>
        <li>왼쪽으로 플로팅</li>
      </ul>
    </div>
    <div class="float-right">
      <ol>
        <li>오른쪽으로 플로팅</li>
        <li>오른쪽으로 플로팅</li>
        <li>오른쪽으로 플로팅</li>
      </ol>
    </div>
  </div>

css

* {
      box-sizing: border-box;
    }
    body {
      Background-color:green;
    }
    .container {
      border: 1px solid black;
    }
    .float-left {
        float: left;
    }
    .float-right {
       overflow: hidden; 
    }

중요한 사실은 float된 요소는 그 요소의 종류에 상관없이 block 속성으로 변한다는 것이다. 다시 말해, float된 요소는 display : inline-block 으로 선언한 것과 동일하다.

3. float을 해제하는 방법
float 요소를 적용한 element는 기본적인 문서 흐름에서 벗어난 상태이기 때문에 기본적인 레이아웃을 무시하는 현상이 일어날 수도 있다. 때문에, float에서 영향을 받지 않도록 만들 방법이 필요하다.

float을 해제하는 방법 1 : clearfix, clear

clear 의 value 속성값
1. left : 왼쪽에 floating 된 요소를 지정 해제
2. right : 오른쪽에 floating 된 요소를 지정 해제
3. both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
4. none : 기본값(default), floating 을 해제하지 않음

float을 해제하는 방법 2 : 부모 div 박스에 overflow 적용하기

overflow: hidden;