HTML 레이아웃 최종

<!DOCTYPE html> 
<html> 
<head> 
  <title></title> 
  <style type="text/css"> 
  *{ 
    padding: 0; 
    margin: 0; 
    text-decoration: none; 
    list-style:none; 
  } 
  header { 
    position: relative; 
    overflow:hidden; 
    width:720px; 
    height:200px; 
 
    margin:0 auto; 
  } 
  #logo { 
    position: absolute; 
    left:10px; 
    bottom: 48%; 
  } 
 
  header a { 
    background-color:grey; 
    color:white; 
    border:1px solid grey; 
  } 
 
  header a:hover { 
    background-color:white; 
    color:black; 
  } 
 
  header li:first-of-type > a { 
    border-radius: 10px 0 0 10px; 
  } 
 
  header li:last-of-type > a { 
    border-radius: 0 10px 10px 0; 
  } 
 
  header li { 
    float:left; 
  } 
 
  #topmenu { 
    position: absolute; 
    right:0; 
    top:20px; 
  } 
 
  #bottommenu{ 
    position: absolute; 
    right:0; 
    bottom:20px; 
  } 
 
  #topmenu a { 
    padding:10px; 
  } 
 
  #bottommenu a { 
    padding:5px; 
  } 
 
  </style> 
 
  <style type="text/css"> 
  #mainsection { 
    margin:0 auto; 
    width:720px; 
    position: relative; 
 
  } 
 
  article { 
    margin-bottom:10px; 
    border:1px solid black; 
    padding: 5px 
  } 
 
  #articlesection { 
    width:500px; 
  } 
 
  #aside { 
    position: absolute; 
    right:0; 
    top:0; 
 
    width:200px; 
    border:1px solid black; 
  } 
  #aside input { 
    display:none; 
  } 
 
  #aside input:first-of-type:checked ~ #firstdisplay { 
    display:block; 
  } 
  #aside input:last-of-type:checked ~ #seconddisplay { 
    display:block; 
  } 
 
  #aside input:first-of-type:checked ~ label:first-of-type { 
    background-color:black; 
    color:white; 
  } 
 
  #aside input:last-of-type:checked ~ label:last-of-type { 
    background-color:black; 
    color:white; 
  } 
 
  #aside div { 
    display: none; 
  } 
 
  #footer { 
    width:720px; 
    margin:0 auto; 
    text-align: center; 
    border:1px solid black; 
  } 
  </style> 
</head> 
<body> 
  <header> 
    <div id = "logo"> 
      <h1> LOGO! </h1> 
    </div> 
    <nav id = "topmenu"> 
      <ul> 
        <li><a href="#">ONE</a></li> 
        <li><a href="#">TWO</a></li> 
        <li><a href="#">THREE</a></li> 
        <li><a href="#">FOUR</a></li> 
      </ul> 
    </nav> 
    <nav id = "bottommenu"> 
      <ul> 
        <li><a href="#">ONE</a></li> 
        <li><a href="#">TWO</a></li> 
        <li><a href="#">THREE</a></li> 
        <li><a href="#">FOUR</a></li> 
      </ul> 
    </nav> 
  </header> 
  <div id = "mainsection"> 
    <section id = "articlesection"> 
      <article> 
        <p> 
          <h1>AAAA</h1> 
          AAAAAAAAAAAAAAAAAAAAAA <br> 
          AAAAAAAAAAAAAAAAAAA <br> 
          AAAAAAAAAAAAAAAAAAAAAA  
        </p> 
      </article> 
      <article> 
        <p> 
          <h1>BBBB</h1> 
          BBBBBBBBBBBBBBBBBBBB <br> 
          BBBBBBBBBBBBBBBBBBBBB<br> 
          BBBBBBBBBBBBBBBBBBB<br> 
          BBBBBBBBBBBBBBBBBB 
        </p> 
      </article> 
      <article> 
        <p> 
          <h1>CCCC</h1> 
          CCCCCCCCCCCCCCCCCCCCCCCC<br> 
          CCCCCCCCCCCCCCCCCCCCCc<br> 
          CCCCCCCCCCCCCCCCCCCCCC 
        </p> 
      </article> 
    </section> 
    <aside id = "aside"> 
      <input type="radio" name = "radiobtn" id = "radiobtn1" checked="checked"><label for = "radiobtn1">ONE</label></input> 
      <input type="radio" name = "radiobtn" id = "radiobtn2"><label for = "radiobtn2">TWO</label></input> 
      <div id = "firstdisplay"> 
        <ul> 
          <li><a href="#">ONE</a></li> 
          <li><a href="#">ONE</a></li> 
          <li><a href="#">ONE</a></li> 
          <li><a href="#">ONE</a></li> 
        </ul> 
      </div> 
      <div id = "seconddisplay">					 
        <ul> 
          <li><a href="#">TWO</a></li> 
          <li><a href="#">TWO</a></li> 
          <li><a href="#">TWO</a></li> 
          <li><a href="#">TWO</a></li> 
        </ul> 
      </div> 
    </aside> 
    <footer id ="footer"> 
      <h3>FOOTER</h3> 
    </footer> 
  </div> 
