문서 흐름

이전에 만들었던 홈페이지이다. 배경이미지를 추가했었는데, 가운데 있는 검은 박스의 콘텐츠를 배경 이미지 중간쯤에 위치하도록 하려면 어떻게 해야할까?
현재 검은 박스는 배경 이미지를 가지는 section 요소 안에 존재하고 있다.

<section id="hero">
        <div id="hero-content">
          <h1>My Travel Page</h1>
          <p>Let's explore the world together</p>
          <a href="places.html">Discover places</a>
        </div>
</section>

그러므로 단순히 hero-content id의 css코드로

margin: 200px auto;

를 적용하면

그냥 상하에 200px만큼의 여백이 추가된 이런 결과가 나온다.

이 문제를 해결하기 위해서는 문서 흐름이라는 개념을 알아야 한다. 문서 흐름이란 HTML에서 사전 정의된 요소의 순서를 뜻한다. 문서에 속한 요소들은 이 순서를 엄격하게 따른다.

이는 일반적으로 바꿀 수 없지만 위치를 바꿀 수 있는 방법이 있다.

문서흐름에서 요소들의 기본 위치는

position: static;

이다. 말 그대로 정적으로, 위치가 바뀌지 않는다는 것을 뜻한다.
이때 position속성의 속성값으로 relative를 주게 되면 다른 요소들은 여
전히 문서 흐름의 일부이지만 이 요소의 위치를 변경할 수 있게 된다.

position: relative;
top: 200px;

또한 밑으로 내리고 싶으므로 top 속성을 사용했다. 이는 위쪽으로의 거리를 바꿀 수 있도록 해준다. top말고도 right, left, bottom등의 속성이 존재한다.

이를 적용하면

원하던 대로 콘텐츠가 중앙으로 이동했다.