반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

HTML5 화면 Layout 잡기 -1

2011. 12. 8. 08:21 | Posted by 솔웅


오늘은 처음 다뤘던 HTML 소스로 작업하겠습니다.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <h1> Welcome to Dougy's HTML5. </h1>
    </header>
    <nav>
        <li> Home </li>
        <li> Tutorials </li>
        <li> Podcast</li>
    </nav>
    <section>
        <article>
            <header>
                <hgroup>
                    <h1> DDanzi in NY</h1>
                    <h2> come to Zuccotti Park with Pizza</h2>
                </hgroup>
            </header>
            <p> DDanzi guys have visited in Zuccotti park yesterday to encourage the occupier of Occupy Wall St. Protesters.</p>
            <footer>
                <p> -- written by Dougy </p>
            </footer>
        </article>
        <article>
            <header>
                <hgroup>
                    <h1> Title of Article 2</h1>
                    <h2> Subtitle for Article!</h2>
                </hgroup>
            </header>
            <p> This is the 2nd article. </p>
            <footer>
                <p> -- written by Dougy </p>
            </footer>
        </article>
    </section>
    <aside>
        <h4> News </h4>
        DDanzi guys have visited Zucotty Park Yesterday.
    </aside>
    <footer>
        Copyright Bucky thenewboston.
    </footer>
</body>
</html>

이 화면은 헤더와 메뉴(nav) 그리고 메인 공간으로 section에 두개의 기사가 있고 한쪽에 aside 그리고 아래에 footer로 구성 돼 있습니다.
이것을 CSS를 이용해서 레이아웃을 잡을 겁니다.
지나번 글을 맨하튼 Zuccotti Park 갔다가 미국 방문한 나는 꼼수다 팀을 보고 난 다음에 작성해서 article에 나꼼수 팀이 피자 나눠준 얘기가 있네요.
저도 피자 한조각 얻어 먹고 왔어요. ^^



CSS를 적용하지 않은 화면은 이와 같습니다.

우선 CSS를 이용하기 위해서는 우선 div 태그로 body 태그 안을 모두 감싸고 각 레리아웃 구성 별로 id를 부여합니다. (div도 id를 부여 합니다.)
 <div id="big_wrapper">
    <header id="top_header"> ...
     <nav id="top_menu">...
     <section id="main_section">...
     <aside id="side_news">...
     <footer id="the_footer">...
  </div>
이렇게 HTML 파일을 수정합니다.

그 다음 main.css 파일로 가서 코딩을 시작합니다.
일단 모두 지우고 아래 내용을 코딩해 넣으세요.
*{
    margin: 0px;
    padding: 0px;
}
h1{
    font: bold 20px Tahoma;
}
h2{
    font: bold 14px Tahoma;
}
전체 마진과 패딩을 0으로 하고 h1 태그에는 볼드 20픽셀 사이즈 타호마 폰트를 적용하고 h2 태그에는 볼드 14픽셀 사이즈 타호마 폰트를 적용한다는 내용입니다.


이 내용을 적용하면 화면이 이렇게 변합니다.
지금은 h1,h2 태그에 대한 css 효과만 있습니다.

이제 레이아웃을 잡기 위해서 그룹화(블럭화)를 시킵니다.
header,section,footer,aside,nav,article,hgroup{
    display:block;
}
그리고 body내의 모든 내용을 기본적으로 center align으로 정합니다.
body{
    text-align:center;
}



이제 각 id 별로 css 효과를 주겠습니다.
우선 div는 id가 big_wrapper 였죠? 이 div 부터 주겠습니다.
#big_wrapper{
    border:1px solid black;
    width:1000px;
    margin: 20px auto;
    text-align:left;
}

이렇게 하면 1픽셀 테두리가 쳐진1000픽셀 너비의 사각형이 나올 겁니다.
윗쪽 마진은 20픽셀이고 왼쪽,오른쪽,아래쪽 마진은 자동적으로 정해 집니다.
그리고 글자들은 왼쪽 정렬이 됩니다.


그 다음은 top_header 에 효과를 주겠습니다.
#top_header{
    background:yellow;
    border: 1px solid blue;
    padding: 20px;
}
그리고 top_menu에는 아래와 같이 효과를 주구요.
#top_menu{
    background:blue;
    color:white;
}
그런데 이 Home, Tutorial, Podcast 가 좌에서 우로 한줄로 표시하고 싶습니다.
이게 메뉴거든요. 그래서 아래와 같이 li 태그에 효과를 줍니다.
#top_menu li{
    display:inline-block;
    list-style:none;
    padding: 5px;
    font: bold 14px Tahoma;
}