</body> 
</html>

 

 
확인하기

HTML/CSS 레이아웃 중급과정

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset = "utf-8"> 
    <title>Chapter_5</title> 
    <!-- 본문에서는 다루지 않은 코드입니다. 부록 A에서 살펴보는 플러그인입니다. --> 
    <!-- 구 버전의 인터넷 익스플로러에서 HTML5 태그를 인식하게 합니다. --> 
    <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <!-- 초기화 --> 
    <link href="http://fonts.googleapis.com/css?family=Henny+Penny" rel="stylesheet" type="text/css" /> 
    <!-- 초기화 --> 
    <style> 
        * { margin: 0; padding: 0; } 
        body { font-family: 'Times New Roman', serif; } 
        li { list-style: none; } 
        a { text-decoration: none; } 
        img { border: 0; } 
    </style> 
    <!-- 헤더 --> 
    <style> 
        #main_header { 
            /* 중앙 정렬*/ 
            width: 960px; margin: 0 auto; 
 
            /* 절대 좌표 */ 
            height: 160px; 
            position: relative; 
        } 
        #main_header > #title { 
            position: absolute; 
            left: 20px; top: 30px; 
        } 
        #main_header > #main_gnb { 
            position: absolute; 
            right: 0; top: 0; 
        } 
        #main_header > #main_lnb { 
            position: absolute; 
            right: 0; bottom: 10px; 
        } 
    </style> 
    <!-- 타이틀 --> 
    <style> 
        #title { 
            font-family: 'Henny Penny', cursive;  
        } 
    </style> 
    <!-- 메뉴(1) --> 
    <style> 
        #main_gnb > ul { overflow: hidden; } 
        #main_gnb > ul > li { float: left; } 
        #main_gnb > ul > li > a { 
            display: block; 
            padding: 2px 10px; 
            border: 1px solid black; 
        } 
        #main_gnb > ul > li > a:hover { 
            background: black; 
            color: white; 
        } 
        #main_gnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; } 
        #main_gnb > ul > li:last-child > a  { border-radius: 0 10px 10px 0; } 
    </style> 
    <!-- 메뉴(2) --> 
    <style> 
        #main_lnb > ul { overflow: hidden; } 
        #main_lnb > ul > li { float: left; } 
        #main_lnb > ul > li > a { 
            display: block; 
            padding: 10px 20px; 
            border: 1px solid black; 
        } 
        #main_lnb > ul > li > a:hover { 
            background: black; 
            color: white; 
        } 
        #main_lnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; } 
        #main_lnb > ul > li:last-child > a  { border-radius: 0 10px 10px 0; } 
    </style> 
    <!-- 콘텐츠 --> 
    <style> 
        #content { 
            /* 중앙 정렬 */ 
            width: 960px; margin: 0 auto; 
 
            /* 수평 레이아웃 구성 */ 
            overflow: hidden; 
        } 
        #content > #main_section { 
            width: 750px; 
            float: left; 
        } 
        #content > #main_aside { 
            width: 200px; 
            float: right; 
        } 
    </style> 
    <!-- 본문 --> 
    <style> 
        #main_section > article.main_article { 
            margin-bottom: 10px; 
            padding: 20px; 
            border: 1px solid black; 
        } 
    </style> 
    <!-- 사이드 --> 
    <style> 
        /* 첫 번째 탭 */ 
        input:nth-of-type(1) { display: none; } 
        input:nth-of-type(1) ~ div:nth-of-type(1) { display: none; } 
        input:nth-of-type(1):checked ~ div:nth-of-type(1) { display: block; } 
 
        /* 두 번째 탭 */ 
        input:nth-of-type(2) { display: none; } 
        input:nth-of-type(2) ~ div:nth-of-type(2) { display: none; } 
        input:nth-of-type(2):checked ~ div:nth-of-type(2) { display: block; } 
 
        /* 탭 모양 구성 */ 
        section.buttons { overflow: hidden; } 
        section.buttons > label {  
            /* 수평 정렬 */ 
            display: block; float: left; 
 
            /* 크기 및 글자 위치 지정*/ 
            width: 100px; height: 30px; 
            line-height: 30px; 
            text-align: center; 
 
            /* 테두리 지정 */ 
            box-sizing: border-box; 
            border: 1px solid black; 
 
            /* 색상 지정*/ 
            background: black; 
            color: white; 
        } 
        input:nth-of-type(1):checked ~ section.buttons >  label:nth-of-type(1) { 
            background: white; 
            color: black; 
        } 
        input:nth-of-type(2):checked ~ section.buttons >  label:nth-of-type(2) { 
            background: white; 
            color: black; 
        } 
    </style> 
    <!-- 목록 --> 
    <style> 
        .item { 
            overflow: hidden; 
            padding: 10px; 
            border: 1px solid black; 
            border-top: none; 
        } 
        .thumbnail { 
            float: left; 
        } 
        .description { 
            float: left; 
            margin-left: 10px; 
        } 
        .description > strong { 
            display: block; 
            width: 120px; 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
        } 
    </style> 
    <!-- 푸터 --> 
    <style> 
        #main_footer { 
            /* 중앙 정렬 */ 
            width: 960px; margin: 0 auto; 
            margin-bottom: 10px; 
 
            /* 테두리 */ 
            box-sizing: border-box; 
            padding: 10px; 
            border: 1px solid black; 
 
            /* 글자 정렬 */ 
            text-align: center; 
        } 
    </style> 
