index.html
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- euc-kr 등 다른 문서로 되어 있으면 제대로 인코딩을 할 수 없다 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// ie의 edge 버전에 맞게 변경해준다
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 핸드폰에 맞춰서 화면을 키워준다 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- /는 프로젝트 폴더 의미. /는 네이버 서버, 도메인/favicon.ico에서 파일을 가져온다-->
<!-- vscode에서는 점 없이 /를 사용하면 c 드라이브를 프로젝트 폴더로 잘못 인식한다. 그러므로 .을 붙여서 사용한다 -->
<title>NAVER</title>
<!-- head : meta data 즉 데이터에 대한 설명이 담긴 곳 -->
<style>
html, body {
margin: 0;
padding: 0;
}
/* ,를 쓰면 두 태그에 적용 가능 */
#wrap {
}
#wrap-center {
text-align: center;
width: 1280px;
display: inline-block;
background-color: yellow;
/* div는 display:block이라 너비가 부모의 100%인데 width를 정해주면 나머지 영역이 마진이 된다 */
/* inline-block으로 변경하면 정해진 width만큼만 차지를 한다
/* 그냥 inline을 하면 width, height모두 무시 */
}
#header {
}
#main {
height: 1120px;
}
#hamburger {
/* 이미지 스프라이트 : 옛날 브라우저에서 사용하던 이미지를 받아올 때의 비효율을 줄이기 위해 사용 */
/* 이미지 파일이 100개면 매번 하나씩 요청을 할 수 없으니까 합친 이미지 하나를 한방에 받고 background image에서 잘라서 사용한다 */
display: inline-block;
margin-top: 18px;
background-image: url('./new.png');
width: 46px;
height: 46px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wrap-center">
<div id="header">
<div id="hamburger"></div>
</div>
<div id="search"></div>
<div id="nav"></div>
<div id="main"></div>
</div>
</div>
</body>
</html>
노션 : https://garrulous-gander-3f2.notion.site/c488d337791c4c4cb6d93cb9fcc26f17