Layout with CSS

HTML만으로 layout 작성 시 정형화 된 form으로만 가능함. CSS의 layout tag를 사용함으로써 다양한 형태의 layout을 구현 가능함.

해당 편에서는 많은 레이아웃 property 중 position 관련 주요 property를 알아보겠습니다.

Position

• static
  해당 element는 position property의 기본값으로 따로 위치가 지정된 것이 아니라고 표현함. 아래와 같이 표기함

.first_square {
	position : static;
    }

해당 output과 같이 첫번째 box와 두번째 box가 기본적으로 나열된 것을 확인 할 수 있음. 두번째 box는 relative element로 right, left, top, bottom 등의 property와 함께 사용되지 않을 시 static element의 특성을 나타냄

• Relative
  top, bottom, left, right property와 함께 사용이 되며, 만약 해당 property들이 사용이 안될 경우 static element와 같이 나타남
  

static 예시에 나타난 2번째 box가 아무런 property를 적용하지 않았을 때의 위치이고, 다음과 같이 left : 30px;의 값을 줄 경우 기존의 자리에서 30px만큼 이동한 것을 보여 줌.

• absolute
  해당 element 경우는 가장 가까운 조상 element에 의해 상대적으로 위치가 지정됨. absolute가 지정된 엘리먼트가 기준으로 삼는 조상 element가 없으면(조상 문서 본문(document body)를 기준으로 삼는다.
  

윗 예시는 첫번째 box는 relative, 두번째 box는 absolute를 position property의 element로 지정한 경우이다. 위치 값은 right : 30px; top : 20px;로 지정하였고 첫번째 box를 기준으로 오른쪽으로 30px, 위로 부터 20px만큼 떨어진 것을 볼 수 있다.

• fixed
  해당 element는 viewport에 상대적으로 지정됨. 페이지가 스크롤 되더라도 움직이지 않고 고정되어 나타냄. 다른 상대적 element와 마찬가지로 right, left, top, bottom property와 함께 사용 됨
  

해당 예시를 보면 두번째 box에 fixed를 적용하여 위치 값을 적용하였다. 화면 전체에서 위치 값이 적용된 것을 확인 할 수 있다.

My opinion

position property가 상대적, 절대적으로 적용되는 것에 대해 기준이 중요하다는 것을 정리를 통해 알 수 있었다. 조상 element의 상태에 따라 해당 element의 위치가 달라 질 수 있다는 점에서 적용 시 주의 깊게 봐야 겠다고 생각했다.