</head> 
<body> 
    <header id="main_header"> 
        <div id="title"> 
            <h1>Rint Development</h1> 
            <h2>HTML5 + CSS3 Basic</h2> 
        </div> 
        <nav id="main_gnb"> 
            <ul> 
                <li><a href="#">Web</a></li> 
                <li><a href="#">Mobile</a></li> 
                <li><a href="#">Game</a></li> 
                <li><a href="#">Simulation</a></li> 
                <li><a href="#">Data</a></li> 
            </ul> 
        </nav> 
        <nav id="main_lnb"> 
            <ul> 
                <li><a href="#">HTML5</a></li> 
                <li><a href="#">CSS3</a></li> 
                <li><a href="#">JavaScript</a></li> 
                <li><a href="#">jQuery</a></li> 
                <li><a href="#">Node.js</a></li> 
            </ul> 
        </nav> 
    </header> 
    <div id="content"> 
        <section id="main_section"> 
            <article class="main_article"> 
                <h1>Main Article</h1> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p> 
            </article> 
            <article class="main_article"> 
                <h1>Main Article</h1> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p> 
            </article> 
            <article class="main_article"> 
                <h1>Main Article</h1> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p> 
            </article> 
        </section> 
        <aside id="main_aside"> 
            <input id="first" type="radio" name="tab" checked="checked" /> 
            <input id="second" type="radio" name="tab" /> 
            <section class="buttons"> 
                <label for="first">First</label> 
                <label for="second">Second</label> 
            </section> 
            <div class="tab_item"> 
                <ul> 
                    <li class="item"><a href="#"> 
                        <div class="thumbnail"> 
                            <img src="http://placehold.it/45x45" /> 
                        </div> 
                        <div class="description"> 
                            <strong>HTML5 Canvas</strong><p>2012-03-15</p> 
                        </div> 
                    </a></li> 
                    <li class="item"><a href="#"> 
                        <div class="thumbnail"> 
                            <img src="http://placehold.it/45x45" /> 
                        </div> 
                        <div class="description"> 
                            <strong>HTML5 Audio</strong><p>2012-03-15</p> 
                        </div> 
                    </a></li> 
                    <li class="item"><a href="#"> 
                        <div class="thumbnail"> 
                            <img src="http://placehold.it/45x45" /> 
                        </div> 
                        <div class="description"> 
                            <strong>HTML5 Video</strong><p>2012-03-15</p> 
                        </div> 
                    </a></li> 
                    <li class="item"><a href="#"> 
                        <div class="thumbnail"> 
                            <img src="http://placehold.it/45x45" /> 
                        </div> 
                        <div class="description"> 
                            <strong>HTML5 Semantic Web</strong><p>2012-03-15</p> 
                        </div> 
                    </a></li> 
                </ul> 
            </div> 
            <div class="tab_item"> 
                <ul> 
                    <li class="item"><a href="#"> 
                        <div class="thumbnail"> 
                            <img src="http://placehold.it/45x45" /> 
                        </div> 
                        <div class="description"> 
                            <strong>CSS3 Transition</strong><p>2012-03-15</p> 
                        </div> 
                    </a></li> 
                    <li class="item"><a href="#"> 
                        <div class="thumbnail"> 
                            <img src="http://placehold.it/45x45" /> 
                        </div> 
                        <div class="description"> 
                            <strong>CSS3 Animation</strong><p>2012-03-15</p> 
                        </div> 
                    </a></li> 
                    <li class="item"><a href="#"> 
                        <div class="thumbnail"> 
                            <img src="http://placehold.it/45x45" /> 
                        </div> 
                        <div class="description"> 
                            <strong>CSS3 Border</strong><p>2012-03-15</p> 
                        </div> 
                    </a></li> 
                    <li class="item"><a href="#"> 
                        <div class="thumbnail"> 
                            <img src="http://placehold.it/45x45" /> 
                        </div> 
                        <div class="description"> 
                            <strong>CSS3 Box</strong><p>2012-03-15</p> 
                        </div> 
                    </a></li> 
                </ul> 
            </div> 
        </aside> 
    </div> 
    <footer id="main_footer"> 
        <h3>HTML5 + CSS3 Basic</h3> 
        <address>Website Layout Basic</address> 
    </footer> 
