반응형
개인프로젝트를 시작한다. 웹페이지 만들기, 도메인 등록 및 수익화가 목표다.
일단 HTML, CSS, Javascript 부분부터 만든다.
오늘은 헤더부분을 만들었다.
1. HTML 코드
<!DOCTYPE html>
<html lang="zxx">
<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>Final Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integerity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>
<button>JSH</button>
</h1>
<nav>
<ul>
<li><button>About</button></li>
<li><button>Features</button></li>
<li><button>Portfolio</button></li>
<li><button>Contact</button></li>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
2. CSS 코드
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
a, a:link, a:visited{
color:inherit;
text-decoration:none;
}
li{
list-style:none;
}
.container {
width:1140px;
margin:0 auto;
}
header{
position:absolute;
color:black;
top:0;
z-index:1;
width:100%;
padding:1rem;
}
header .container{
display:flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
header nav ul{
display:flex;
}
header nav ul li{
padding:15px;
}
header button{
background: transparent;
border:0;
cursor:pointer;
}
header h1 button{
font-size: 2rem;
font-weight: bold;
}
header nav ul li button{
font-size:1.5rem;
}
결과물
헤더 다음은 메인화면이다.
차근차근 쌓아나가자!
반응형
'코딩 학원(국비지원) > 개인 프로젝트' 카테고리의 다른 글
| 수직 스크롤 발생 시 header 태그에 active 클래스 추가 및 삭제 (4) | 2023.06.02 |
|---|---|
| 동적 페이지 만들기. javascript 코드. (3) | 2023.05.29 |
| 정적 페이지 완성, 미디어 쿼리 적용 (2) | 2023.05.23 |
| 개인프로젝트 What I DO 영역 완성 (1) | 2023.04.18 |
| 헤더 영역과 메인 영역 완성. (1) | 2023.04.15 |
