HTML
<!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="pt.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1 class="logo">
<a href="#">
<img src="./images/logo.png">
</a>
</h1>
<div class="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.png">
</div>
<div id = "container">
<div id = "contents">
<div class="con_notice">
<ul>
<li class="con_notice1 con_item">
<h2>
<span>Game Architecture</span>
게임기획
</h2>
<p>
게임기획자를 위한~
</p>
<a href="#">바로가기</a>
</li>
<li class="con_notice2 con_item">
<h2>
<span>Game Architecture</span>
게임기획
</h2>
<p>
게임기획자를 위한~
</p>
<a href="#">바로가기</a>
</li>
<li class="con_notice3 con_item">
<h2>
<span>Game Architecture</span>
게임기획
</h2>
<p>
게임기획자를 위한~
</p>
<a href="#">바로가기</a>
</li>
<li class="con_notice4 con_item">
<h2>
<span>Game Architecture</span>
게임기획
</h2>
<p>
게임기획자를 위한~
</p>
<a href="#">바로가기</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*/*element 단체 선택*/{margin:0; padding: 0;}
ul,li{list-style: none;}
#wrap{
width: 100%;
}
a{
text-decoration: none;
}
#header{
width: 1000px;
margin: 0 auto;
height: 102px;
}
.logo{
display: inline-block;
margin-top: 20px;
}
.gnb{
float: right;
}
.gnb > ul > li{
float: left;
display: inline-block;
padding: 30px 0;
width: 120px;
margin-top: 10px;
}
.gnb > ul > li > a{
font-size: 19px;
font-weight: bold;
color: #333
}
#visual{
height: 500px;
}
#container{
width:100%;
height:200px;
}
#contents{
width:1200px;
margin: 30px auto 0 auto;
height: 100px;
}
.con_notice{
width:600px;
}
.con_notice> ul> li{
float:left;
width: 39%;
height:200px;
padding:5%;
border:1px solid #ececec;
}
.con_notice> ul> li.con_notice1{
background:url('./images/main_con_ic_01.png') bottom right no-repeat;
background-position: 178px 109px;
}
.con_notice> ul> li.con_notice2{
background:url('./images/main_con_ic_02.png') bottom right no-repeat;
background-position: 178px 109px;
}
.con_notice> ul> li.con_notice3{
background:url('./images/main_con_ic_04.png') bottom right no-repeat;
background-position: 178px 109px;
}
.con_notice> ul> li.con_notice4{
background:url('./images/main_con_ic_05.png') bottom right no-repeat;
background-position: 178px 109px;
}
.con_item > h2{
font-size: 22px;
}
.con_item > h2 > span{
display:block;
font-size: 14px;
color:#666;
}
.con_item> p{
padding:30px 0 0 0;
width: 130px;
font-size:12px;
}
.con_item> a{
display: block;
margin:30px 0 0 0;
width:100px;
height:30px;
color:white;
background: #81b4f2;
text-align: center;
border-radius: 15px;
line-height: 32px;
}