</body> 
</html>

확인하기

본 사이트는 HTTPS연결을 사용하므로 일부 코드를 수정하였습니다.

HTML5 CSS 동위 선택자

앞서 CSS에서는 여러 선택자가 있다고 했습니다.

그 중 동위 선택자, 즉 같은 레벨에 있는 것을 선택하는 예제입니다.

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        /*동위 선택자 (바로 뒤에 위치한 것)*/ 
        h1 + h2 {color:red;} 
 
        /*동위 선택자 (뒤에 위치한 모두)*/ 
        h1 ~ h2 {background-color:orange;} 
    </style> 
</head> 
<body> 
<h1>Header-1</h1> 
<h2>Header-2</h2> 
<h2>Header-2</h2> 
<h2>Header-2</h2> 
<h2>Header-2</h2> 
</body> 
</html>

 
확인하기

HTML5 CSS 후손 자손 선택자

CSS에서는 여러 선택자를 지원합니다.

그 중 후손, 자손 선택자에 대한 예제입니다.

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>CSS Selector</title> 
    <style> 
        /*후손 선택자*/ 
        body li {background-color:green; color:yellow;} 
 
        /*자손 선택자*/ 
        body > h1 {background-color:blue; color:white;} 
    </style> 
</head> 
<body> 
<ul> 
    <li>CSS Selector Basic</li> 
    <li>CSS Selector Basic</li> 
    <li>CSS Selector Basic</li> 
</ul> 
<h1>CSS Selector Basic</h1> 
<h1>CSS Selector Basic</h1> 
<h1>CSS Selector Basic</h1> 
<h1>CSS Selector Basic</h1> 
 
</body> 
</html>

 
확인하기

Javascript와 CSS로 웹 폰트(나눔고딕) 적용하기

현재 사이트도 마찬가지로, JS와 CSS의 힘으로 폰트 설치 없이 웹으로 폰트를 불러와 적용시켰습니다.

적용시킨 자바스크립트 코드

