아침 -> 자습 & 팀 웹페이지 만들기
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="./commons/css/index3.css">
</head>
<body>
<div id = "wrap">
<div id = "header">
<h1 id ="logo">
<a href = "#"><img src = "./images/logo.png"/></a>
</h1>
<div id ="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/visual1.png">
</div>
<div id = "container">
<ul class = "big_box">
<li class = "box box1">
<h2>
<span>Game Architecture</span>
게임 기획
</h2>
<p>
게임기획자를 위한 정석 Class
</p>
<a href = "#">바로가기</a>
</li>
<li class = "box box2">
<h2>
<span>Game Programming</span>
게임 프로그래밍
</h2>
<p>
게임프로그래밍을 위한 정석 Class
</p>
<a href = "#">바로가기</a>
</li>
<li class = "box box3">
<h2>
<span>Game Artworks</span>
게임 원화
</h2>
<p>
게임 원화를 위한 정석 Class
</p>
<a href = "#">바로가기</a>
</li>
<li class = "box box4">
<h2>
<span>Progamer Coaching</span>
프로게이머 코칭
</h2>
<p>
프로게이머 데뷔 Class
</p>
<a href = "#">바로가기</a>
</li>
<!--############################################-->
<li class = "box box5">
<h2>
<span>AR/VR</span>
AR/VR
</h2>
<p>
증강현실/가상현실 Class
</p>
<a href = "#">바로가기</a>
</li>
<li class = "box box6">
<h2>
<span>Block Chain</span>
블록체인
</h2>
<p>
블록체인 Class <br><br>
</p>
<a href = "#">바로가기</a>
</li>
<li class = "box box7 ">
<h3>
공지사항
</h3>
<h5> -
<a href = "#">- 3월 블록체인반 모집 임박</a>
<dd>03-03</dd> -> dd 는 단일로 사용하면 x dd->ul,li 같은 것 d1 >dd 이렇게 사용해야함.
차라리
<dl> dl크기가 300 px이다
<dt></dt> 200px; text-align:left float:left
<dt></dt> 100px; text-align:right
</dl>
-> 장점 영역 줄일수 있음.
<ul>
<li>
<span class ="notice_subject"></span>
<span class ="notic_date"></span>
</li>
</ul>
</h5>
<h5>
<a href = "#">- 4월 VR/AR반 모집 안내</a>
<dd>03-03</dd>
</h5>
<h5>
<a href = "#">- 4월 게임 프로그래밍반 모집</a>
<dd>03-03</dd>
</h5>
<h5>
<a href = "#">- 2월 기획반 모집 마감안내!</a>
<dd>03-02</dd>
</h5>
</li>
<li class = "box box8 ">
<h3>
상담/문의
</h3>
<p>
<img src="./images/customer_tel.png"></p>
<img src="images/customer_kakao.png">
<button type = "button" class ="btn" >
<img src="images/customer_kakao_btn.png">
</button>
</li>
버튼 넣을 필요는 없음 img 태그는 인라인임. display:inline-block 을 줌. 이미지는 block형태로 만들어서 주는게 나음.
이미지 넣을 땐 block으로 ㅂ꿔서 하는게 좋음 text-inline? 도 가능
</ul>
</div>
</div>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
ul,li{
list-style:none;
}
#wrap{
width:100%
}
#header{
width:1200px;
height:100px;
margin:0 auto;
}
#logo{
margin:20px 0 0 0;
float:left;
}
#gnb{
float:right;
}
#gnb>ul>li{
float:left;
display:inline-block;
}
#gnb>ul>li>a{
display:inline-block;
width:180px;
margin:40px 0;
font-weight:bold;
font-size:19px;
color:#004385}
/*##############################*/
#visual{
height:500px;
}
#container{
width:1200px;
margin:0 auto;
height:200px;
}
.big_box{
width:50%;
float:left;
}
.box{
width:50%;
height:230px;
border:1px solid #ececec;
box-sizing:border-box;
float:left;
padding:20px;
}
.box>h2{
font-size:23px;
color:#2d2d2d;
}
.box>h3{
color:#2d2d2d;
}
.box>h2>span{
font-size:12px;
display:block;
color:#4689e1;
}
.box>p{
width:50%;
margin:40px 0 0 0;
font-size:13px;
}
.box>a{
display:block;
margin:30px 0 0 0;
width:100px;
height:30px;
background:#6da6ea;
color:white ;
border-radius: 15px;
line-height: 30px;
text-align: center;
}
.box1{
background:url('../../images/main_con_ic_01.png') no-repeat;
background-position:180px 100px;
}
.box2{
background:url('../../images/main_con_ic_02.png') no-repeat;
background-position:180px 100px;
}
.box3{
background:url('../../images/main_con_ic_04.png') no-repeat;
background-position:180px 100px;
}
.box4{
background:url('../../images/main_con_ic_05.png') no-repeat;
background-position:180px 100px;
}
.box5{
background:url('../../images/main_con_ic_06.jpg') no-repeat;
background-position:180px 100px;
}
.box6{
background:url('../../images/main_con_ic_07.jpg') no-repeat;
background-position:180px 100px;
}
.box>h5{
color:grey;
height:10px;
margin-top:30px;
float:left;
font-size:12px;
width:90%;
}
.box>h5>dd{
float:right;
font-size:12px;
}
a:link{
text-decoration:none;
}
.btn{
border:white;
margin-left: 65px;
}
.box8>h3{
margin-bottom:0px;
height:10px;
}
a:visited{
text-decoration:none;
color: grey;
}
.box7>h5>a{
color:grey;
}
.box8>p{
margin-bottom:30px;
}
==================================거의 완성 ==============================
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="./commons/index3.css">
</head>
<body>
<div id = "wrap">
<div id = "header">
<h1 id ="logo">
<a href = "#"><img src = "./images/logo_new_2018.png"/></a>
</h1>
<div id ="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/1615168446_78847_1.png">
</div>
<div id = "container">
<ul class = "big_box">
<li class = "box box1">
<h2>
<span>Game Architecture</span>
게임 기획
</h2>
<p>
게임기획자를 위한 정석 Class
</p>
<a href = "#">바로가기</a>
</li>
<li class = "box box2">
<h2>
<span>Game Programming</span>
게임 프로그래밍
</h2>
<p>
게임프로그래밍을 위한 정석 Class
</p>
<a href = "#">바로가기</a>
</li>
<li class = "box box3">
<h2>
<span>Game Artworks</span>
게임 원화
</h2>
<p>
게임 원화를 위한 정석 Class
</p>
<a href = "#">바로가기</a>
</li>
<li class = "box box4">
<h2>
<span>Progamer Coaching</span>
프로게이머 코칭
</h2>
<p>
프로게이머 데뷔 Class
</p>
<a href = "#">바로가기</a>
</li>
<!--############################################-->
<li class = "box box5">
<h2>
<span>AR/VR</span>
AR/VR
</h2>
<p>
증강현실/가상현실 Class
</p>
<a href = "#">바로가기</a>
</li>
<li class = "box box6">
<h2>
<span>Block Chain</span>
블록체인
</h2>
<p>
블록체인 Class <br><br>
</p>
<a href = "#">바로가기</a>
</li>
<li class = "box box7 ">
<h3>
공지사항
</h3>
<h5>
<a href = "#">- 3월 블록체인반 모집 임박</a>
<dd>03-03</dd>
</h5>
<h5>
<a href = "#">- 4월 VR/AR반 모집 안내</a>
<dd>03-03</dd>
</h5>
<h5>
<a href = "#">- 4월 게임 프로그래밍반 모집</a>
<dd>03-03</dd>
</h5>
<h5>
<a href = "#">- 2월 기획반 모집 마감안내!</a>
<dd>03-02</dd>
</h5>
</li>
<li class = "box box8 ">
<h3>
상담/문의
</h3>
<p>
<img src="./images/customer_tel.png"></p>
<img src="images/customer_kakao.png">
<button type = "button" class ="btn" >
<img src="images/customer_kakao_btn.png">
</button>
</li>
</ul>
<!--############################################-->
<div id="big_box2">
<div id="box9">
<h3>
취업자인터뷰
<span><a href=""><img src="images/btn_more.gif"></a></span>
</h3>
<span>
<img src="images/1546844612_13784_2.png">
</span>
<p><a href="#">퀘*트게임즈 김대혁, 문희진" 정말 발전하고자 하는
열정적인 마음을 가지고 스스로 노력하고자 하는 사람이
왔으면 좋겠습니다. " 드루와 던전 퀘*트게임즈에 ...</a>
</p>
<p>
퀘*트게임즈<br>
김대혁, 문희진 훈련생
</p>
</div>
<div id="box10">
<h3>
수강후기
<span><a href=""><img src="images/btn_more.gif"></a></span>
</h3>
<ul class="review">
<li>
<p>슬기로운 경일생활</p>
<span>aaa</span>
</li>
<li>
a
</li>
<li>
a
</li>
<li>
a
</li>
<li>
a
</li>
<li>
a
</li>
</ul>
</div>
<div id="box11">
<h3>
포트폴리오
<span><a href=""><img src="images/btn_more.gif"></a></span>
</h3>
<iframe width="560" height="420" 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="big_box3">
<div class="boox box12">
<h2>
<span>Game Architecture</span>
게임 기획
</h2>
<a href="#"><img src="images/content_1.jpg"style="width:348px;height:198px;"></a>
<p>
<span>제2회 경일게임아카데미 ★시네마 데이★</span>
<a href="#">- 게임 AR/VR 정규 과정</a><br><br>
<a href="#">- KDT 혁신교육기관</a><br><br>
<a href="#">- 게임개발자가 되는 가장 확실한 솔루션!</a>
</p>
</div>
<div class="boox box13">
<h2>
<span>Useful Information</span>
유용정보
</h2>
<a href="#"><img src="images/content_2.jpg"style="width:348px;height:198px;"></a>
<p>
<span>NC소프트 신화섭 기획자 인터뷰</span>
<a href="#">- 서드도어 이성재 기획자 인터뷰</a><br><br>
<a href="#">- 1부) 블록체인? 그거 비트코인 아니야?</a><br><br>
<a href="#">- 경일인들의 놀이터 각종 꿀팁이 가능한 카페가 있다!</a>
</p>
</div>
<div class="boox box14">
<h2>
<span>Column</span>
교수칼럼
</h2>
<a href="#"><img src="images/content_3.png"style="width:348px;height:198px;"></a>
<p>
<span>게임프로그래머 취업트렌드를 알려주마</span>
<a href="#">- 왜 블록체인인가? (박재덕 대표)</a><br><br>
<a href="#">- 멘토링별 학생 유형과 개발자의 자세 (권순우 멘토)</a><br><br>
<a href="#">- "학생이 미래다" 게임원화 이진호교수님 인터뷰</a>
</p>
</div>
</div>
<div class="footer">
<div id="footer2">
<div id="gnb2">
<ul>
<li><a href="" class="mt0">학교소개</a></li>
<li><a href="">교육과정</a></li>
<li><a href="">공지사항</a></li>
<li><a href="">상담신청</a></li>
<li class="last"><a href="" >개인정보처리방침</a></li>
</ul>
</div>
<div id = "logo2">
<p><img src="./images/logo_bottom_2018.png"></p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
ul,li{
list-style:none;
}
#wrap{
width:100%
}
#header{
width:1200px;
height:100px;
margin:0 auto;
}
#logo{
margin:20px 0 0 0;
float:left;
}
#gnb{
float:right;
}
#gnb>ul>li{
float:left;
display:inline-block;
}
#gnb>ul>li>a{
display:inline-block;
width:180px;
margin:40px 0;
font-weight:bold;
font-size:19px;
color:#004385}
/*##############################*/
#visual{
height:500px;
}
#container{
width:1200px;
margin:30px auto 0 auto;
height:920px;
}
.big_box{
width:50%;
float:left;
}
.box{
width:50%;
height:230px;
border:1px solid #ececec;
box-sizing:border-box;
float:left;
padding:20px;
}
.box>h2{
font-size:23px;
color:#2d2d2d;
}
.box>h3{
color:#2d2d2d;
}
.box>h2>span{
font-size:12px;
display:block;
color:#4689e1;
}
.box>p{
width:50%;
margin:40px 0 0 0;
font-size:13px;
}
.box>a{
display:block;
margin:30px 0 0 0;
width:100px;
height:30px;
background:#6da6ea;
color:white ;
border-radius: 15px;
line-height: 30px;
text-align: center;
}
.box1{
background:url('../../images/main_con_ic_01.png') no-repeat;
background-position:180px 100px;
}
.box2{
background:url('../../images/main_con_ic_02.png') no-repeat;
background-position:180px 100px;
}
.box3{
background:url('../../images/main_con_ic_04.png') no-repeat;
background-position:180px 100px;
}
.box4{
background:url('../../images/main_con_ic_05.png') no-repeat;
background-position:180px 100px;
}
.box5{
background:url('../../images/main_con_ic_06.jpg') no-repeat;
background-position:180px 100px;
}
.box6{
background:url('../../images/main_con_ic_07.jpg') no-repeat;
background-position:180px 100px;
}
.box>h5{
color:grey;
height:10px;
margin-top:30px;
float:left;
font-size:12px;
width:90%;
}
.box>h5>dd{
float:right;
font-size:12px;
}
a:link{
text-decoration:none;
}
.btn{
border:white;
margin-left: 65px;
}
.box8>h3{
margin-bottom:0px;
height:10px;
}
a:visited{
text-decoration:none;
color: grey;
}
.box7>h5>a{
color:grey;
}
.box8>p{
margin-bottom:30px;
}
#big_box2{
width: 50%;
display:inline-block;
}
#box9,#box10,#box11{
border:1px solid #ececec;
box-sizing:border-box;
padding:20px;
}
#box9{
width:50%;
float:left;
height:415px;
}
#box10{
width:50%;
float:left;
height:415px;
background-color: #fafafa;
}
#box11{
width:100%;
height:505px;
float:left;
}
#box9>span{
border:1px solid #ececec;
display:block;
margin-top: 20px;
}
#box9>p{
text-align:center;
margin-top: 20px;
font-size:12px;
color:gray;
}
#box9>p>a{
color:gray;
}
#box9>h3>span{
float:right;
}
.review{
margin-top: 20px;
}
.review>li{
width:260px;
height:45px;
background-color: #fff;
margin: 5px auto 5px auto;
border: 1px solid #ececec;
}
#box10>h3>span{
float:right;
}
.review>li>p{
float: left;
display: block;
}
.review>li>span{
float: right;
display: block;
}
#box11>h3>span{
float:right;
}
#box11>iframe{
margin-top: 20px;
}
#big_box3{
width:1200px;
height: 510px;
margin: 0 auto;
}
.boox{
width:390px;
height:430px;
border: 1px solid #ececec;
float:left;
margin:30px 0 0 0;
padding:20px;
box-sizing: border-box;
}
.box12{
background-color: #fafafa;
background:url('../images/main_bbs_ic_01.png') no-repeat;
background-position: 300px 12px;
}
.box13{
margin:30px 15px 0 15px;
background:url('../images/main_bbs_ic_02.png') no-repeat;
background-position: 300px 12px;
}
.box14{
background-color: #fafafa;
background:url('../images/main_bbs_ic_03.png') no-repeat;
background-position: 300px 12px;
}
.boox>h2>span{
font-size:12px;
display:block;
color:#4689e1;
}
.boox>h2{
margin-bottom:20px;
}
.boox>p{
color:#666;
font-size:12px;
}
.boox>p>span{
display:block;
text-align:center;
margin: 10px auto 20px auto;
}
.footer{
width: 100%;
height: 200px;
padding:20px 0;
margin-top:30px;
background-color: #323232;
}
#footer2{
margin: 0 auto;
width:1200px;
height:130px;
}
#gnb2{
float:left;
display:block;
}
#gnb2>ul>li{
float:left;
display:inline-block;
}
#gnb2>ul>li>a{
display:inline-block;
font-size:12px;
padding:0 10px;
margin-left:18px;
font-weight:bold;
}
#gnb2 > ul > li > a:hover{ /* a 태그에 마우스가 올라갈떄 어떻게 css가 바꿀거냐?*/
color:#fff;
}
#gnb2 > ul > li:after {
content:" | ";
color:#555;
font-size:11px;
}
.mt-l5{
margin-left:5px !important;
}
#gnb2 > ul > li:last-child:after{
content:"";
}
#logo2{
float:left;
}
질문 :
1. border-right:1px solid #ececec; solid ?
느낀점 : 하루 하루 더 어렵워...........................................
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| 20210320 Javascript 기초 예습 (0) | 2021.03.21 |
|---|---|
| [6일차]20210319 프로그래머스 웹사이트 레이아웃 (0) | 2021.03.19 |
| [5일차]20210318 Position:absolute; Postition:relative; Position:fixed (0) | 2021.03.18 |
| 20210316 3일차 웹사이트 container/box/ul/li /class etc. (0) | 2021.03.16 |
| 20210316 2일차 html, css 홈페이지 기본 틀 만들기 (0) | 2021.03.15 |
