CSS #3 position 이걸로 끝내자

모질라(position)의 설명에 따르면, position은 문서 상에 기록된 display:block에 대해서 top, right, bottom, left의 구체적인 위치를 지정해 주는 자리배치 속성이다.

1) position

• position : static
• position : relative
• position : absolute
• position : sticky

첫째, position : static

static은 div:container에서 초기에 설정된 div:item의 위치를 의미한다. 한마디로 top, right, bottom, left을 적용해도 그 어떤 영향을 미칠 수 없는 속성이다. 만약 해당 포지선을 선언한 상태에서 top에 어떠한 값을 주더라도 해당 div:item는 변하지 않는다. 심지어 z-index 도 적용되지 않는다.

둘째, position : relative

부모div[class='container'] 내에서 자신의 공간을 기억한다. 그러나 static과의 차이는 top, right, bottom, left의 적용을 받을 수 있다는 것이다. 그러나 부모 컨테이너 내에서 영역이 한정된다. 아래에서 살펴보자.

코드에서 볼 수 있는 것과 같이, 자신의 자리에서부터 부모태그 내에서 margin-top: 100px 만큼 이동되었기에 아래로 내려갔고, margin-left:100px 만큼 이동되었기에 오른쪽으로 100px 이동한 것을 볼 수 있다. 기준은 자신의 자리로부터이다. 그리고 z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성할 수 있게 된다.

셋째, position : absolote

absolote는 부모태그의 영역을 넘어간다. 백문이 불여일견 아래를 살펴보자.

.container div:nth-child(2) 가 있었던 본래 공간 자체를 이탈한다. 가출한 것과 같다. 그래서 부모는 가출한 아이가 있었던 서열을 없애버렸다. 그 결과 아래있던 .container div:nth-child(4) 가 .container div:nth-child(2, 3) 자리에 놓여졌다. 뿐만 아니다. CSS는 나중에 선언될수록 최상위 결과가 된다는 점에서 위의 코드를 보면 item3이 item2보다 앞에 와야 맞을 것이다. 그런데 위와 같은 결과를 보는 것은 z-index 때문이다.

• .container div:nth-child(2) {z-index:5}
• .container div:nth-child(3) {z-index:1}

z-index의 결과에 따라서 위와 같은 적용을 가능하게 했다. 그런데 여기서 주의할 것은 position : absolote는 document 문서 상에서 자신의 위치를 기록하기에 만약 스크롤이 발생되고 화면에서 보여지지 않는 영역에 놓여지게 되면, 이동해야만 볼 수 있다. 그러나 언제나 화면상의 고정된 위치에 있는 자리값을 부여하지는 못한다.

넷째, position : fixed

absolute에서 할 수 없었던 기능을 position : fixed을 통해서 적용시킬 수 있다. 모질라의 설명에 따르면, 페이지 레이아웃을 지정하는 것이 아니라 뷰포트, 즉 화면에 보여지는 것을 기준으로 삼는다.

• 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다고 하는데, 해당 속성들에 대해서 공부를 해야 이 말을 이해할 수 있을 것 같다. 이는 추후에 공부할 과제로 남겨놓자.

테스트의 상황에서 .container에 positons:absolute 가 적용되어 있는 상황에서는 해당 부분이 동작하지 않았다.

다섯째, position : sticky

예를들어서 블로그의 목차를 보는 것과 같다. 스크롤이 존재하는 상황에서 skicky가 적용된 div는 고정된 채로 있다.

또한 함께 등장하는 내용은 브라우저에 최적화 하는 내용들을 담고 있다.

• -webkit- : 구글, 사파리 브라우저에 적용
• -moz- : 파이어폭스 브라우저에 적용
• -ms- : 익스플로러에 적용, 보통 생략합니다.
• -o- : 오페라 브라우저에 적용

2) 공부를 하며, 등장한 새로운 HTML 태그에 대해서

• <dl> 태그는 defnition list(정의 목록)으로 사전처럼 용어를 설명하는 목록을 만들어 낸다.
• <dt> 태그는 정의되는 용어의 제목을 넣을 때 사용하며,
• <dd> 태그는 용어를 설명하는 데 사용한다.

<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
</dl>  

****