WebFontConfig = { 
    custom: { 
        families: ['Nanum Gothic'], 
        urls: ['https://fonts.googleapis.com/earlyaccess/nanumgothic.css'] 
    } 
  }; 
  (function() { 
    var wf = document.createElement('script'); 
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 
      '://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js'; 
    wf.type = 'text/javascript'; 
    wf.async = 'true'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(wf, s);

적용시킨 CSS

 

body { 
    font-family: "Nanum Gothic", sans-serif !important; 
}

 

CSS와 Javascript의 경우 Custom CSS, Javascript같은 플러그인을 사용하시면 됩니다.

 

//EDIT

더이상 나눔고딕을 사용하지 않고, 나눔 바른고딕을 사용하고 있습니다.

HTML 중급 레이아웃 경량화

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        *{ 
            margin:0; 
            padding: 0; 
            text-decoration: none; 
            list-style: none; 
        } 
        header { 
            width:720px; 
            height: 200px; 
            position:relative; 
            overflow: hidden; 
            margin: 0 auto; 
        } 
        header > #logo { 
            position: absolute; 
            left:10px; 
            top:45%; 
        } 
        header > #topMenu { 
            position: absolute; 
            right:0; 
            top:10px; 
        } 
        header > #topMenu a{ 
            padding: 10px; 
        } 
        header > #bottomMenu { 
            position: absolute; 
            right:0; 
            bottom: 10px; 
        } 
        header > #bottomMenu a { 
             padding:5px; 
        } 
        header a { 
            border: 1px solid grey; 
        } 
        header li:first-of-type a{ 
            border-radius: 5px 0 0 5px; 
        } 
        header li:last-of-type a { 
            border-radius: 0 5px 5px 0; 
        } 
        header a:hover { 
            background-color:black; 
            color:white; 
        } 
        header li { 
            float:left; 
        } 
    </style> 
 
    <style> 
        section { 
            width:720px; 
            position: relative; 
            overflow: hidden; 
            margin: 0 auto; 
        } 
        article { 
            width:500px; 
            margin-bottom: 10px; 
            border:1px solid black; 
        } 
    </style> 
 
    <style> 
        body { 
            position: relative; 
        } 
 
        aside { 
            width:200px; 
            position: absolute; 
            right:0; 
            top:0; 
            border: 1px solid black; 
        } 
 
        aside > input:first-of-type:checked ~ div:first-of-type { 
            display:block; 
        } 
        aside > input:last-of-type:checked ~ div:last-of-type { 
            display:block; 
        } 
 
        aside > div { 
            display:none; 
        } 
 
        footer { 
            border: 1px solid black; 
            width:720px; 
            margin: 0 auto; 
            text-align: center; 
        } 
    </style> 
</head> 
<body> 
<header> 
    <div id ="logo"> 
        <h1>LOGO!!</h1> 
    </div> 
    <div id = "topMenu"> 
        <ul> 
            <li><a href="#">ONE</a></li> 
            <li><a href="#">TWO</a></li> 
            <li><a href="#">THREE</a></li> 
            <li><a href="#">FOUR</a></li> 
        </ul> 
    </div> 
    <div id = "bottomMenu"> 
        <ul> 
            <li><a href="#">ONE</a></li> 
            <li><a href="#">TWO</a></li> 
            <li><a href="#">THREE</a></li> 
            <li><a href="#">FOUR</a></li> 
        </ul> 
    </div> 
</header> 
<section> 
    <article> 
        <p> 
        <h1>AAAA</h1> 
        AAAAAAAAAAAAAAAAAAAAAAAAAA <br> 
        AAAAAAAAAAAAAAAAAAAAAAAAAA <br> 
        AAAAAAAAAAAAAAAAAAAAAAAAAA 
        </p> 
    </article> 
    <article> 
        <p> 
        <h1>BBBB</h1> 
        BBBBBBBBBBBBBBBBBBBBBBBBBB <br> 
        BBBBBBBBBBBBBBBBBBBBBBBBBB <br> 
        BBBBBBBBBBBBBBBBBBBBBBBBBB 
        </p> 
    </article> 
    <article> 
        <p> 
        <h1>CCCC</h1> 
        CCCCCCCCCCCCCCCCCCCCCCCCCC <br> 
        CCCCCCCCCCCCCCCCCCCCCCCCCC <br> 
        CCCCCCCCCCCCCCCCCCCCCCCCCC 
        </p> 
    </article> 
    <aside> 
        <input type="radio" name = "radiobtn" id = "radioone" checked="checked"> 
        <label for="radioone">ONE</label> 
        <input type="radio" name = "radiobtn" id = "radiotwo"> 
        <label for="radiotwo">TWO</label> 
        <div id = "displayOne"> 
            <ul> 
                <li><a href="#">ONEONEONEONEONEONE</a></li> 
                <li><a href="#">ONEONEONEONEONEONE</a></li> 
            </ul> 
        </div> 
        <div id = "displayTwo"> 
            <ul> 
                <li><a href="#">TWOTWOTWOTWOTWOTWO</a></li> 
                <li><a href="#">TWOTWOTWOTWOTWOTWO</a></li> 
            </ul> 
        </div> 
    </aside> 
