웹페이지 기초구조 제작

위 그림처럼 홈페이지 기본 구조를 만들거다.

 

처음에는 header를 만들어보자.

헤더에는 메뉴를 추가 할 건데 div를 써도 되지만 메뉴같이 웹사이트의 주요한 페이지로 이동할 수 있는 건 nav(navigation)으로 만든다고 한다.

<header>
        <nav>
            <ul>
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
            </ul>
        </nav>
    </header>

CSS없이 위 코드를 그냥 출력했을 경우

 

메뉴1

메뉴2

메뉴3

 

이렇게 되어 있을 거다.

수평으로 만들기 위해 header의 nav안에 있는 ul의 선택자에 flex를 추가해 주자. 수평으로 만드는 방법에는 float, inline-block등 여러가지 방법이 있지만 가장 쉬운 방법이 display: flex를 추가하는 방법이다.

 

header nav ul{
    display: flex;
}

그리고 보다 깔끔하게 보이게 하기 위해 margin과 padding을 넣어주는 주자. 또한 나는 영역을 보이게 하기 위해 배경색을 추가 했다.

 

그 다음은 main이다. 메인에는 사이드바와 메인내용이 들어가는게 있는데 메인 안에서 둘다 넣으면 된다.

일단은 메인내용이 들어가는 영역은 서로 상관이 없다 치고 div를 사용했다. 그리고 메인안에 들어갈 내용은 article로 3개 만들었다. 사이드바는 aside를 이용.

 

<main>
        <div>
            <h1>Section</h1>
            <article>
                <h2>Article1</h2>
                <p>Contents...</p>
            </article>
            <article>
                <h2>Article2</h2>
                <p>Contents...</p>
            </article>
            <article>
                <h2>Article3</h2>
                <p>Contents...</p>
            </article>
        </div>

        <aside>
            Aside
        </aside>
    </main>

이 상태 그대로 사용하면 메인과 사이드바가 서로 수직인 상태일것이다. 그 이유는 영역을 나누는 것들은 기본적으로 display: block 이기 때문이다. 따라서 main에 위 메뉴에서 했던것 처럼 display: flex를 추가해 주자. 그리고 메인과 사이드바의 비율을 8:2로 해두었다.

main {
    display: flex;
}

div {
    width: 80%;
    background: tomato;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
}


article {
    background: yellowgreen;
    margin-bottom: 10px;
    padding: 10px;
}


aside {
    width: 20%;
    background: tomato;
    margin: 10px;
    padding: 20px;
    box-sizing: border-box;
}

이제 footer를 넣어보자.

footer에는 보통 이메일이나 전화번호 주소등이 들어가있다. 

<footer>
        <address>
            <a href="#">tstory@naver.com</a>
            <a href="#">010123456677</a>
        </address>
    </footer>

a태그는 inline이므로 그대로 출력하면 이메일과 전화번호가 서로 붙어 있을 테니 block으로 설정해 깔끔하게 보이도록 하자.

footer {
    background: tomato;
    margin: 10px;
    padding: 20px;
}

footer address a {
    display: block;
}

완성!

매우 기초적인 웹페이지 구조를 만들어 보았다. 이것말고 다른 웹페이지의 구조를 따라해 보는 것도 좋은 공부가 될 것 같다.