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>경일아케데미</title>
<link rel="stylesheet" href="./123.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo">
<a href="#"><img src="./images/logo.png"></a>
</h1>
<div id="menu">
<ul>
<li><a href="#">학교소식1</a></li>
<li><a href="#">학교소식2</a></li>
<li><a href="#">학교소식3</a></li>
<li><a href="#">학교소식4</a></li>
<li><a href="#">학교소식5</a></li>
</ul>
</div>
</div>
<div id="ad_photo">
<img src="./images/visual.png">
</div>
<section>
<div id="bigbox">
<div id="text">
<div class="s_photo">
<ul>
<li class="s_photo1 s_box">
<h2>
<span>Game Architecture</span>
게임기획
</h2>
<p>
게임기획자를 위한 정석 class
</p>
<a href="#">바로가기</a>
</li>
<li class="s_photo2 s_box">
<h2>
<span>Game programing</span>
게임 프로그래밍
</h2>
<p>
게임 프로그래밍을 위한 정석 class
</p>
<a href="#">바로가기</a>
</li>
<li class="s_photo3 s_box">
<h2>
<span>Game Artworks</span>
게임 원화
</h2>
<p>
게임원화 위한 정석 class
</p>
<a href="#">바로가기</a>
</li>
<li class="s_photo4 s_box">
<h2>
<span>Progamer Coaching</span>
프로게이머 코칭
</h2>
<p>
프로게이머 데뷔 class
</p>
<a href="#">바로가기</a>
</li>
<li class="s_photo5 s_box">
<h2>
<span>AR/VR</span>
AR/VR
</h2>
<p>
증강현실/가상현길 Class
</p>
<a href="#">바로가기</a>
</li>
<li class="s_photo6 s_box">
<h2 >
<span>Block Chain</span>
블록체인
</h2>
<p>
블록체인 Class
</p>
<a href="#">바로가기</a>
</li>
<li class= "s_box">
<h2 id = "notice_box">
공지사항
</h2>
<dl id = "notice_content">
<dt><a href="#" class="notice notice1">
3월 블록체인반 모집 임박</a></dt>
<dd>03-03</dd>
<dt><a href="#" class="notice notice2">
4월 VR/AR반 모집 안내</a></dt>
<dd>03-03</dd>
<dt><a href="#" class="notice notice3">
4월 게임 프로그래밍반 모집</a></dt>
<dd>03-03</dd>
<dt><a href="#" class="notice notice4">
2월 기획반 모집 마감안내!</a></dt>
<dd>03-03</dd>
</dl>
</li>
<li class="s_box box">
<h2>
상담/문의
</h2>
<p class="box1">
<img src = "./images/tell.png">
</p>
<p class="box2">
<img src = "./images/kakao.png">
</p>
<button class="button" oneclick>
<img src="./images/plus.png">
</button>
</li>
</ul>
</div>
<div class= "con_community">
<ul>
<li class="interview">
<h2>
취업자 인터뷰
</h2>
<div id = "int_content">
<img src = "./images/interview.png">
<p class="real_review"><a href="#">
*넷마블 취업자 ~~ - 긍정적 마인드 어쩌구
</a></p>
<p class="real_review2">
넷마블체리 프로그래머 <br/> 효림
</p>
</div>
</li>
<li class="review">
<h2>수강후기</h2>
<div class = "main_review">
<ul>
<li>
<a href="#">뭐라는거야</a>
<p> 대충 작성된 날짜</p>
</li>
<li>
<a href="#">뭐라는거야</a>
<p> 대충 작성된 날짜</p>
</li>
<li>
<a href="#">뭐라는거야</a>
<p> 대충 작성된 날짜</p>
</li>
<li>
<a href="#">뭐라는거야</a>
<p> 대충 작성된 날짜</p>
</li>
<li>
<a href="#">뭐라는거야</a>
<p> 대충 작성된 날짜</p>
</li>
<li>
<a href="#">뭐라는거야</a>
<p> 대충 작성된 날짜</p>
</li>
</ul>
</div>
</li>
</ul>
<!--포트폴리오-->
<div class = "con_teacher">
<h3>포트폴리오</h3>
<div id = "video">
<iframe src="https://www.youtube.com/embed/TzLsPrkRKt4">
</iframe>
</div>
</div>
</div>
<div id="news">
<ul>
<li class="story">
<h2>
<span>K.I Story</span>
경일이야기
</h2>
<a href="#">
<img src = "./images/story.jpg">
</a>
<div class="story_i">
<a href="#">
제 2회 경일게임 ~~~
</a>
</div>
<div class="story_list">
<ul>
<li><a href="#">게임 AR/VR 정규과정</a></li>
<li><a href="#">게임 AR/VR 정규과정</a></li>
<li><a href="#">게임 AR/VR 정규과정</a></li>
</ul>
</div>
</li>
<li class="information">
<h2>
<span>Useful Information</span>
유용정보
</h2>
<a href="#">
<img src = "./images/information.jpg">
</a>
<div class="information_i">
<a href="#">
nc soft interview
</a>
</div>
<div class="information_list">
<ul>
<li><a href="#">게임 AR/VR 정규과정</a></li>
<li><a href="#">게임 AR/VR 정규과정</a></li>
<li><a href="#">게임 AR/VR 정규과정</a></li>
</ul>
</div>
</li>
<li class="column" style="margin:30px 0 0 0;">
<h2>
<span>Column</span>
Professor Column
</h2>
<a href="#">
<img src = "./images/column.png">
</a>
<div class="column_i">
<a href="#">
프로그래머~~~
</a>
</div>
<div class="column_list">
<ul>
<li><a href="#">게임 AR/VR 정규과정</a></li>
<li><a href="#">게임 AR/VR 정규과정</a></li>
<li><a href="#">게임 AR/VR 정규과정</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
CSS
*{margin:0; padding:0;}
ul,li{list-style: none;}
html{
overflow-y: auto;
overflow-x: auto;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
text-decoration: underline;
}
#wrap{
width: 100%;
}
#header{
width: 1200px;
height: 110px;
margin: 0 auto;
}
#logo{
display: inline-block;
margin-top: 27px;
}
#menu{
float: right;
}
#menu > ul > li{
float: left;
padding: 40px;
}
#menu > ul > li > a{
color: #004385;
font-weight: bold;
font-size: 18px;
}
#ad_photo/*visual*/{
width: 1920px;
height: 500px;
margin: 0 auto;
}
#bigbox/*container*/{
width: 100%;
height: 600px;
margin-top: 30px;
margin-bottom: 50px;
}
#text/*contents*/{
width: 1200px;
height: 109px;
margin: 0 auto;
}
.s_photo/*con_notice*/{
display: inline-block;
width: 600px;
}
.s_photo > ul > li{
float: left;
width: 50%;
height: 230px;
padding: 3%;
box-sizing: border-box;
border: 1px solid #ececec;
}
.s_box > h2{
font-size: 22px;
}
.s_box > h2 > span {
display: block;
font-size: 12px;
color: skyblue;
}
.s_box > p {
margin-top: 40px;
font-size: 12px;
width: 110px;
height: 32px;
}
.s_box > a{
display: inline-block;
margin-top: 40px;
border-radius: 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
background: skyblue;
height: 30px;
width: 100px;
line-height: 30px;
}
.s_photo1{
background:url("./images/main_con_ic_01.png") bottom right no-repeat;
background-position: 178px 109px;
}
.s_photo2{
background:url("./images/main_con_ic_02.png") bottom right no-repeat;
background-position: 178px 109px;
}
.s_photo3{
background:url("./images/main_con_ic_04.png") bottom right no-repeat;
background-position: 178px 109px;
}
.s_photo4{
background:url("./images/main_con_ic_05.png") bottom right no-repeat;
background-position: 178px 109px;
}
.s_photo5{
background:url("./images/main_con_ic_07.jpg") bottom right no-repeat;
background-position: 178px 109px;
}
.s_photo6{
background:url("./images/main_con_ic_06.jpg") bottom right no-repeat;
background-position: 178px 109px;
}
/*공지사할*/
#notice_box{
margin-bottom: 20px;
position: relative;
display: block;
width: 100%;
font-size: 19px;
color: #2d2d2d;
}
.notice{
line-height: 30px;
text-decoration:solid;
display: block;
cursor: pointer;
color: #666;
font-size: 12px;
display: inline-block;
float: left;
}
dd{
width: 30%;
float: right;
font-size: 12px;
line-height: 32px;
margin-left: 5px;
text-align: center;
color: #666;
}
/*공지끝*/
.box > p{
width: 280px;
height: 45px;
margin-top: 20px;
}
.button{
display: block;
border: none;
cursor: pointer;
margin-left: 70px;
}
.con_community{
display: inline-block;
float: right;
width:50%;
}
.con_community > ul{
width: 600px;
height: 415px;
}
.interview{
float: left;
width: 50%;
height: 415px;
padding: 20px;
border-right: 1px solid #ececec;
border-bottom: 1px solid #ececec;
border-top: 1px solid #ececec;
text-align: left;
box-sizing: border-box;
}
.interview > h2{
display: block;
font-size: 19px;
width: 100%;
}
#int_content{
margin: 10px auto 5px auto;
width: 250px;
height: 350px;
}
#int_content > img{
width: 250px;
height: 180px;
}
.real_review{
text-align: center;
font-size: 14px;
margin-top: 15px;
}
.real_review2{
text-align: center;
margin-top: 50px;
font-size: 12px;
}
.review{
float: left;
width: 50%;
height: 415px;
padding: 20px;
background: #fafafa;
border-right: 1px solid #ececec;
border-bottom: 1px solid #ececec;
border-top: 1px solid #ececec;
text-align: left;
box-sizing: border-box;
}
.review > h2{
display: block;
width: 100%;
font-size: 19px;
margin-bottom: 15px;
}
.main_review > ul > li{
display: block;
height: 40px;
width: 240px;
padding: 7px 14px;
background: #fff;
border: 1px solid #ececec;
margin-top: 5px;
padding: 5px 10px;
font-size: 12px;
color:#666;
line-height: 20px;
}
.main_review > ul > li >p{
text-align: right;
}
.con_teacher{
float: left;
width: 100%;
height: 500px;
padding: 20px;
border-right: 1px solid #ececec;
border-bottom: 1px solid #ececec;
border-top: 1px solid #ececec;
text-align: left;
box-sizing: border-box;
}
#video{
margin-top: 20px;
}
iframe{
width: 560px;
height: 420px;
background: blue;
src:"https://www.youtube.com/embed/TzLsPrkRKt4"
}
#news{
width: 1200px;
}
#news > ul > li{
box-sizing: border-box;
float: left;
width: 390px;
height: 440px;
padding: 20px;
border: 1px solid #ececec;
margin-top: 30px;
margin-right: 15px;
background: #fafafa;
}
#news > ul > li > h2{
font-size: 22px;
}
#news > ul > li > h2 > span{
display: block;
font-size: 12px;
color: skyblue;
}
/*story*/
.story > a> img{
margin-top: 20px;
width: 350px;
height: 200px;
}
.story_i > a{
display: block;
font-size: 12px;
text-align: center;
margin-top: 5px;
}
.story_list{
margin-top: 20px;
}
.story_list > ul > li > a{
font-size: 12px;
line-height: 35px;
}
/*information*/
.information > a > img{
margin-top: 20px;
width: 350px;
height: 200px;
}
.information_i > a{
display: block;
font-size: 12px;
text-align: center;
margin-top: 5px;
}
.information_list{
margin-top: 20px;
}
.information_list > ul > li > a{
font-size: 12px;
line-height: 35px;
}
/*column*/
.column > a > img{
margin-top: 20px;
width: 350px;
height: 200px;
}
.column_i > a{
display: block;
font-size: 12px;
text-align: center;
margin-top: 5px;
}
.column_list{
margin-top:20px;
}
.column_list > ul > li > a{
font-size: 12px;
line-height: 35px;
}
#news .story{
background:url("./images/main_bbs_ic_01.png") top right no-repeat;
background-position: 300px 10px;
}
#news .information{
background:url("./images/main_bbs_ic_02.png") top right no-repeat;
background-position: 300px 10px;
}
#news .column{
background:url("./images/main_bbs_ic_03.png") top right no-repeat;
background-position: 300px 10px;
}
'Code' 카테고리의 다른 글
| 3.16-self (0) | 2021.03.16 |
|---|---|
| 2021.3.16 (0) | 2021.03.16 |
| 2021.3.12 (Thu) - clone NAVER (0) | 2021.03.12 |
| 2021.3.12(Thu) - Practice (0) | 2021.03.12 |
| 2021.3.11(Thu) - Group Assignment (0) | 2021.03.11 |