</section> 
<footer> 
    FOOTER 
</footer> 
</body> 
</html>

 
확인하기

HTML 중급레이아웃 두번째 간략본

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        *{ 
            text-decoration: none; 
            margin: 0; 
            padding: 0; 
        } 
        li{ 
            list-style: none; 
        } 
    </style> <!--전체초기화--> 
 
    <style> 
        #wrap{ 
            /*border: solid black 1px;*/ 
            margin: 0 auto; 
            width: 720px; 
        } 
    </style> <!--wrap--> 
 
    <style> 
        #header { 
            overflow: hidden; 
            position:relative; 
            height: 150px; 
        } 
        #header > #logo { 
            font-size : 30px; 
            float:left; 
            position: absolute; 
            left: 0; 
            top: 45%; 
        } 
        #header > #menu1 { 
            float:right; 
            position: absolute; 
            top:10px; 
            right:0; 
 
        } 
        #header > #menu2 { 
            float:right; 
            position:absolute; 
            bottom:10px; 
            right:0; 
        } 
        #header li { 
            float:left; 
        } 
 
        #header li > a{ 
            border:1px solid grey; 
            background-color:grey; 
            padding: 10px; 
        } 
        #header li > a:hover { 
            background-color:white; 
            color:black; 
        } 
        #header li:first-of-type > a{ 
            border-radius: 10px 0 0 10px; 
        } 
        #header li:last-of-type > a { 
            border-radius: 0 10px 10px 0; 
        } 
    </style> <!--header--> 
 
    <style> 
        #content { 
            margin-top: 10px; 
            overflow: hidden; 
            position: relative; 
        } 
 
        #content > #mainArticle > article { 
            border:1px solid black; 
            margin-bottom: 10px; 
            padding: 10px; 
 
            width:450px; 
        } 
    </style><!--mainarticle--> 
 
    <style> 
        #aside { 
            position: absolute; 
            top:0; 
            right: 0; 
            border:1px solid black; 
            width: 220px; 
        } 
        #aside > #tab { 
            width:198px; 
            overflow: hidden; 
        } 
        #aside > #tab div { 
            border:1px solid black; 
            float:left; 
            height: 30px; 
            width: 97px; 
        } 
        #aside > #tab div:first-child { 
            background-color: black; 
            color:white; 
        } 
        #aside > #tab div:last-child { 
            background-color: white; 
            color:black; 
        } 
    </style><!--aside--> 
 
    <style> 
        input:first-of-type:checked ~ div:first-of-type { 
            display: block; 
        } 
        input:last-of-type:checked ~ div:last-of-type { 
            display: block; 
        } 
        input:first-of-type ~ div:first-of-type { 
            display: none; 
        } 
        input:last-of-type ~ div:last-of-type { 
            display: none; 
        } 
 
    </style> <!--tabItemCSS--> 
 
    <style> 
        #footer { 
            border:1px solid black; 
            width:720px; 
 
            text-align:center; 
        } 
    </style> <!--footer--> 
 
<!-- ***************************JAVASCRIPT 
    <script> 
        function changeTab(n) { 
            if(n==1){ 
                document.getElementById("firstTabItem").style.display = "block"; 
                document.getElementById("secondTabItem").style.display = "none"; 
 
                document.getElementById("tabOne").style.backgroundColor = "white"; 
                document.getElementById("tabOne").style.color = "black"; 
                document.getElementById("tabTwo").style.backgroundColor = "black"; 
                document.getElementById("tabTwo").style.color = "white"; 
            } 
            else { 
                document.getElementById("secondTabItem").style.display = "block"; 
                document.getElementById("firstTabItem").style.display = "none"; 
 
                document.getElementById("tabTwo").style.backgroundColor = "white"; 
                document.getElementById("tabTwo").style.color = "black"; 
                document.getElementById("tabOne").style.backgroundColor = "black"; 
                document.getElementById("tabOne").style.color = "white"; 
            } 
        } 
    </script> 
