홈페이지 구성
- 이미지 바뀌는 것 : Javascript
- 맨윗줄 내용 바뀌는 것 : javascripit
- 로고 및 메뉴 및 아래 내용 : html, css
- F12 오른쪽이 CSS임
- CSS파일과 Html파일을 따로 관리
- HTML파일과 CSS파일을 따로 관리, HTML안에 Style로 Header밑에 들어가던 내용을 CSS파일로 저장
- #wrap 은 감싸다
- 이미지 바뀌는 것 : Javascript
- inline은 넓이 지정이 안되어서 나온 것이 display:inline-block;
- margin:20px 0 0 0; (12시 3시 9시를 0픽셀 뛰우겠다.
- margin :0 auto; (위아래는 0, 양옆은 맞출거야)
- GNB ( Global Navigation Bar ). 사이트 최상위 전체 공통네비게이션
- html에서 CSS 연결시 => ex) (상대경로임)
- 경로설정: 상대경로(내 자신 기준), 절대경로(처음부터 끝까지)
- .. _> 점 두개는 현재 위치에서 밖으로 나가라 / . ->점 한개는 현재 위치
/*CSS Style Sheet*/
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
a{text-decoration:none;
}
#wrap{
width:100%;
}
#header{
width:1200px;
height:100px;
margin:0auto;
}
#logo{
margin:20px000;
float:left;
}
#gnb{
float:right;
}
#gnb > ul > li{
float:left;
display:inline-block;
}
#gnb > ul > li > a{
font-size:19px;
color:blue#004385;
font-weight: bold;
width:180px;
display:inline-block;
margin:40px0
}
<!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>Document</title>
<link rel="stylesheet" href="./common/index.css">
<style>
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo">
<a href="#"><img src="./images/logo.png"/></a>
</h1>
<div id="gnb">
<ul>
<li><a href="#">학교소개</a></li>
<li><a href="#">교육과정</a></li>
<li><a href="#">취업정보</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">상담신청</a></li>
</ul>
</div>
</div>
<div id="visual">
<img src="./images/visual_2.png">
</div>
</div>
</body>
</html>
div 이미지화하여 코딩하면 빠르게 할 수 있음
'HTML' 카테고리의 다른 글
| [HTML] 박스 만들기 (0) | 2021.03.16 |
|---|---|
| [HTML] Q&A (0) | 2021.03.16 |
| [HTML] Menu만들기_float:left_float:right (0) | 2021.03.15 |
| [HTML] 크기 높이 색깔 설정_style_div (0) | 2021.03.15 |
| [HTML] H1-H6_span (0) | 2021.03.15 |