Programming/HTML - CSS

[CSS 기초] 간단한 홈페이지 디자인 만들기 (Homepage Design)

LEFT 2022. 4. 27. 11:33

강의를 참고해 홈페이지 디자인, UI를 만들어봅니다.

간단하게 들어갈 요소와 구성, 레이아웃은 어떻게 할 것인지 생각해봅니다.
이번 실습에서는 Float Layout 방법을 사용해 요소들을 배치할 것입니다.

Introduction

Float Layout은 요소들을 좌측이나 우측에 위치시킬 수 있는 옵션입니다.

float: left | right

필요한 요소 :

  1. 버튼 = 로그인 / 회원가입 / 마이페이지 / 주문배송 조회 / 장바구니 / 이용안내 / 고객센터 / 게시판 등
  2. 로고(버튼 좌측에 위치하도록 함)
  3. 가장 먼저 보여질 Top Bar 부분

전체 코드 (Editing_homepage.html)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editing Homepage</title>

    <style>
        .clear {
            clear: both;
        }

        #logo {
            padding: 30px 0 0 30px;
            float: left;
        }

        #top_menu {
            margin: 40px 10px 0 0;
            float: right;
        }

        #top_menu li {
            display: inline;
        }

        #main_menu {
            font-size: 12px;
            color: #ffffff;
            background-color: #4e4c4d;
            margin-top: 15px;
            padding: 12px;
            text-align: center;
        }

        #main_menu li {
            padding: 0 20px 0 20px;
            display: inline;
        }
    </style>

</head>

<body>
    <div id="logo"> <img src="logo.png"> </div>

    <ul id="top_menu">
        <li> 로그인 | </li>
        <li> 회원가입 | </li>
        <li> 마이페이지 | </li>
        <li> 주문배송 조회 | </li>
        <li> 장바구니 | </li>
        <li> 이용안내 | </li>
        <li> 고객센터 | </li>
    </ul>

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

    <ul id="main_menu">
        <li> myshop 소개 </li>
        <li> 상품 Q&A </li>
        <li> 시안 확인 </li>
        <li> 고객 리뷰 </li>
        <li> 공지사항 </li>
</body>

</html>

Result

CSS를 통해 간단한 웹페이지를 만들고 눈으로 확인할 수 있었습니다. 버튼에 이벤트적용이나 실제 동작은 하지 않지만, 홈페이지 구성에 대해 간단히 배울 수 있었습니다.

저작자표시 (새창열림)