2020.03.16
블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 셋째날_오후
오후에는 경일게임아카데미 사이트 배너 밑에 있는 내용들을 만들어보기 시작했다.
빨간색 박스가 이번에 만든고
교수님이 작은 상자들일수록 만드는게 복잡하다 하셨는데 진짜 그랬다.
위에 로고~배너까지 만드는데 사용한 코드보다 저 쪼매난 네모들 정보 적고 효과 주는데 더 긴 길이의 코드들이 사용됐음
<!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="./commons/css/index.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo">
<a href="#"><img src="http://www.kiweb.or.kr/images/main_new/logo_new_2018.png" alt=""></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="http://www.kiweb.or.kr/nBoard/upload/file/main/1615168446_78847_1.png" alt="">
</div>
<div id="container">
<ul class="big_box">
<li class="box box1">
<h2>
<span>Game Architecture</span>
"게임 기획"
</h2>
<p>
"게임기획자를 위한 정석 Class"
</p>
<a href="http://www.kiweb.or.kr/curriculum/curriculum.html?mode=view&tname=curriculum&idx=3144&page=1&keyfield=&keystring=" class="btn_go">바로가기</a>
</li>
<li class="box box2">
<h2>
<span>Game Programming</span>
"게임 프로그래밍"
</h2>
<p>
"게임 프로그래밍을 위한 정석 Class"
</p>
<a href="http://www.kiweb.or.kr/curriculum/curriculum.html?mode=view&tname=curriculum&idx=2980&page=1&keyfield=&keystring=" class="btn_go">바로가기</a>
</li>
<li class="box box3">
<h2>
<span>Game Artworks</span>
"게임 원화"
</h2>
<p>
"게임 원화를 위한 정석 Class"
</p>
<a href="http://www.kiweb.or.kr/curriculum/curriculum.html?mode=view&tname=curriculum&idx=5176&page=1&keyfield=&keystring=" class="btn_go">바로가기</a>
</li>
<li class="box box4">
<h2>
<span>Programer Coaching</span>
"프로게이머 코칭"
</h2>
<p>
"프로게이머 데뷔 Class"
</p>
<a href="http://www.kiweb.or.kr/curriculum/curriculum.html?mode=view&tname=curriculum&idx=3052&page=1&keyfield=&keystring=" class="btn_go">바로가기</a>
</li>
</ul>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>/*css style sheet*/
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
#wrap{
width:100%;
}
#header{
width: 1200px;
height: 106px;
margin:0 auto;
}
#logo{
display:inline-block;
margin: 20px 0 0 0;
}
#gnb{
float:right
}
#gnb > ul > li{
float:left;
text-align: center;
}
#gnb > ul > li > a{
display:inline-block;
color:#004385;
font-size: 19px;
font-weight: bold;
margin: 40px 0;
width:180px;
}
#visual{
width: 1920px;
margin: 0 auto;
height:500px;
}
#container{
width: 1200px;
margin: 0 auto;
}
.big_box{
margin-top: 30px;
width: 600px;
}
.box{
box-sizing:border-box;
width: 300px;
height: 230px;
padding: 20px;
float:left;
border:1px solid #ececec;
}
.box1{
background:url('../../kkk/image1.png') no-repeat;
background-position: 180px 100px;
}
.box2{
background:url('../../kkk/image2.png') no-repeat;
background-position: 180px 100px;
}
.box3{
background:url('../../kkk/image3.png') no-repeat;
background-position: 180px 100px;
}
.box4{
background:url('../../kkk/image4.png') no-repeat;
background-position: 180px 100px;
}
.box > h2{
font-size:23px;
color:#2d2d2d;
}
.box > h2 > span{
display:block;
font-size:12px;
color:#4689e1;
}
.box > p{
display:block;
width:50%;
margin:30px 0 0 0;
line-height: 20px;
font-size: 12px;
}
.box > a{
display: block;
width: 100px;
height: 30px;
margin-top: 40px;
background: #81b4f2;
border-radius: 15px;
line-height: 32px;
font-size: 14px;
color: #fff;
text-align: center;
}html에서 인라인 형태로 입력되는 span을 사용해서 적은 정보를 굳이 css에서 display를 사용하여 블록으로 바꾸는 이유유를 아직은 잘 모르겠지만....원래 다들 그렇게 사용하는 느낌....이라고 하셨당....
www.daleseo.com/css-display-inline-block/
[CSS] display 속성: inline, block, inline-block
Engineering Blog by Dale Seo
www.daleseo.com
요분 블로그 설명이 잘 되어 있어서 좋당
나도 나중에 용어에 대한 설명은 따로 정리해서 조금씩 올려야겠당.....
'HTML+CSS' 카테고리의 다른 글
| [HTML/CSS] 경일게임아카데미 사이트 거의 완성 (0) | 2021.03.18 |
|---|---|
| [CSS] position (relative, absolute, fixed) 용어정리 (1) | 2021.03.18 |
| [HTML/CSS] 경일게임 아카데미 사이트 상단페이지 만들기 반복중 (0) | 2021.03.16 |
| [HTML/CSS] 사이트 로고 및 메뉴 만들기 (0) | 2021.03.15 |
| [HTML] 기초개념 복습 및 class, id (0) | 2021.03.15 |