만들 페이지 예시
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>frontend_project1</title>
<link rel="stylesheet" href="style.css">
<!--cdn 방식 폰트 사용-->
<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</head>
<body>
</body>
</html>zxx는 웹 페이지의 주 언어를 쉽게 파악할 수 없는 상황에서 HTML 적합성 검사를 통과해야 할때 사용하는 값
헤더 영역 구현
헤더 영역을 작성하기 위해서는 시멘틱 태그인 header 태그가 가장 적절
-> 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 내비게이션 영역은 nav 태그로 작성하는 것이 적절
nav 태그에서 메뉴의 순서가 중요해보이지 않을 때 -> ul태그
자바 스크립트 코드로 링크 이동을 제어할려 함 -> a 태그 대신 button 태그 사용
<body>
<header>
<div class = "container">
<h1>
<button>Aaron</button>
</h1>
<nav>
<ul>
<li> <button>About</button></li>
<li> <button>Features</button></li>
<li> <button>Portfolio</button></li>
<li> <button>Contact</button></li>
</ul>
</nav>
</div>
</header>
</body>여기서 div 태그는 전체 프로젝트의 기준 너비를 유지하기 위한 래퍼 역할
css 코드
/* 웹 브라우저에서 사용하는 값 대신 우리가 정의한 값으로 CSS 적용하기 위해 기본 스타일 시트 속성 초기화 */
*{
margin:0px;
padding:0px;
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:10px;
}
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.2rem;
}container 클래스가 있는 div 태그는 기준 너비를 유지하는 역할
-> 1140px로 지정, margin 0 auto를 통해 왼쪽 오른쪽을 auto로 지정하면 수평 방향에서 중앙으로 위치
헤더를 상단에 고정할려면
-> position속성을 fixed로 해야 함
-> 부드럽게 할려면 js가 필요해서 우선 absolute로 지정
-> position 속성 지정 시 모든 HTML 요소의 z-index는 0이 됨
-> 스크롤했을 때 다른 요소 밑에 가려서 안보이는 일이 없도록 0보다 크게 줌
텍스트 색상은 black으로 하였음 -> 자식 태그에도 다 지정 됨
헤더 영역의 모든 구성 요소 한줄로
-> display 값 flex, justify-content를 space-between
-> space-between 지정시 하위에 자식 태그가 2개있으면 각각 왼쪽 끝,오른쪽 끝으로 붙게 됨
-> 수직 정렬을 위해 align-items를 center로 지정
about,features,portfolio 처럼 메뉴 영역또한 가로 한줄로 배치 하기위해 display-flex로 지정
