TIL 02. Layout

CSS의 속성인 position & display의 대표적인 값들을 이해함으로써, 페이지의 레이아웃을 보다 용이하게 잡을 수 있도록 한다.

CSS position 속성

CSS의 position 속성은 문서 상에서 정보들을 배치하는 방식을 지정한다. position 속성을 활용하면 각 요소에 margin값이나 padding값을 별도로 부여하지 않고도, 특정한 위치에 해당 요소를 배치시킬 수 있다.

• position: static;
  static은 단어 뜻 그대로, 별도의 위치 변동 없이 일반적인 문서의 흐름에 따라 배치되는 기본값이다.

• position: relative;
  relative 값이 부여된 요소는 자기자신을 기준으로 하며, top / bottom / right / left에 값에 따라 위치를 변경한다.
  
  위의 이미지를 보면, 요소에 relative 속성을 부여한 뒤 top & left 값을 통해 위치 이동을 시켰다. relative는 별도의 값을 부여하지 않는다면 static과 동일한 형태를 유지하므로, 위의 static 요소를 기본값으로 생각하면 된다. 또한 relative의 경우 이동값에 -를 붙이게 되면 해당 방향으로 이동하는 것을 명심!
  ex) top: -40;은 위쪽으로 40만큼 이동. 반대로 top: 40;은 아래쪽으로 40만큼 이동.

• position: absolute;
  위의 두 속성값과 달리, absolute 값은 바로 위의 부모 태그를 기준으로 하여 상대적으로 요소를 배치한다. 이 역시 top / bottom / left / right 값을 통해 위치를 조정한다.
  
  위의 이미지는 아래와 같은 html 코드로 만든 absolute 활용 사례이다. 여기서 컬러코드를 지닌 span 태그는 colorBox의 자식 태그로, position 속성 값으로 absolute를 가지고 있다. 그에 따라 colorBox를 기준으로 아래에서 10만큼 떨어진 위치 (bottom: 10px;)에 해당 태그가 자리하고 있는 것을 볼 수 있다.
  absolute 속성값의 경우에는 위치값만큼 해당 축(top / bottom / left / right)으로부터 떨어진다고 생각하면 쉽다. 즉, right에 값을 0으로 부여하면 우측으로 붙은 형태로 배치되게 되는 것!

<div class="container">
	<div class="outerBox">
		<div class="colorBox">
			<span>#709fb0</span>
        </div>
    </div>
</div>

• position: fixed;
  속성값 fixed는 페이지가 스크롤되거나 사이즈가 변경되더라도 고정된 위치에 배치된다는 의미를 가지고 있다. 일반적인 사이트에서 header가 고정적인 위치를 가져 스크롤에 상관없이 움직이지 않는 것처럼!
  

CSS display 속성

CSS에서 display 속성은 각 요소들이 어떻게 보여지는지, 그리고 서로 어떻게 상호작용하여 배치되는지를 결정하는 속성이다.

• display: block;
  display 속성이 block으로 지정된 요소는 다른 요소들을 줄바꿈시켜 한 줄을 차지하게 된다. 대표적인 block 요소로는 div p header 등이 있다. 다수의 block 요소들을 나열하게 되면, 각각의 요소에서 줄바꿈이 일어나 세로로 정렬되어보이는 형태로 배치되게 된다.
  또한 block 속성을 가진 요소에는 width, height 값을 지정할 수 있으며, 그에 따른 padding과 margin 값 역시 부여 가능하다.

• display: inline;
  display 속성이 inline으로 지정된 요소는 컨텐츠의 크기만큼 공간을 차지하며, 다른 요소와 줄바꿈 없이 페이지에 맞게 배열된다. 대표적인 inline 요소로는 span a 등이 있다.
  inline 속성을 가진 요소는 컨텐츠의 크기만큼 공간을 차지하기 때문에 width와 height를 부여하더라도 무시하게 된다.

• display: inline-block;
  display 속성이 inline-block으로 되어 있는 요소는 block과 inline의 특징을 모두 가지게 된다. 기본적으로는 inline 요소처럼 컨텐츠의 크기만큼 공간을 차지하고 다른 요소들과 줄바꿈 없이 배치되지만, block 요소처럼 width와 height, 그리고 margin과 padding을 자유롭게 부여할 수 있다는 특징이 있다.

이론만으로 완벽하게 이해하기는 어려우니, 여러가지 실제 상황에서 다양한 속성을 활용해보며 효율적인 방식 찾기!