TIL02, CSS: 박스 포지셔닝*

니콜라스형이 알려준 플렉스만 열심히 사용할 줄 알았지, 수작업으로 일일이 하는 방법은 잘 모르고 있다는 걸 깨달았다. 귀차니즘과 스트레스를 이겨니면서 박스를 이리저리 옮기다 보니, 플렉스가 얼마나 일을 간편하게 만들어주는지 배웠다. 플렉스 만든사람 땡큐 🙏

Box Positioning

각 요소를 원하는 곳에 위치시키기 위해서 position 속성 이용한다. 포지션의 종류는 4가지, static, relative, absolute, fixed 가 있다. static 포지션은 아무런 기능을 하지 않는 기본 속성이므로 설명은 생략한다.

1. position: relative;

현재의 위치를 기준으로 주어진 top, bottom, left, right 에 따라 요소를 이동시킨다. 위치 값이 주어지지 않으면 아무일도 일어나지 않는다. 예로,

<div class="redBox"></div>
<div class="blueBox"></div>

.redBox {
  width: 100px;
  height: 100px;
  background-color: red;
}

.blueBox {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  top: 200px;
}

다음과 같은 결과 값을 받는다.

파란색 박스가 기존의 위치(빨간 박스 아래)를 기준으로 200px 떨어져서 위치한다.

position: relative는 요소를 normal flow에서 제거하지 않는다. 즉, 파란 박스의 위치는 보이기에는 떨어져있지만, 실제적 위치는 빨간 박스 아래이다. 이는 파란 박스 아래에 초록 박스를 추가하는 것으로 확인할 수 있다.

<div class="redBox"></div>
<div class="blueBox"></div>
<div class="greenBox"></div>

다음과 같은 결과를 얻는데,

초록색 박스가 파란색 박스 위에 생성된 걸 확인할 수 있다. 화면 나타나는 것은 파란 박스가 초록 박스 아래 위치 하는 것이지만, 코드상으로는 파란 박스의 위치는 빨간 박스와 초록 박스 사이에 이다.

2. position: absolute;

가장 가까운, relative, fixed, 혹은 absolute 값을 가진 조상을 기준으로 요소를 이동시킨다. 만약 그러한 조상이 없다면 html태그를 기준으로 이동시킨다. 예로,

<div class="redBox">
  <div class="blueBox"></div>
</div>

.redBox {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.blueBox {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  left: 100px;

다음과 같은 결과 값을 얻는다.

파란 박스가 가장 가까운, relative 속성을 가진, 부모(redbox)의 위치를 기준으로 왼쪽에서 100px 이동한것을 확인할 수 있다.

position: relative와는 다르게 absolute는 박스를 normal flow에서 벗어나게 한다. 즉, 파란색 박스의 고유위치가 사라지게 된다.

<div class="redBox"></div>
<div class="blueBox"></div>
<div class="greenBox"></div>

.redBox {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}
.blueBox {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
}
.greenBox {
  width: 200px;
  height: 200px;
  background-color: green;
}

위와 같이 초록색 박스를 파란색 박스 아래에 추가하면 다음과 같이 위치된다.

초록색 박스가 파란색 박스의 위치를 무시하고 원래 파란색 박스의 위치에 생성된 걸 볼 수 있다. 달리 말하면, 파란 박스는 지금 위치가 없이 둥둥 떠다니는 상태인 것이다.

3. position: fixed;

박스를 스크린 일정부분에 고정시킨다. 예로,

<div class="redBox"></div>

.redBox {
  width: 100px;
  height: 100px;
  background-color: red;
  position: fixed;
  top: 100px;
}

위의 코드는 빨간색 박스를 위에서 100px 위치에 고정시킨다. 페이지 스크롤을 내려도 항상 같은 위치에 고정된다. 그러면 당연하게도 박스를 normal flow에서 벗어나게 한다.

---

Box Display

1. display: inline

박스가 크기를 가지지 않고, 포함된 텍스트 만큼만의 크기를 가진다. 또, 박스가 여러개 있을 경우 수평으로 나열된다.

<div class="inlineBox">연습 텍스트 입니다.</div>
<div class="inlineBox">연습 텍스트 입니다.</div>
<div class="inlineBox">연습 텍스트 입니다.</div>

.inlineBox {
  display: inline;
  background-color: yellow;
  height: 100px; /*height 속성은 무시된다.*/
}

다음과 같은 결과 값을 얻는다.

2. display: block

크기를 설정해줄수 있고, 기본적으로 한 라인 전체를 차지한다.

<div class="redBox"></div>
<div class="blueBox"></div>
<div class="greenBox"></div>

.redBox {
  height: 100px;
  background-color: red;
  display: block;
}

.blueBox {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: block;
}
.greenBox {
  width: 100px;
  height: 100px;
  background-color: green;
  display: block;
}

다음과 같은 결과 값을 가진다.

위와 같이 특정한 크기를 가질 수 있고, 너비에 상관없이 한라인 전체를 차지하기 때문에 다음 요소는 다음 줄에 나열된다.

3. display: inline-block

위의 두가지 특성을 모두 가진다. 크기를 설정해줄 수 있고, 다음 inline-block 요소들은 수평으로 나열된다.

<div class="redBox"></div>
<div class="blueBox"></div>
<div class="greenBox"></div>

.redBox {
  height: 50px;
  width: 50px;
  background-color: red;
  display: inline-block;
}

.blueBox {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
}
.greenBox {
  width: 70px;
  height: 70px;
  background-color: green;
  display: inline-block;
}

다음과 같은 결과 값을 가진다.

---

Float

요소를 현재위치를 혹은 부모 컨테이너를 기준으로 왼쪽, 오른쪽으로 이동시킨다. normal flow에서는 제거되지만, 텍스트나 inline 요소들은 플로팅하는 element와 겹치지 않는다.

<div class="floatingBox">{float: left;}</div>
<div class="textAround">테스트용 텍스트 입니다.</div>

.floatingBox {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
}

.textAround {
  background-color: blue;
  width: 300px;
  height: 300px;
}
    

다음과 같은 결과 값을 가진다.

---

HTML 하고 CSS 작성하는게 생각보다 훨씬 복잡하고 어려운 것 같다. 알면 알수록 더 많은 세부 기술들이 있고 고급 테크닉들이 있더라. 어떤 고인물은 CSS 스타일링 '만'으로 명암 표현이 완벽한, 마치 사진 같은, 그림을 그린 것도 있었다. 😐 그 사람은 분명 외계인 일거다.