고정 헤더 영역
상세 컨텐츠
본문
첫 예제. 일단 가능한 한 쉬워보이는 것으로 골랐다. 구글 홈페이지 만들기이다. 구현할 기능은 아래와 같다.
1. 저 위에 아이콘에 커서 올리면 색깔이 변하더라(눌러서 뭐 나오는 건 일단은 안 한다. 모름....)
2. 검색창 위에 커서 올려도 색깔 변함(단, 검색창 안에 아이콘도 일단 이번에는 안 한다. 모름....)
3. 검색 버튼 위에 커서 올려도 색깔 변하더라.
흠.... 사실 jsfiddle 에서 돌렸을 때는 잘 되어서 일단 올리는데 이상하게 github 에서 돌렸을 때는 잘 안 된다. 해보시고 안되는 분은 댓글 바랍니다.
아래 부분에 광고, 비즈니스 어쩌구 나오는 부분은 디자인이 잘못되다 보니 화면 아래로 80px(위에 nav_bar 높이만큼) 내려갔다. 전체 container 를 새로 만들면 해결되는 문제고.... 뭐 그렇게 큰 것도 아니니까? 색깔 틀리고 그런건 넘어갑시다.....ㅋㅋ. 간단한 페이지라 순식간에 다 끝날 줄 알았는데도 생각보다 길이가 깁니다.
나도 막 배우기 시작한 처지라 모르는게 많습니다. 적극적인 의견 개진 부탁합니다.
<!-- Index.html -->
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div id="header">
<div class="nav_bar">
<div id="nav_id_box">
<p>열정과 함께</p>
</div>
<div class="nav_text_box">
<a href="#"><p>Gmail</p></a>
</div>
<div class="nav_text_box">
<a href="#"><p>이미지</p></a>
</div>
<div class="nav_icon_box1"></div>
<div class="nav_icon_box2"></div>
<div class="nav_profile_box"></div>
</div>
</div>
<div id="body">
<img id="logo" src="https://docs.google.com/drawings/d/1usRsPdvsyOmzjWizl4H73igG3VYqKV1OyjubiHskiKs/pub?w=291&h=106">
<input id="text_box" type="text">
<div class="search_bar">
<input class="search_button" type="submit" value="Google 검색">
<input class="search_button" type="submit" value="I'm Feeling Lucky">
</div>
<div class="footer">
<div class="company_info">
<a href="#"><p>광고</p></a>
</div>
<div class="company_info">
<a href="#"><p>비즈니스</p></a>
</div>
<div class="company_info">
<a href="#"><p>Google 정보</p></a>
</div>
<div class="user_info">
<a href="#"><p>Google.com 사용</p><a>
</div>
<div class="user_info">
<a href="#"><p>설정</p></a>
</div>
<div class="user_info">
<a href="#"><p>약관</p></a>
</div>
<div class="user_info">
<a href="#"><p>개인정보 취급방침</p></a>
</div>
</div>
</div>
</body
</html>
<!-- mycss.css -->
p {
color: #727272;
font-size: 12px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav_bar {
height: 50px;
float: right;
}
.nav_text_box {
height: 30px;
display: inline-block;
position: relative;
padding-right: 5px;
}
.nav_icon_box1 {
width: 22px;
height: 22px;
display: inline-block;
position: relative;
top: 5px;
margin-right: 5px;
margin-left: 5px;
background-image : url("https://docs.google.com/drawings/d/1Yy0vs1igTFZcacNLBC5dBQUfxESKh8mp34sBzoTWLIU/pub?w=22&h=22")
}
.nav_icon_box1:hover {
background-image : url("https://docs.google.com/drawings/d/1JeoXOogCbgGedVEuGQq-ONQ3BrSGJyMIVqfpYoO5sok/pub?w=22&h=22")
}
.nav_icon_box2 {
width: 24px;
height: 24px;
display: inline-block;
position: relative;
top: 6px;
margin-right: 5px;
margin-left: 5px;
background-image: url("https://docs.google.com/drawings/d/1hcAh0ZXgyL4HLhzjyGJ1L2PkLkF60LZlfhxQaCCahfc/pub?w=24&h=24")
}
.nav_icon_box2:hover {
background-image: url("https://docs.google.com/drawings/d/11TNkzsSOU5mL9VVzHRakJ8QB1nwngpuNOWNaRL9Q6TE/pub?w=24&h=24")
}
.nav_profile_box {
width: 36px;
height: 36px;
display: inline-block;
position: relative;
top: 12px;
margin-right: 5px;
margin-left: 5px;
background-image: url("https://docs.google.com/drawings/d/1wfEGIsAyr9QERbviZWfUBN0Hlm4C2-v1QM3wXojxthk/pub?w=36&h=36")
}
.search_bar {
width: 300px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
padding-left: 22px;
}
.search_button {
border: 1px solid #FFFFFF;
font-size: 13px;
font-weight: bold;
padding: 10px 18px 10px 18px;
background-color: #efefef;
color: #727272;
display: inline-block;
}
.search_button:hover {
color: black;
border: 1px solid #999999;
}
.footer {
width: 100%;
height: 60px;
position: absolute;
bottom: 0px;
background-color: #Eeeeee;
}
.company_info {
height: 50px;
width: 80px;
margin-top: 10px;
display: inline-block;
float: left;
text-align: center;
}
.user_info {
height: 50px;
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
display: inline-block;
float: right;
text-align: center;
}
#header {
width: 100%;
height: 70px;
}
#body {
width: 100%;
min-height: 100vh;
position: relative;
}
#nav_id_box {
height: 30px;
display: inline-block;
position: relative;
padding-right: 8px;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 120px;
}
#text_box {
width: 570px;
height: 22px;
border: 1px solid #DDDDDD;
font-size: 17px;
padding: 10px;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
#text_box:hover {
border-color: #999999;
}
댓글 영역