favicon

Jayden { do: smite }

모던 웹을 위한 HTML5+CSS3 바이블(4)

🍎 들어가기에 앞서

이 글은 모던 웹을 위한 HTML5+CSS3 바이블을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. <br/> 책에 대한 자세한 사항은 링크를 참고해주세요. 👏

📖 1. 웹 페이지 레이아웃

레이아웃 관련 챕터의 경우 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. <br/> 코드 원본은 링크에서 받으실 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Chapter_5</title>
    <!-- 🌟 초기화 : 필수는 아니지만, 보통 전체 선택자(*)를 통해 아래와 같은 값으로 초기화 후 스타일링을 진행합니다. -->
    <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;

        /* 🌟 절대 좌표 : 아래 자손 태그에 absolute를 적용하기에 부모 태그에 relative를 적용합니다.
        또한 공간 확보를 위해 height값을 지정해줍니다. */
        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: 'Coiny', cursive;
      }
    </style>
    <!-- 메뉴(1) -->
    <style>
      /* 🌟 li 태그들을 수평으로 만들기 위해 float: left를 적용하고 그 부모 태그에 overflow: hidden 처리를 해줍니다. */
      #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;

        /* 🌟 수평 레이아웃 구성: 자손 태그에 float을 적용하게 되면 총 너비(960px)에서 각각의 너비(750px, 200px)의 합에 대해서 10px이 남게 됩니다.
        이 10px을 간격으로 두고 #main_section과 #main_aside의 공간이 분리됩니다.(즉, 자손의 너비를 지정해주면 알아서 남은 값으로 간격이 생깁니다.) */
        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의 check 아이콘 자체는 숨깁니다. input이 체크되지 않았을 때는 안보이게 하고, 체크가 되면 보이게 합니다. */
      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; /* 🌟 사용하게 되면 'jayden is good!'과 같은 글자가 'jayden is...' 로 박스 크기에 맞게 생략됩니다. */
        text-overflow: ellipsis; /* 🌟 이 3가지 속성이 함께 적용되므로 통째로 인지하고 찾아서 복붙하여 사용하는 게 좋습니다. ✍️ */
      }
    </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>

📕 정리

중요한 내용

  • 레이아웃을 행 단위로 생각하기
  • 레이아웃 초기화 코드
  • width와 margin을 사용하여 중앙 정렬하기
  • absolute와 relative 사용 그리고 height를 통한 영역 확보
  • overflow와 float을 사용해서 레이아웃 나누는 방법
undefined

Copyright 2023. all rights reserved by Jayden