이전에 만들었던 홈페이지이다. 배경이미지를 추가했었는데, 가운데 있는 검은 박스의 콘텐츠를 배경 이미지 중간쯤에 위치하도록 하려면 어떻게 해야할까?
현재 검은 박스는 배경 이미지를 가지는 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등의 속성이 존재한다.
이를 적용하면
원하던 대로 콘텐츠가 중앙으로 이동했다.