steven_yoon.log https://velog.io/ 하고싶은게 너무많은 개발자 Sat, 24 Jul 2021 14:18:37 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed steven_yoon.log https://images.velog.io/images/steven_yoon/profile/229e2d5f-0324-45d3-a6ba-18acb73e8d6a/블로그프로필.jpg https://velog.io/ Copyright (C) 2019. steven_yoon.log. All rights reserved. <![CDATA[HTML 5 기본 Layout]]> https://velog.io/@steven_yoon/HTML-5-%EA%B8%B0%EB%B3%B8-Layout https://velog.io/@steven_yoon/HTML-5-%EA%B8%B0%EB%B3%B8-Layout Sat, 24 Jul 2021 14:18:37 GMT 요즘 가장 관심있는 Front-end 개발 이야기다.

HTML5 부터는 Layout을 구성하는 기본 요소가 있다.

이러한 요소들을 의미(semantic)요소 라고 한다,, 는데 여기까진 잘모르겠다.

이 Layout은 웹 페이지의 구역 배치를 할때, 효과적인 배치하는 작업이다.

다시말해, HTML 자체에서 제공하고 권장하는 디자인 적인 부분으로

#Front-end는 이미 디자인과 프로그래밍이 같은단계에서 이루어지는 것을 의미하는것 같다.

HTML5 기본 Layout

직접 작성한 HTML5 레이아웃 이다. 이 레이아웃 이외에도 여러가지 종류가 있다.

하지만 기본적인 구조는 비슷하다. Header와 Main, Footer의 위치는 변하지 않는다.

보통 Aside와 Nav의 위치가 달라진다. ( 상하, 좌우등 시각적인 배치때문인듯 )

Layout 의미요소

<header>    : 페이지 최상단
<nav>        : Hyperlink, 메뉴바
<aside>        : 카테고리, 현재 페이지 외의 컨텐츠
<main>        : 현재 페이지 주 컨텐츠가 포함
<section>    : main 내 컨텐츠를 구역별로 다룸
<footer>    : 페이지 최하단

의미요소를 쉽게 정의 하자면 이정도로 정의 할수있겠다.

작성 Source

<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        .clear{
            clear:both;
        }
    header{
        width: 800px;
        height: 60px;
        border : solid 2px #000000;
        background-color: #f56363;
    }

    aside {
        width: 80px;
        height: 400px;
        float: left;
        border: solid 2px #000000;
        background-color: #c267ff;
    }

    nav{
        height: 150px;
        margin-bottom: 50px;
        margin: 2px;
        border: solid 2px #000000;
        background-color: #67a9ff;
    }
    main{
        width: 715px;
        height: 400px;
        float: left;
        margin: 2px;
        border: solid 2px #000000;
        background-color: #8ffff9;
    }
    section{
        width: 500px;
        height: 150px;
        margin: 2px;
        border: solid 2px #000000;
        background-color: #c2ff73;
    }
    footer{
        width: 800px;
        height: 90px;
        margin: 2px;
        border: solid 2px #000000;
        background-color: #ffe367;
    }

    </style>
</head>



<body>
    <header>
        header
    </header>

    <aside>
        aside
        <nav>
            nav
        </nav>
    </aside>

    <main>
        main
        <section>
            section 1
        </section>
        <section>
            section 2
        </section>
    </main>

    <div class = "clear"></div>

    <footer>
        footer
    </footer>

</body>
</html>

나는 들여쓰기에 아주 신경쓰는 편이다. 이런 Test Source까지 귀찮게 일일히 그래야 하나 생각도 들지만,

사람이 가장 무서운것이 습관이라 했다. 그리고 다른 사람이 작성한 Source 를 내가 볼때,

항상 보고 있지만서도 이게 무슨소린가 했던 적이 자주 있었다. 그래서 나는 내 Source라도 보기좋게 작성

하는 습관을 들여야지 했다.

코드에 대한 설명은 위의 내용이 이해가 된다면 굳이 할필요가 없을것 같다.

Layout 작성 팁

width나 height를 입력할때는 참고할것이 있다.

800x600, 1024x768, 1280x720, 1920x1080 등의 사이즈로 제작하는것인데,

어디서 많이 본 숫자일 것 이다. 모니터 해상도에 맞추는것 이다. 주로 header에서 잡고 간다.

반응형에서는 조금 달라지지만, 어쨋거나 PC 웹 페이지에서는 총합 길이를 위의 사이즈로

맞춰 제작한다. 주로 메인 컨텐츠 영역은 1100 사이즈가 많이 사용된다.

]]>