자 여기까지 완성이 됐습니다.
헤더가 있고 메뉴도 그럴듯하게 자리를 잡았네요.
이제 article에 대해 효과를 줘 볼까요?
main_section의 article이 왼쪽에 자리잡고 오른쪽에 조그맣게 aside가 자리 잡도록 하겠습니다.
#main_section{
    float:left;
    width:660px;
    margin:30px; /* 전체 너비가 1000 픽셀이므로 계산을 하면서 해야 함*/
}
#side_news{
    float:left;
    width:220px;
    margin:20px 0px;
    padding:34px;
    background:#66CCCC;
}
float 명령어를 잘 보세요.
줄단위로 표시하지 않고 좌우로 표시하려면 이 float를 사용해야 합니다.
그리고 the_footer를 아래와 같이 코딩하세요.
#the_footer{
    clear:both;
    text-align:center;
    padding:20px;
    border-top: 2px solid green;
}
여기서 clear:both의 의미는 좌우로 배치하는 것을 그만 두겠다는 의미입니다.
그러면 상하로 배치 되겠죠? footer는 가운데 정렬에 윗쪽에 녹색 줄이 그어 지게 됩니니다.


이렇게 나올 텐데요.. 좀 이상하네요. News 녹색 사각형이 Article 오른쪽에 있어야 되는데 밑에 있습니다.
파이어폭스, 사파리, 크롬 모두 저렇게 나오네요. 맥도 그렇고 윈도우즈도 그렇고...
뭐가 잘못 됐을까요? 브라우저 버전 문제인가?
네이버에서 다른 float 예제를 찾아서 해도 다 안 되더라구요.

일단 지금 제가 테스트 해 볼 시간이 없어서요. 다음으로 넘어가겠습니다.

다음은 각 article 을 보기 좋게 꾸미겠습니다.

article {
    background:#FFFBCC;
    border: 1px solid red;
    padding:20px;
    margin-bottom: 15px;
}
article footer {
    text-align:right;
}


조금 그럴듯하게 됐죠?
첫 강좌때 말씀 드린것처럼 원본 소스는 bucky 가 공개한 소스입니다. thenewboston.com으로 가면 원본 동영상 강좌를 보실 수 있습니다.

일단 오늘 강좌에선 float가 원하는 대로 작동 되지 않았네요.

여러분들도 한번 테스트해 보시고 제가 잘못한 부분이 있으면 댓글로 알려 주세요.
소스코드는 아래에 있습니다.

다음시간엔 새로운 CSS 태그로 오늘 한 웹 페이지를 좀 더 flexible 하게 표현하는 방법을 공부하도록 하겠습니다.
반응형

Comment

  1. 아 예 그렇군요. float 쪽이 익숙하지 않았었는데...
    감사합니다.

  2. hjp 2011.12.26 22:29

    #side_news{
    float:left;
    width:220px;
    margin:20px 0px;
    padding:30px;
    background:#66CCCC;
    }
    으로 고치면 오른쪽에 나옵니다.

    • 엽이 2012.05.14 18:16

      padding 사이즈의 문제였네요.

  3. 엑슈바이츠 2012.06.22 23:55

    많은 도움이 되었습니다.
    정말 감사합니다.

  4. qorgh 2012.09.03 17:35

    lang=en 를 반드시 설정해줘야하는건가요

    • 솔웅 2012.09.04 12:49 신고

      글쎄요. 반드시 해야 될 것 같지는 않네요.
      제 기억엔 HTML5 튜토리얼에 이게 반드시 들어가야 된다고 돼 있지 않은 것 같고.
      한번 직접 해 보세요.
      lang=en 부분을 없애보기도 하고 다른 언어를 넣어 보시기도 하고...
      예를 들어 lang="ko" 같은...
      검색해서 여기에 들어갈 수 있는 언어가 뭐가 있는지도 알아보시고 또 lang="ko" 가 들어가지 않은 상태에서 한글을 사용하면 어떻게 되는지 같은것도 직접 해 보시면 아주 많이 도움이 되실 겁니다.