html/css를 이용하여 홈페이지 만들기
<head>영역
홈페이지 이름 설정
<title>경일게임아카데미</title>
우선
<title>을 사용하여 홈페이지 이름을 만든다.
css 링크 설정
<link href="./sample.css" type="text/css" rel="stylesheet">
<link>를 사용하여 내가 가져올 css에 링크를 설정한다.
<body> 영역
<div id="wrap">
<div id="header">
<h1 id="logo">
<a href=".\sample.html">
<img src=".\logo.png">
</a>
</h1>
<ul id="menu">
<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>를 사용하여 기본 틀을 잡는다.
<img>src를 사용하여 로고 사진을 가져온다.
<ul>,<li>를 사용하여 항목들을 만들어준다.
CSS 영역
*{
margin:0;
padding:0;
}
ul,li{
list-style: none ;
}
a{
text-decoration: none;
}1.margin과 padding을 사용하여 (0,0)으로 빈공간을 없이 맞춰준다.
2.ui,li의 앞에 붙는 .을 빼기위해 style을 none으로 설정했다.
3.a를 이용하여 링크를 설정할때 밑에 줄이 생기는 걸 빼기위해 style을 none으로 설정했다.
#wrap{
width: 100%;
}
#header{
width: 1200px;
height: 100px;
margin:0 auto;
padding:20px 0 0 0;
box-sizing: border-box;
}
#logo{
float: left;
}
#menu{
float: right;
}
#menu > li {
float:left;
}
#menu > li > a {
display: inline-block;
width: 180px;
color: #004385;
font-weight: bold;
text-align: center;
padding: 20px 0 40px 0;
box-sizing: border-box;
}1. css를 이용하여 header의 넓이를 1200 높이를 100으로 설정하고, margin:o auto; 를 이용하여 header를 가운데로 모아준후 padding을 사용해 위쪽에 20px의 틈을 주었다.
2. float:left / float:right를 이용해 logo와 menu의 위치를 잡아주었다.
3. display:inline-block을 이용해 180px의 넓이로 메뉴에 간격을 두었고 색상/글씨 크기를 조절해준후 text-align: center를 이용해 글씨를 가운데에 모아주었다.
<body>영역
```
<div id="visual">
<img src=".\visual_1.png">
<div id="visual_menu">
<ul>
<li><a class="on" >수강료0원 프리패스</a></li>
<li><a href="#" >중도포기란 없다</a></li>
<li><a href="#" >다가오는 메타버스</a></li>
<li><a href="#" >핀테크 챌린저 5기모집</a></li>
<li><a href="#" >취업률 1위</a></li>
</ul>
</div>
</div>
</div>위와 같은 방법으로 메뉴를 하나 더 만들었다.
CSS 영역
#visual{
width: 100%;
height: 500px;
}
#visual > img {
display:block;
margin: 0 auto;
}
#visual > #visual_menu {
position:relative;
height: 50px;
width: 100%;
z-index: 2;
bottom: 50px;
background: rgba(0,0,0,0.5);
}
#visual > #visual_menu > ul {
width: 800px;
height: 50px;
margin: 0 auto;
}
#visual > #visual_menu > ul > li {
float:left;
}
#visual > #visual_menu > ul > li > a {
color: #fff;
opacity: 0.7;
display:inline-block;
padding:14px 15px;
box-sizing: border-box;
}위와 같은 방법으로 CSS도 설정해주었다.
완성본
