UI 구현 실습 예시

웹 쇼핑몰 Layout(레이아웃) 실습을 진행하고자 한다.

<header> <footer> 사용하기
CSS를 사용하여 Layout 꾸미기

레이아웃 CSS 실습 참고 소스 파일 - css_layout.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}/*width값 header값이 추가됨*/

body {
  font-family: Arial, Helvetica, sans-serif;
}/*일괄적으로 폰트 적용*/

/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
} /*타이틀 상단 스타일 설정*/

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;/*30퍼센트 메뉴바로 설정할 것이다*/
  height: 300px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}/*왼쪽 메뉴바 스타일 설정*/

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}/* 메뉴 글머리 요소 지우기 */

article {
  float: left;
  padding: 20px;
  width: 70%;/*nav가 30프로 설정되어 있어서 가로의 남은 부분은 70%이다.*/
  background-color: #f1f1f1;
  height: 300px; /* only for demonstration, should be removed */
}/**/
/*nav와 article의 height는 같아야 한다*/
/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}/*선택한 뒤*/

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}/*하단 타이틀 스타일 설정*/

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}/*미디어 쿼리 -> 없으면 화면 크기가 줄어들어도 구조가 변하지 않음, 
있으면 최대 600일때 nava, article을 100%로*/
</style>
</head>
<body>

<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>

<header>
  <h2>Cities</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

css_layout.html 실행 결과

CSS Template

CSS Layout Float

In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.

Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

웹 사이트 소스코드 - UI 구현.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          box-sizing: border-box;
        }/*width값 header값이 추가됨*/
        
        body {
          font-family: Arial, Helvetica, sans-serif;
        }/*일괄적으로 폰트 적용*/
        
        /* Style the header */
        header {
            background-color: white;
            padding: 30px;
            text-align: center;
            font-size: 35px;
            color: black;
        } /*타이틀 상단 스타일 설정*/
        
        header p{
            font-size : 15px;
            float : right;
        }
        

        /* Create two columns/boxes that floats next to each other */
        nav {
          float: left;
          width: 20%;/*20퍼센트 메뉴바로 설정할 것이다*/
          height: 600px; /* only for demonstration, should be removed */
          background: #ccc;
          padding: 50px;
          font-size: 20px;
        }/*왼쪽 메뉴바 스타일 설정*/
        
        /* Style the list inside the menu */
        nav ul {
          list-style-type: none;
          padding: 0;
        }/* 메뉴 글머리 요소 지우기 */
        
        article {
          float: left;
          padding: 20px;
          width: 80%;/*nav가 20프로 설정되어 있어서 가로의 남은 부분은 80%이다.*/
          background-color: #f1f1f1;
          height: 600px; /* only for demonstration, should be removed */
        }/**/
        /*nav와 article의 height는 같아야 한다*/

        article h1{
            font-size : 25px;
        }

        /* Clear floats after the columns */
        section::after {
          content: "";
          display: table;
          clear: both;
        }/*선택한 뒤*/
        
        /* Style the footer */
        footer {
          background-color: #777;
          padding: 10px;
          text-align: center;
          color: white;
        }/*하단 타이틀 스타일 설정*/
        
        /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
        @media (max-width: 600px) {
          nav, article {
            width: 100%;
            height: auto;
          }
        }/*미디어 쿼리 -> 없으면 화면 크기가 줄어들어도 구조가 변하지 않음, 
        있으면 최대 600일때 nava, article을 100%로*/

        
        div.gallery {
        margin: 5px;
        border: 1px solid #ccc;
        float: left;
        width: 180px;
        }

        div.gallery:hover {
        border: 1px solid #777;
        }

        div.gallery img {
        width: 100%;
        height: auto;
        }

        div.desc {
        padding : 15px;
        text-align: center;
        }
        
    </style>
</head>
<body>
    <header>
        <p>LOGIN | JOIN | MYPAGE | ORDER | CART(0) |</p>
        <h2>DocMall</h2>
      </header>
      
      <section>
        <nav>
          <ul>
            <li>TOP</li>
            <li>SHIRTS</li>
            <li>PANTS</li>
            <li>OUTER</li>

          </ul>
        </nav>
        
        <article>
            <h1>Top</h1>
            <div class="gallery">
                <a target="_blank" href="img_5terre.jpg">
                  <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
                </a>
                <div class="desc">Add a description of the image here</div>
              </div>
              
              <div class="gallery">
                <a target="_blank" href="img_forest.jpg">
                  <img src="img_forest.jpg" alt="Forest" width="600" height="400">
                </a>
                <div class="desc">Add a description of the image here</div>
              </div>
              
              <div class="gallery">
                <a target="_blank" href="img_lights.jpg">
                  <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
                </a>
                <div class="desc">Add a description of the image here</div>
              </div>
              
              <div class="gallery">
                <a target="_blank" href="img_mountains.jpg">
                  <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
                </a>
                <div class="desc">Add a description of the image here</div>
              </div>

        </article>
      </section>
      
      <footer>
        <p>(주)DocMall | 대표 : 홍길동 | 사업자 등록 번호 111-11-11111 | 통신판매업신고 : 제000-서울##-100호 | 개인정보 보호 책임자 : 홍길동</p><br>
        <p>E-mail : user01@docmall.com | 주소 : 서울시 ##구 ##빌딩 ###호</p><br>
        <p>ⓒ2024. DocMail All rights reserved.</p><br>
      </footer>
</body>
</html>