6. <Portfolio> 웹 사이트 제작 - Header

안녕하세요.

이번 포스팅은 header 부분을 추가로 만들어 보기로 하겠습니다.

header부분에 들어갈 것은 title정도 밖에 없긴 하지만 다른 요소들에 맞춰서 제가 원하는 위치와 크기를 가지도록 만들어 보겠습니다.

 

<div id="container">
       <header>Hiio</header>
        <div id="sidebar">sidebar

            <ul><span>Menu</span>

                <li><a href="">Home</a></li>
                <li><a href="">About US</a></li>
                <li><a href="">Gallery</a></li>
                <li><a href="">Contact us</a></li>

            </ul>

        </div>
        <div id="main-image">mainimage
        </div>

    </div>

container 태드 안에 header를 넣어 줍니다. 

Hiio라는 타이틀을 텍스트로 작성해줬습니다.

header를 그냥 추가 하게 되면 container에 적용했던 css의 영향을 받으면서 sidebar와 mainimage가 header밑으로 오게 됩니다. 

제가 원하는 것은 mainimage위로 title이 오는 것이기 때문에 css를 통해서 조정해 줍니다.

 

header{
    position: absolute;
}

hedert 태그에 position:absolute를 주게 되면

그림 처럼 sidebar와 mainimage가 위로 올라오면서 header가 mainimage와 겹쳐지게 됩니다.

header{
    position: absolute;
    left: 16%;
    font-size: 200%;
}

여기서 title의 위치를 sidebar옆으로 옭기고 글자 크기를 크게 바꿔줍니다.

left값을 주면 오른쪽으로 값만큼 옮겨지게 됩니다.

 

보시는 거와 같이 header 부분을 추가 시켜 봤습니다.

다음에는 sidebar를 버튼을 누르면 사라지고 나타나게 하는 기능을 추가해 보겠습니다.