******************************************--> 
</head> 
<body> 
    <div id = "wrap"> 
        <header id = "header"> 
            <div id = "logo"> 
                HELLO 
            </div> 
            <nav id = "menu1"> 
                <ul> 
                    <li><a href  = "#">one</a></li> 
                    <li><a href = "#">two</a></li> 
                    <li><a href  = "#">three</a></li> 
                </ul> 
            </nav> 
            <nav id = "menu2"> 
                <ul> 
                    <li><a href  = "#">one</a></li> 
                    <li><a href  = "#">two</a></li> 
                    <li><a href  = "#">three</a></li> 
                </ul> 
            </nav> 
        </header> <!--header 끝--> 
        <div id = "content"> 
            <section id = "mainArticle"> 
                <article> 
                    <p> 
                        <h1>AAAA</h1> 
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/> 
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/> 
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
                    </p> 
                </article> 
                <article> 
                    <p> 
                        <h1>BBBB</h1> 
                        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/> 
                        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/> 
                        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 
                    </p> 
                </article> 
                <article> 
                    <p> 
                        <h1>CCCC</h1> 
                        ccccccccccccccccccccccccccccccccc<br/> 
                        ccccccccccccccccccccccccccccccccc<br/> 
                        ccccccccccccccccccccccccccccccccc 
                    </p> 
                </article> 
            </section> 
            <!--*******************************JAVASCRIPT 
            <aside id = "aside"> 
                <div id = "tab"> 
                    <div onclick="changeTab(1);" id = "tabOne"> 
                        ONE 
                    </div> 
                    <div onclick="changeTab(2);" id = "tabTwo"> 
                        TWO 
                    </div> 
                </div> 
                <div id = "firstTabItem" style="display:block;"> 
                    <ul> 
                        <li><a href="#">ONEONEONEONE</a></li> 
                        <li><a href="#">ONEONEONEONE</a></li> 
                    </ul> 
                </div> 
                <div id = "secondTabItem" style="display: none;"> 
                    <ul> 
                        <li><a href="#">TWOTWOTWOTWO</a></li> 
                        <li><a href="#">TWOTWOTWOTWO</a></li> 
                    </ul> 
                </div> 
            </aside>***************************************--> 
            <aside id = "aside"> 
                <input type="radio" name = "tab" id = "tabone" checked = "checked"> 
                <label for="tabone">one</label> 
                <input type="radio" name = "tab" id = "tabtwo"> 
                <label for="tabtwo">two</label> 
 
                <div id = "firstTabItem"> 
                    <ul> 
                        <li><a href="#">ONEONEONEONE</a></li> 
                        <li><a href="#">ONEONEONEONE</a></li> 
                    </ul> 
                </div> 
                <div id = "secondTabItem"> 
                    <ul> 
                        <li><a href="#">TWOTWOTWOTWO</a></li> 
                        <li><a href="#">TWOTWOTWOTWO</a></li> 
                    </ul> 
                </div> 
            </aside> 
        </div> <!--content 끝--> 
        <footer id = "footer"> 
            <h3>FOOTER</h3> 
            <address>footer영역</address> 
        </footer> <!--footer 끝--> 
    </div> 
</body> 
</html>

 
확인하기

HTML 7장 레이아웃

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        * { 
            padding:0; 
            margin:0; 
            list-style: none; 
            text-decoration: none; 
        } 
        body { 
            min-width: 720px; 
        } 
        #header { 
            height:60px; 
            line-height:60px; 
            padding-left:10px; 
            background-color:darkblue; 
            color:white; 
        } 
        #headerNav { 
            background-color: darkgray; 
            overflow:hidden; 
        } 
        #headerNav li { 
            float:left; 
        } 
        #headerNav a{ 
            padding:10px 20px; 
            display:block; 
            color:white; 
        } 
        #navLeft { 
            float:left; 
            overflow: hidden; 
        } 
        #navRight { 
            float:right; 
            overflow: hidden; 
        } 
        #headerNav a:hover { 
            color:red; 
        } 
 
        #headerNav a:hover ~ div { 
            display:block; 
            backgrond-color:gray; 
            color:white; 
            padding:0 20px; 
        } 
        #headerNav a ~ div { 
            display:none; 
        } 
 
    </style> 
    <style> 
        #wrap { 
            overflow: hidden; 
            background-color:skyblue; 
        } 
        #aside { 
            float:left; 
            width:200px; 
        } 
        aside a { 
            padding:10px; 
            color:white; 
            display:block; 
            height:10px; 
            line-height:10px; 
        } 
        #aside2 { 
            float:right; 
            overflow: hidden; 
            width:200px; 
        } 
        #mainContent { 
            background-color:white; 
            margin-left:200px; 
            margin-right:200px; 
        } 
        #content article { 
            padding:10px; 
        } 
    </style> 
    <style> 
        #footer { 
            text-align: center; 
            vertical-align: middle; 
            border-top:4px solid black; 
        } 
    </style> 
