HTML & CSS - Layout

HTML & CSS의 레이아웃 기능 탐구

position(relative, absolute, fixed), inline, inline-block, block, float 등에 관해서..**

1. position:

• static
  - HTML 요소는 기본값으로 정적인 위치를 부여받는다.
  - Static 기능으로 위치가 설정되면, top, bottom, left, right 프로퍼티에 영향을 받지 않는다.
  - position: static; 은 특별한 방법이 가미된 포지셔닝 기법이 아니며, 페이지의 각 요소별 배치 흐름에 따라 그 위치가 정해진다.
  

• relative
  - 기본 포지션에 상응하여 "position: relative"를 받은 요소의 위치가 결정된다.
  - top, right, bottom, left의 프로퍼티를 따로 설정하게 되면 정상적인 위치에서 벗어나지게 된다. 이렇게 될 시, 다른 컨텐츠 들은 해당 요소가 야기한 빈칸에 들어갈 수 없게 되는 성질을 띈다.

• fixed
  - "position;fixed;"는 viewport에 상응하여 위치하게 되며 이는 페이지를 스크롤 업, 다운하더라도 같은 위치에 계속 머무른 다는 것을 의미한다.
  - 해당 요소의 위치를 지정하기 위해 Top, right, bottom, left 프로퍼티를 설정해야 한다.
  - fixed 된 요소는 페이지 안에서 빈칸이 없이 꽉채운다. fixed되지 않았다면 다른 요소의 해당 위치 개입이 가능하다.
  

• absolute
  - "position: absolute"은 앞서 작성된 가장 가까운 요소에 상응하여 위치하게 된다 (fixed에서, viewport의 기능에 따라 상대적으로 위치가 정해진 것 과 다른 형태)
  - 하지만 만약 "position: absolute"로 정해진 요소에게, 위치가 정해진 조상요소가(ancestor) 없다면, 문서 body를 기준점으로 삼고 페이지를 위아래 스크롤링할 때 같이 따라 움직이게 된다. *여기서 언급한"위치가 정해진"은 static을 제외한 모든 요소를 의미한다.

<코드예시>

####[HTML FILE]####

<link rel="stylesheet" href="style.css">

<secion>static</br>

<span>span1</span>
<span>span2</span>
<span>span3</span>
<div>div1</div>

<br>relative</br>

<span class="top">top</span>
<span class="right">right</span>
<span class="bottom">bottom</span>
<div class="left">left</div>

<br>absolute</br>

<div>
    <div id="absolute">absolute</div>
  </div>
  <div id="parent">
    <div id="child">children</div>
  </div>

<br>fixed</br>

<div>
    <div id="fixed">fixed</div>
</div>

####[CSS FILE]####

br {
    font-size: 50px;
}

span, div {
    background: skyblue;
  }

  span, div {
    background: skyblue;
  }
  
  .top {
    position: relative;
    top: 5px;
    z-index: 1;
  }
  
  .right {
    position: relative;
    right: 5px;
  }
  
  .bottom {
    position: relative;
    bottom: 5px;
  }
  
  .left {
    position: relative;
    left: 5px;
  }

  #absolute {
    background: skyblue;
    position: absolute;
    right: 0;
  }
  
  #parent {
    position: relative;
    width: 100px;
    height: 100px;
    background: skyblue;
  }
  
  #child {
    position: absolute;
    right: 0;
  }

  #fixed {
    background: skyblue;
    position: fixed;
    right: 20;
  }

---

2. inline: 특정 문장의 모양을 방해하지 않고 한 문장, 문단안에 텍스트를 상자로 감쌀 수 있다.

3. block: 특정 문장을 한데 묶어서 블록화 한다. 블록화시 다음 공간에 대한 line-breaking 이 이루어져 선행 후행 요소들이 가로로 디스플레이 되는 특징을 지닌다.

4. inline-block: 위 display:inline과 비교해서 inline-block의 가장 큰 차이점은 내부 요소에 가로 세로 값을 세팅 할 수 있다는 점이다. 그리고 display: block과 비교할 시, inline-block은 각 요소 이후에 line-break(미리 줄바꿈)을 하지 않는다는 점이다. 따라서 각기 다른 요소가 서로의 좌우에 자리할 수 있다.

<코드예시>

---

5. float:

• "float" 은 한 요소가 정상 흐름에서 벗어나서 본래의 "뜨다"라는 의미를 지닌 문자인 만큼 웹페이지에서 이미지를 띄워 텍스트와 함께 배치하는 속성이다.
• 만일 해당 요소 이후에 clear 속성이 있으면 페이지 흐름이 달라진다.
• float은 원래 이미지와 텍스트 배치 용도로 등장했지만 레이아웃용으로 사용된다.
• 하지만 요즘은 다른 display 기법인 (편의성의 이유로) flex 기능을 더 많이 사용하는 추세이다.