강의를 참고해 홈페이지 디자인, UI를 만들어봅니다.
간단하게 들어갈 요소와 구성, 레이아웃은 어떻게 할 것인지 생각해봅니다.
이번 실습에서는 Float Layout 방법을 사용해 요소들을 배치할 것입니다.
Introduction
Float Layout은 요소들을 좌측이나 우측에 위치시킬 수 있는 옵션입니다.
float: left | right필요한 요소 :
- 버튼 = 로그인 / 회원가입 / 마이페이지 / 주문배송 조회 / 장바구니 / 이용안내 / 고객센터 / 게시판 등
- 로고(버튼 좌측에 위치하도록 함)
- 가장 먼저 보여질 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를 통해 간단한 웹페이지를 만들고 눈으로 확인할 수 있었습니다. 버튼에 이벤트적용이나 실제 동작은 하지 않지만, 홈페이지 구성에 대해 간단히 배울 수 있었습니다.
'Programming > HTML - CSS' 카테고리의 다른 글
| [CSS] 부트스트랩(Bootstrap) 활용 (0) | 2022.06.11 |
|---|---|
| [CSS 기초] Transition / Transform 효과 (간단한 애니메이션) (0) | 2022.05.03 |
| [CSS 기초] 절대 위치 / 상대 위치 (absolute / relative) (0) | 2022.04.26 |
| [CSS 기초] 박스 그림자 / 테두리 지정 (Box Shadow / Outline) (0) | 2022.04.25 |
| [CSS 기초] 선택자 (클래스선택자 / 구조선택자) 예제 (0) | 2022.04.11 |
강의를 참고해 홈페이지 디자인, UI를 만들어봅니다.
간단하게 들어갈 요소와 구성, 레이아웃은 어떻게 할 것인지 생각해봅니다.
이번 실습에서는 Float Layout 방법을 사용해 요소들을 배치할 것입니다.
Introduction
Float Layout은 요소들을 좌측이나 우측에 위치시킬 수 있는 옵션입니다.
float: left | right필요한 요소 :
- 버튼 = 로그인 / 회원가입 / 마이페이지 / 주문배송 조회 / 장바구니 / 이용안내 / 고객센터 / 게시판 등
- 로고(버튼 좌측에 위치하도록 함)
- 가장 먼저 보여질 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를 통해 간단한 웹페이지를 만들고 눈으로 확인할 수 있었습니다. 버튼에 이벤트적용이나 실제 동작은 하지 않지만, 홈페이지 구성에 대해 간단히 배울 수 있었습니다.
'Programming > HTML - CSS' 카테고리의 다른 글
| [CSS] 부트스트랩(Bootstrap) 활용 (0) | 2022.06.11 |
|---|---|
| [CSS 기초] Transition / Transform 효과 (간단한 애니메이션) (0) | 2022.05.03 |
| [CSS 기초] 절대 위치 / 상대 위치 (absolute / relative) (0) | 2022.04.26 |
| [CSS 기초] 박스 그림자 / 테두리 지정 (Box Shadow / Outline) (0) | 2022.04.25 |
| [CSS 기초] 선택자 (클래스선택자 / 구조선택자) 예제 (0) | 2022.04.11 |