</head> 
<body> 
<header id = "header"> 
    <h1>LOGO!</h1> 
</header> 
<nav id = "headerNav"> 
    <ul id = "navLeft"> 
        <li><a href="#">Button</a> 
            <div>111</div> 
        </li> 
        <li><a href="#">Button</a> 
            <div>222</div> 
        </li> 
        <li><a href="#">Button</a> 
            <div>333</div> 
        </li> 
        <li><a href="#">Button</a> 
            <div>444 </div> 
        </li> 
    </ul> 
    <ul id = "navRight"> 
        <li><a href="#">Button</a> 
            <div>555</div> 
        </li> 
        <li><a href="#">Button</a> 
            <div>666</div> 
        </li> 
    </ul> 
</nav> 
<div id = "wrap"> 
    <aside id = "aside"> 
        <ul> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
        </ul> 
    </aside> 
    <aside id = "aside2"> 
        <ul> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
        </ul> 
    </aside> 
    <section id = "mainContent"> 
        <section id = "content"> 
            <article> 
                <h1>AAA</h1> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consequatur dolorem dolorum ducimus, eius enim esse explicabo hic illum laudantium modi molestiae natus obcaecati officia suscipit tempora tenetur totam velit. 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda harum impedit iure modi nihil quam repellat! Consectetur consequatur deserunt impedit minima, nemo neque nesciunt perspiciatis sed tempora vel. Doloribus, vel? 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor earum, eius fugiat ipsa ipsum magnam molestiae necessitatibus neque nobis perspiciatis possimus quis sapiente temporibus. Delectus deleniti omnis reiciendis? 
                </p> 
            </article> 
            <article> 
                <h1>AAA</h1> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consequatur dolorem dolorum ducimus, eius enim esse explicabo hic illum laudantium modi molestiae natus obcaecati officia suscipit tempora tenetur totam velit. 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda harum impedit iure modi nihil quam repellat! Consectetur consequatur deserunt impedit minima, nemo neque nesciunt perspiciatis sed tempora vel. Doloribus, vel? 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor earum, eius fugiat ipsa ipsum magnam molestiae necessitatibus neque nobis perspiciatis possimus quis sapiente temporibus. Delectus deleniti omnis reiciendis? 
                </p> 
            </article> 
            <article> 
                <h1>AAA</h1> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consequatur dolorem dolorum ducimus, eius enim esse explicabo hic illum laudantium modi molestiae natus obcaecati officia suscipit tempora tenetur totam velit. 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda harum impedit iure modi nihil quam repellat! Consectetur consequatur deserunt impedit minima, nemo neque nesciunt perspiciatis sed tempora vel. Doloribus, vel? 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor earum, eius fugiat ipsa ipsum magnam molestiae necessitatibus neque nobis perspiciatis possimus quis sapiente temporibus. Delectus deleniti omnis reiciendis? 
                </p> 
            </article> 
        </section> 
    </section> 
</div> 
<footer id = "footer"> 
    <h1> 
        FOOTER! 
    </h1> 
    <address> 
        address! 
    </address> 
</footer> 
</body> 
</html>

 

HTML 간단한 메뉴바

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Tab Menu</title> 
    <style> 
        input:nth-of-type(1) ~ div:nth-of-type(1) { 
            display: none; 
        } 
        input:nth-of-type(1):checked ~ div:nth-of-type(1) { 
            display: block; 
        } 
        input:nth-of-type(2) ~ div:nth-of-type(2) { 
            display: none; 
        } 
        input:nth-of-type(2):checked ~ div:nth-of-type(2) { 
            display: block; 
        } 
    </style> 
    <script> 
 
    </script> 
</head> 
<body> 
<input type="radio" id = "firstTab" name = "tabMenu"><label for="firstTab" >첫번째</label> 
<input type="radio" id = "secondTab" name = "tabMenu"><label for="secondTab">두번째</label> 
<div style="overflow: hidden"> 
    <div style = "margin:10px; border:1px solid black; float:left;"> 
        111111 
    </div> 
</div> 
<div style="overflow:hidden;"> 
    <div style = "padding:10px; border:1px solid red; float:left;"> 
        222222 
    </div> 
</div> 
</body> 
</html>