dukDukz
2021.03.15 경일 아카데미 홈페이지 만들기 본문
.html
<!--줄정리 shift + alt + f-->
<!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="team_main.css">
</head>
<body>
<div id="first_wrap">
<div class="main_content">
<div id="header">
<h1 id="logo_image">
<a href="#">
<img src="./img/logo.png">
</a>
</h1>
<div class="menu">
<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_image">
<img src="./img/visual1.png">
</div>
<!--본문 컨테이너-->
<div id="container_first">
<div id="contents_second">
<div class="con_left">
<ul>
<li class="con_left1 con_common">
<h2>
<span>Game Architecture</span>
게임 기획
</h2>
<p>게임기획자를 위한 정석 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con_left2 con_common">
<h2>
<span>Game Programming</span>
게임 프로그래밍
</h2>
<p>게임프로그래밍을 위한 정석 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con_left3 con_common">
<h2>
<span>Game Artworks</span>
게임 원화
</h2>
<p>게임원화를 위한 정석 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con_left4 con_common">
<h2>
<span>Progammer Coaching</span>
프로게이머 코칭
</h2>
<p>프로게이머 데뷔 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con_left5 con_common">
<h2>
<span>AR/VR</span>
AR/VR
</h2>
<p>증강현실/가상현실 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con_left6 con_common">
<h2>
<span>Block Chain</span>
블록체인
</h2>
<p>블록체인 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con_left7 con_common">
<h2 id="notice_top">
공지사항
</h2>
<dl id="notice_content">
<dt>
<a href="#" class="notice notice1">
- 3월 블록체인반 모집 임박
</a>
</dt>
<dd class="nc_date">03-03</dd>
<dt>
<a href="#" class="notice notice1">
- 4월 VR/AR반 모집 안내
</a>
</dt>
<dd class="nc_date">03-03</dd>
<dt>
<a href="#" class="notice notice1">
- 4월 게임 프로그래밍반 모집
</a>
</dt>
<dd class="nc_date">03-03</dd>
<dt>
<a href="#" class="notice notice1">
- 2월 기획반 모집 마감안내!
</a>
</dt>
<dd class="nc_date">03-02</dd>
</dl>
</li>
<li class="con_left8 con_common">
<h2 class="ask">
상담/문의
</h2>
<span><img src="./img/customer_tel.png" class="call_num"></span>
<span><img src="./img/customer_kakao.png" class="kakao"></span>
<span>
<a href="#"><img src="./img/customer_kakao_btn.png" class="kakao_btn"></a>
</span>
</li>
</ul>
</div>
<!--오른쪽 부분-->
<div class="con_community">
<ul>
<li class="main_con_interview">
<h3>
취업자인터뷰
<a href="#">
<img src="./img/btn_more.gif" alt="더보기" class="more">
</a>
</h3>
<span>
<a href="#">
<img src="./img/interview.png" alt="인터뷰 사진" class="interview_pic">
</a>
</span>
<div>
<h3 class="interview_content">
<a href="#" class="interview_link">
퀘*트게임즈 김대혁, 문희진" 정말 발전하고자 하는 열정적인 마음을 가지고 스스로 노력하고자 하는 사람이 왔으면 좋겠습니다.
" 드루와 던전 퀘*트게임즈에 ...
</a>
</h3>
<h4>
<ul>
<li>퀘*트 게임즈</li>
<li>김대혁, 문희진 훈련생</li>
<li></li>
</ul>
</h4>
</div>
</li>
<li class="bg_gray br_none">
<h3>수강후기
<a href="#" class="btn_more">
<img src="./img/btn_more.gif" alt="더보기" class="more">
</a>
</h3>
<div class="main_review">
<ul>
<li>
<a href="#">슬기로운 경일생활</a>
<p>[플밍_임재성] 2021-03-13</p>
</li>
<li>
<a href="#">슬기로운 경일생활</a>
<p>[플밍_임재성] 2021-03-13</p>
</li>
<li>
<a href="#">슬기로운 경일생활</a>
<p>[플밍_임재성] 2021-03-13</p>
</li>
<li>
<a href="#">슬기로운 경일생활</a>
<p>[플밍_임재성] 2021-03-13</p>
</li>
<li>
<a href="#">슬기로운 경일생활</a>
<p>[플밍_임재성] 2021-03-13</p>
</li>
<li>
<a href="#">슬기로운 경일생활</a>
<p>[플밍_임재성] 2021-03-13</p>
</li>
</ul>
</div>
</li>
</ul>
<div class="con_teacher">
<h3>
포트폴리오
<a href="#"><img src="./img/btn_more.gif" class="more"></a>
</h3>
<div class="youtube">
<iframe width="540" height="450" src="https://www.youtube.com/embed/TzLsPrkRKt4"
frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>
</div>
<div id="bottom_section">
<div class="container_bottom">
<div class="ki_story bg_gray">
<h2>
<span>K.I Story</span>
경일이야기
</h2>
<a href="#"><img src="./img/kga_day.jpg" class="kga_day_img"></a>
<div class="kga_day_span">
<a href="#">제 2회 경일게임아카데미 ★시네마 데이★</a>
</div>
<div class="kga_day_contents">
<ul>
<li> <a href="#">- 게임 AR/ VR 정규과정</a></li>
<li> <a href="#">- 게임 AR/ VR 정규과정</a></li>
<li> <a href="#">- 게임 AR/ VR 정규과정</a></li>
</ul>
</div>
</div>
<div class="ki_story useful_info">
<h2>
<span>useful information</span>
유용정보
</h2>
<a href="#"><img src="./img/ncsoft.jpg" class="kga_day_img"></a>
<div class="kga_day_span">
<a href="#">NC소프트 신화섭 기획자 인터뷰</a>
</div>
<div class="kga_day_contents">
<ul>
<li> <a href="#">- 서드도어 이성재 기획자 인터뷰</a></li>
<li> <a href="#">- 1부) 블록체인? 그거 비트코인 아니야?</a></li>
<li> <a href="#">- 경일인들의 놀이터 각종 꿀팁이 가능한 카페가 있다!</a></li>
</ul>
</div>
</div>
<div class="ki_story bg_gray ki_column">
<h2>
<span>Column</span>
교수칼럼
</h2>
<a href="#"><img src="./img/debate.png" class="kga_day_img"></a>
<div class="kga_day_span">
<a href="#">게임프로그래머 취업트렌드를 알려주마</a>
</div>
<div class="kga_day_contents">
<ul>
<li> <a href="#">- 왜 블록체인인가? (박재덕 대표)</a></li>
<li> <a href="#">- 멘토링별 학생 유형과 개발자의 자세 (권순우 멘토)</a></li>
<li> <a href="#">- "학생이 미래다" 게임원화 이진호교수님 인터뷰</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--본문 컨테이너 끝-->
</div>
</div>
</div>
</div>
<footer>
<div class="footer">
<div class="container_footer">
<div class="footer_menu">
<ul>
<li><a href="#">학교소개 |</a></li>
<li><a href="#"> 교육과정 |</a></li>
<li><a href="#"> 공지사항 |</a></li>
<li><a href="#"> 상담신청 |</a></li>
<li><a href="#" class="copy"> 개인정보처리방침 |</a></li>
</ul>
</div>
<h1><a href="#" class="footer_logo"><img src="./img/logo_bottom_2018.png"></a></h1>
<div class="footer_copyright">
<p>서울특별시 강동구 천호대로 995 금복빌딩 3,4층 경일게임아카데미(지하철 5,8호선 1번출구 10m이내)</p>
<p>TEL : 02-479-4050 FAX : 02-479-4056 대표자 : 박병준 개인정보관리책임자 : 서혁준</p>
<p>사업자번호 : 212-81-89247 통신판매허가번호 : 제2020-서울강동-1360호</p>
<p class="copyright">Copyright © 2016. Kyungil Technical College. All rights reserved.</p>
</div>
</div>
</div>
</footer>
</body>
</html>
.css
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
html{
overflow-x: hidden;
overflow-y: auto;
}
#first_wrap{
width: 100%;
}
#header{
width: 1200px;
margin: 0 auto;
}
#logo_image{
float: left;
display: inline-block;
margin: 30px 320px 20px 20px;
}
.menu{
float: left;
margin-top: 50px;
}
.menu>ul>li{
float: right;
margin-right: 60px;
}
.menu>ul>li>a{
color: #004385;
font-size: 19px;
font-weight: bold;
text-decoration: none;
}
.menu>ul>li>a:hover{
text-decoration: underline;
}
#main_content .con_community {
float: left;
width: 50%;
}
/*******뒷 부분********/
#visual_image{
width: 1920px;
margin: 0 auto;
display: block;
margin-bottom: 30px;
}
#container_first{
width: 100%;
height: 100%;
}
#contents_second{
width: 1300px;
margin: 0 auto;
height: 100%;
}
.con_left{
width: 50%;
}
.con_left > ul > li{
width: 40%;
height: 200px;
border: 3px solid #ececec;
padding: 3%;
}
.con_common{
float: left;
margin: 0 auto;
}
.con_common > h2 > span{
font-size: 13px;
font-weight: bold;
color: #666;
display: block;
margin-bottom: 3px;
margin-top: 5px;
}
.con_common > h2{
font-size: 20px;
}
.con_common > p {
font-size: 11px;
margin-top: 30px;
width: 130px;
}
.con_common > a {
display: block;
width: 100px;
height: 30px;
border-radius: 30px;
border: 1px solid white;
background-color: #81b4f2;
text-decoration: none;
color: white;
margin-top: 60px;
line-height: 30px;
text-align: center;
}
.con_left1{
background: url('./img/main_con_ic_01.png') bottom right no-repeat;
background-position: 180px 110px;
}
.con_left2{
background: url('./img/main_con_ic_02.png') bottom right no-repeat;
background-position: 180px 110px;
}
.con_left3{
background: url('./img/main_con_ic_04.png') bottom right no-repeat;
background-position: 180px 110px;
}
.con_left4{
background: url('./img/main_con_ic_05.png') bottom right no-repeat;
background-position: 180px 110px;
}
.con_left5{
background: url('./img/main_con_ic_07.jpg') bottom right no-repeat;
background-position: 180px 110px;
}
.con_left6{
background: url('./img/main_con_ic_06.jpg') bottom right no-repeat;
background-position: 180px 110px;
}
/*공지사항*/
#notice_content{
}
#notice_top{
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;
}
.notice:hover{
text-decoration: underline;
}
dd{
width: 30%;
float: right;
font-size: 12px;
line-height: 32px;
margin-left: 5px;
text-align: center;
color: #666;
}
/*상담문의*/
.ask{
margin-bottom: 30px;
color: #2d2d2d;
}
.call_num {
margin-bottom: 30px;
}
.kakao{
margin-bottom: 7px;
}
.kakao_btn{
margin-left: 65px;
}
/*취업자 인터뷰*/
.con_community{
position: relative;
width: 50%;
display: inline-block;
}
.con_community>ul>li{
width: 45%;
display: inline-block;
border: 3px solid #ececec;
height: 430px;
}
.main_con_interview{
border-top: 3px solid #ececec;
width: 50%;
float: left;
display: inline-block;
}
.more{
float: right;
margin-right: 5%;
}
.interview_pic{
margin-left: 5%;
margin-bottom: 7%;
margin-top: 4%;
border: 1px solid #ececec;
}
.interview_content{
width: 90%;
height: 90px;
margin-top: 20px;
font-size: 12px;
color: #555;
font-weight: normal;
text-transform: lowercase;
line-height: 22px;
overflow: hidden;
text-align: center;
margin: 0 auto;
}
.interview_link{
text-decoration: none;
cursor: pointer;
color: #666;
}
h3{
margin-top: 7%;
margin-bottom: 7%;
margin-left: 6%;
font-size: 19px;
color: #2d2d2d;
}
h4{
margin-top: 30px;
font-size: 12px;
color: #777;
font-weight: normal;
text-transform: lowercase;
line-height: 20px;
text-align: center;
}
.bg_gray{
background:#fafafa;
}
.main_review > ul >li {
border: 1px solid #ececec;
background: #fff;
margin-top: 3%;
margin-bottom: 3%;
margin-left: 3%;
font-size: 12px;
width: 90%;
height: 50px;
color: #666;
}
.main_review > ul >li>a{
color: #666;
text-align: left;
margin-top: 5%;
margin-left: 3%;
text-decoration: none;
}
.main_review > ul >li>p{
text-align: right;
margin-top: 2%;
}
.con_teacher{
border: 3px solid #ececec;
box-sizing:border-box;
width: 92%;
height: 544px;
}
.con_teacher >h3{
margin-top: 4%;
margin-bottom: 4%;
margin-left: 6%;
font-size: 19px;
color: #2d2d2d;
}
.youtube{
margin-left: 5%;
}
/*본문 아래 경일이야기*/
.container_bottom{
position: relative;
width: 1300px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 50px;
}
.ki_story{
margin-top: 5%;
border: 3px solid #ececec;
width: 30%;
height: 50%;
background: url('./img/main_bbs_ic_01.png') top right no-repeat;
background-position: 305px 10px;
font-size: 15px;
float: left;
}
.useful_info{
background: url('./img/main_bbs_ic_02.png') top right no-repeat;
}
.ki_column{
background: url('./img/main_bbs_ic_03.png') top right no-repeat;
}
.kga_day_img{
width: 348px;
height: 198px;
margin: 0 auto;
display: block;
}
.ki_story>h2>span{
font-weight: bold;
display: block;
font-size: 12px;
color: #4689e1;
margin-top: 3%;
margin-bottom: 1%;
}
.ki_story>h2{
font-weight: bold;
display: block;
font-size: 23px;
color: #2d2d2d;
margin-bottom: 4%;
margin-left: 2%;
}
.kga_day_span{
text-align: center;
margin-top: 3%;
margin-bottom: 5%;
color:#666;
}
.kga_day_contents{
margin-left: 3%;
line-height: 40px;
color: #666;
}
.kga_day_contents>ul>li>a{
text-decoration: none;
color: #666;
}
.kga_day_span>a{
text-decoration: none;
color: #666;
}
/*footer 시작*/
.footer{
width: 100%;
margin-top: 50px;
padding: 20px 0;
background: #323232;
text-align: left;
}
.container_footer{
width: 1300px;
height: 160px;
margin: 0 auto;
}
.footer_menu{
display: block;
height: 50px;
}
.footer_menu>ul>li{
float: left;
display: block;
color: #aeaeae;
}
.footer_menu>ul>li>a{
text-decoration: none;
color: #aeaeae;
display: inline-block;
font-size: 12px;
}
.footer_logo{
float: left;
}
.footer_copyright{
margin-left: 15%;
color: #aeaeae;
line-height: 23px;
font-size: 12px;
}
.copyright{
margin-top: 2%;
}
.copy{
font-weight: bolder;
}
완성본
!!! 새로운 개념
.css
1. position: relative;
www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
2. cursor: pointer;
www.homejjang.com/09/cursor.php
마우스 모양
3. text-transform: lowercase;
문자를 소문자로 바꾸는것(영어만 적용가능)
4. overflow: hidden;
부모 값을 벗어나는 자식값을 보여줄건지 말건지 정하는 것
'웹 개발 > HTML 과 CSS' 카테고리의 다른 글
| 2021.03.18 프로그래머스 홈페이지 레이아웃 잡아보기 (0) | 2021.03.18 |
|---|---|
| 2021.03.16 회색 네모 박스 위치 조정 (0) | 2021.03.16 |
| 2021.03.11 경일 홈페이지_공동 코드 작성 (0) | 2021.03.11 |
| 2021.03.10 경일 홈페이지_ 뒷 부분 까지 작성 / 새로운 CSS (0) | 2021.03.10 |
| 2021.03.09 경일 홈페이지 앞 부분 안보고 작성해보기 (0) | 2021.03.09 |
'웹 개발/HTML 과 CSS' Related Articles
more
