이미지를 사용한 그레이디언트 적용
display 속성의 table 키워드를 적용한 목록 구성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.icon {
display: block;
}
.bg-header_left_button {
width: 512px;
height: 512px;
background: url("css_sprites.png") -1px -1px;
}
.bg-header_right_button {
width: 512px;
height: 512px;
background: url("css_sprites.png") -515px -1px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="main_header">
<i class="icon bg-header_left_button"></i>
<h1>Mobile</h1>
<i class="icon bg-header_right_button"></i>
</div>
<table>
<div id="bottom_gnb">
<div><a href="#">버튼</a></div>
<div><a href="#">버튼</a></div>
<div><a href="#">버튼</a></div>
<div><a href="#">버튼</a></div>
<div><a href="#">버튼</a></div>
</div>
</table>
<style>
#bottom_gnb {
width: 100px;
border-bottom: solid black;
display: table;
}
#bottom_gnb {
text-align: center;
display: table-cell;
}
#bottom_gnb > div > a {
display: block;
height: 35px;
line-height: 35px;
text-decoration: none;
color: black;
}
* {
margin: 0;
padding: 0px;
}
#main_heard {
height: 45px;
line-height: 45px;
text-align: center;
background-color: red;
position: relative;
}
#main_heard > h1 {
color: white;
}
bg-header_left_button {
position: absolute;
left: 5px;
top: 7px;
}
.bg-header_right_button {
position: absolute;
}
</style>
</div>
</body>
</html>
비전공자가 백엔드 개발자 도전하는 블로그