가운데 정렬 방법
margin: 0 auto; = margin 0 auto; 0 auto;
a를 넣는다는건 링크를 걸겠다는 것
CSS 궁금한거
a 를 쓰면 -> a 전체 가리키ㅌ는거
#wrap -> id wrap의 경로 (id 찾아가는거)
.wrap -> class wrap 의 경로
ul,li -> 모든 ul,li
선택자 ?
<!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>
<style>
div{
background:red; -> body tap에 있는 모든 div 에다가 red를 넣겠다.
}
</style>
</head>
<body>
<div id="header">
경일아카데미1
</div>
<div id="footer">
경일아카데미2
</div>
</body>
</html>
#header 만 해보기
<!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>
<style>
#header{
background:red;
}
</style>
</head>
<body>
<div id="header">
경일아카데미1
</div>
<div id="footer">
경일아카데미2
</div>
</body>
</html>
============================================================================
class안에는 복수의 class 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<style>
#big_box{
width:600px;
}
.box{
width:300px;
height:300px;
}
.box1{
background:red;
}
.box2{
background:yellow;
}
.box3{
background:blue;
}
.box4{
background:#000;
}
</style>
</head>
<body>
<div id = " big_box">
<div class = "box box1">1</div>
<div class = "box box2">2</div>
<div class = "box box3">3</div>
<div class = "box box4">4</div>
</div>
</body>
</html>
** box box1 둘다 따로 가능
style 에 .box
.box1
report : 내 자신x 내 아래 애가 이동
노랑색을 옆으로 옮길려면 red 이동
큰박스를 먼저 만들고 작은 박스 하나하나 이동
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<style>
#big_box{
width:600px;
background:#009123
}
.box{
width:300px;
height:300px;
}
.box1{
background:red;
float:left;
}
.box2{
background:yellow;
}
.box3{
background:blue;
}
.box4{
background:#000;
color:#fff
}
</style>
</head>
<body>
<div id = " big_box">
<div class = "box box1">1</div>
<div class = "box box2">2</div>
<div class = "box box3">3</div>
<div class = "box box4">4</div>
</div>
</body>
</html>
</head>
<body>
<ul id = " big_box">
<li class = "box box1">1</div>
<li class = "box box2">2</div>
<li class = "box box3">3</div>
<li class = "box box4">4</div>
</div>
</body>
</html>
ul li로 바꿔
div도 작동 하고 ulli도 작동 -> ul li 가 더 깔끔. (가독성, 보기에)
네이버 등 무언가 감싸고 안에 작은 애들있을 때 ul li를 많이 씀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<style>
ul,li{
list-style:none;
}
#big_box{
width:600px;
background:#009123
}
.box{
width:300px;
height:300px;
float:left;
}
.box1{
background:red;
float:left;
}
.box2{
background:yellow;
}
.box3{
background:blue;
}
.box4{
background:#000;
color:#fff
}
</style>
</head>
<body>
<ul id = " big_box">
<li class = "box box1">1</div>
<li class = "box box2">2</div>
<li class = "box box3">3</div>
<li class = "box box4">4</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{
float: left;
margin: 20px 0 0 0;
}
#gnb{
float: right;
}
#gnb>ul>li{
display: inline-block;
float: left;
}
#gnb>ul>li>a{
font-size: 19px;
font-weight: bold;
width: 180px;
margin: 40px 0;
color: #004385;
display: inline-block;
}
#visual{
height:500px;
}
#container{
width:1200px;
background:red;
margin:0 auto;
}
.big_box{width:600px;}
.box{width:300px; height:300px; float:left;}
.box1{background:red;}
.box2{background:blue;}
.box3{background:yellow;}
.box4{background:yellowgreen;}
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 = "./commons/css/index.css">
</head>
<body>
<div id = "wrap">
<div id = "header">
<h1 id ="logo">
<a href = "#"><img src = "./commons/images/logo.png"></a>
</h1>
<div id = "gnb">
<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 = "visual">
<img src = "./commons/images/visual1.png">
</div>
<div id = "container">
<ul class ="big_box">
<li class="box box1"></li>
<li class="box box2"></li>
<li class="box box3"></li>
<li class="box box4"></li>
</ul>
</div>
</div>
</body>
</html>
경일사이트 가서 f12 분석쓰
padding? 이 뭔가
도형? 이 시작하는 지점을 정해줌
<!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>
<style>
*{
margin:0;
padding:0;
}
#box{
background:red;
width:300px; /* 300-40 230-40 계산하기*/
height:230px;
padding:20px;
}
#box2{
width:200px;
height:100px;
background:yellow;
}
</style>
</head>
<body>
<vid id = "box">
<div id = "box2"></div>
</vid>
</body>
</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 = "./commons/css/index.css">
</head>
<body>
<div id = "wrap">
<div id = "header">
<h1 id = "logo">
<a href = "#"><img src = "./commons/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 = "./commons/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"></li>
<li class = "box box3"></li>
<li class = "box box4"></li>
</ul>
</div>
</div>
</body>
</html>
이미지 생성하기
위치 이동하는 방법
.box1{
background:url('../../images/main_con_ic_01.png') right bottom no-repeat;
background-position:10px 10px; /* -<이걸 쓰면 right, bottom 을 사용 못함 -> 그래서 right, bottom을 삭제하고 px 로 조절해야함 */
} /* */
.box2{background:blue;}
.box3{background:yellow;}
.box4{background:yellowgreen;}
.box1{
background:url('../../images/main_con_ic_01.png') no-repeat;
background-position:180px 100px; /* -<이걸 쓰면 right, bottom 을 사용 못함 -> 그래서 right, bottom을 삭제하고 px 로 조절해야함 */
} /* */
.box2{background:blue;}
.box3{background:yellow;}
.box4{background:yellowgreen;}
이렇게
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{
float: left;
margin: 20px 0 0 0;
}
#gnb{
float: right;
}
#gnb>ul>li{
display: inline-block;
float: left;
}
#gnb>ul>li>a{
font-size: 19px;
font-weight: bold;
width: 180px;
margin: 40px 0;
color: #004385;
display: inline-block;
}
#visual{
height:500px;
}
#container{
width:1200px;
background:red;
margin:0 auto;
}
.big_box{width:600px;}
.box{ /* width -> 260 height 230-40=190 border값때문에 1px 추가됨 302px -> 258 height 188px */
width:258px;
height:188px;
float:left;
padding:20px;
border:1px solid #ececec;
}
.box1{
background:url('../images/main_con_ic_01.png') no-repeat;
background-position:180px 100px; /* -<이걸 쓰면 right, bottom 을 사용 못함 -> 그래서 right, bottom을 삭제하고 px 로 조절해야함 */
}
.box2{background:blue;}
.box3{background:yellow;}
.box4{background:yellowgreen;}
.box > h2{
font-size:23px;
color:#2d2d2d;
}
.box > h2 > span{
display:block;
font-size:12px;
color:#4689e1
}
.box > p{
display:block;
width:50%;
margin-top:30px; /* margin: 30 0 0 0; 와 같음 */
line-height:20px;
}
.box >a{
border-radius:15px;
line-height:32px;
font-size:14px;
width:100px;
height:30px;
margin:40px 0 0 0;
display:block;
background:#81b4f2;
color:#fff;
text-align:center;
}
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 = "./commons/css/index.css">
</head>
<body>
<div id = "wrap">
<div id = "header">
<h1 id = "logo">
<a href = "#"><img src = "./commons/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 = "./commons/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"></li>
<li class = "box box3"></li>
<li class = "box box4"></li>
</ul>
</div>
</div>
</body>
</html>
CSS는 작을 수록 어려움 큼지막할 수록 쉬움
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{
float: left;
margin: 20px 0 0 0;
}
#gnb{
float: right;
}
#gnb>ul>li{
display: inline-block;
float: left;
}
#gnb>ul>li>a{
font-size: 19px;
font-weight: bold;
width: 180px;
margin: 40px 0;
color: #004385;
display: inline-block;
}
/* 여기서부터 오늘 배운 내용 */
#visual{
height:500px;
}
#container{
width:1200px;
background:red;
margin:0 auto;
}
.big_box{width:600px;}
.box{ /* width -> 260 height 230-40=190 border값때문에 1px 추가됨 302px -> 258 height 188px */
width:258px; /*padding값 + border값을 뺌*/
height:188px;
float:left;
padding:20px;
border:1px solid #ececec;
}
.box1{
background:url('../images/main_con_ic_01.png') no-repeat;
background-position:180px 100px; /* -<이걸 쓰면 right, bottom 을 사용 못함 -> 그래서 right, bottom을 삭제하고 px 로 조절해야함 */
}
.box2{background:blue;}
.box3{background:yellow;}
.box4{background:yellowgreen;}
.box > h2{
font-size:23px;
color:#2d2d2d;
}
.box > h2 > span{
display:block;
font-size:12px;
color:#4689e1
}
.box > p{
display:block;
width:50%;
margin-top:30px; /* margin: 30 0 0 0; 와 같음 */
line-height:20px;
}
.box >a{ /* 이게 버튼임 */
display:block; /*여기에 block으로 바꿔서 넓이줌?*/
width:100px;
height:30px;
margin:40px 0 0 0;
background:#81b4f2;
border-radius:15px; /* explore 구버젼 작동x~ 둥글게 만듬 px 크기에 따라 보통 높이의 반값이면 둥글~*/
line-height:32px; /*위에 공간을 늘림 */
font-size:14px;
color:#fff;
text-align:center; /*폰트 정렬을 가운데 */
}
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 = "./commons/css/index.css">
</head>
<body>
<div id = "wrap">
<div id = "header">
<h1 id = "logo">
<a href = "#"><img src = "./commons/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 = "./commons/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"></li>
<li class = "box box3"></li>
<li class = "box box4"></li>
</ul>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------
box1~4 이유 : background 를 각각 다르게 만들기 위해
아이콘? 그림 넣기
웹사이트 f12
*{
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{
float: left;
margin: 20px 0 0 0;
}
#gnb{
float: right;
}
#gnb>ul>li{
display: inline-block;
float: left;
}
#gnb>ul>li>a{
font-size: 19px;
font-weight: bold;
width: 180px;
margin: 40px 0;
color: #004385;
display: inline-block;
}
/* 여기서부터 오늘 배운 내용 */
#visual{
height:500px;
}
#container{
width:1200px;
background:red;
margin:0 auto;
}
.big_box{width:600px;}
.box{ /* width -> 260 height 230-40=190 border값때문에 1px 추가됨 302px -> 258 height 188px */
width:258px; /*padding값 + border값을 뺌*/
height:188px;
float:left;
padding:20px;
border:1px solid #ececec;
}
.box1{
background:url('../images/main_con_ic_01.png') no-repeat;
background-position:180px 100px; /* -<이걸 쓰면 right, bottom 을 사용 못함 -> 그래서 right, bottom을 삭제하고 px 로 조절해야함 */
} /* 180 - x , 100 - y 축 */
.box2{background:blue;}
.box3{background:yellow;}
.box4{background:yellowgreen;}
.box > h2{
font-size:23px;
color:#2d2d2d;
}
.box > h2 > span{
display:block;
font-size:12px;
color:#4689e1
}
.box > p{
display:block;
width:50%;
margin-top:30px; /* margin: 30 0 0 0; 와 같음 */
line-height:20px;
}
.box >a{ /* 이게 버튼임 */
display:block; /*여기에 block으로 바꿔서 넓이줌?*/
width:100px;
height:30px;
margin:40px 0 0 0;
background:#81b4f2;
border-radius:15px; /* explore 구버젼 작동x~ 둥글게 만듬 px 크기에 따라 보통 높이의 반값이면 둥글~*/
line-height:32px; /*위에 공간을 늘림 */
font-size:14px;
color:#fff;
text-align:center; /*폰트 정렬을 가운데 */
}
*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{
float: left;
margin: 20px 0 0 0;
}
#gnb{
float: right;
}
#gnb>ul>li{
display: inline-block;
float: left;
}
#gnb>ul>li>a{
font-size: 19px;
font-weight: bold;
width: 180px;
margin: 40px 0;
color: #004385;
display: inline-block;
}
/* 여기서부터 오늘 배운 내용 */
#visual{
height:500px;
}
#container{
width:1200px;
background:red;
margin:0 auto;
}
.big_box{width:600px;}
.box{ /* width -> 260 height 230-40=190 border값때문에 1px 추가됨 302px -> 258 height 188px */
width:258px; /*padding값 + border값을 뺌*/
height:188px;
float:left;
padding:20px;
border:1px solid #ececec;
}
.box1{
background:url('../images/main_con_ic_01.png') no-repeat;
background-position:180px 100px; /* -<이걸 쓰면 right, bottom 을 사용 못함 -> 그래서 right, bottom을 삭제하고 px 로 조절해야함 */
} /* 180 - x , 100 - y 축 */
.box2{
background:blue;
background:url('../images/main_con_ic_02.png') no-repeat;
background-position:180px 100px;
}
.box3{
background:yellow;
background:url('../images/main_con_ic_04.png') no-repeat;
background-position:180px 100px;
}
.box4{
background:yellowgreen;
background:url('../images/main_con_ic_05.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-top:30px; /* margin: 30 0 0 0; 와 같음 */
line-height:20px;
}
.box >a{ /* 이게 버튼임 */
display:block; /*여기에 block으로 바꿔서 넓이줌?*/
width:100px;
height:30px;
margin:40px 0 0 0;
background:#81b4f2;
border-radius:15px; /* explore 구버젼 작동x~ 둥글게 만듬 px 크기에 따라 보통 높이의 반값이면 둥글~*/
line-height:32px; /*위에 공간을 늘림 */
font-size:14px;
color:#fff;
text-align:center; /*폰트 정렬을 가운데 */
}
****위 -> 아래 구조
.box4{
background:yellowgreen;
background:url('../images/main_con_ic_05.png') no-repeat;
background-position:180px 100px;
}
이 경우 background:yellowgreen; 은 아래 같은 명령어에 무시됨
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 = "./commons/css/index.css">
</head>
<body>
<div id = "wrap">
<div id = "header">
<h1 id = "logo">
<a href = "#"><img src = "./commons/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 = "./commons/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>Programer coaching</span>
프로그래머 코칭
</h2>
<p>
프로그래머 데뷔 Class
</p>
<a pref = "#">바로가기</a>
</li>
</ul>
</div>
</div>
</body>
</html>
========================================================
.box{ /* width -> 260 height 230-40=190 border값때문에 1px 추가됨 302px -> 258 height 188px */
width:300px; /*padding값 + border값을 뺌*/
height:230px;
float:left;
padding:20px;
border:1px solid #ececec;
box-sizing:border-box; /* paading or border(1px) 써서 크기 커졋을때 말고 box-sizing하면 그냥 그 box안에서만되게 */
}
css 이렇게 바꾸기 (이렇게 하면 계산할 필요없음. )
==================================boxes 정리하기 border 줄 1px로 맞추기
*{
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{
float: left;
margin: 20px 0 0 0;
}
#gnb{
float: right;
}
#gnb>ul>li{
display: inline-block;
float: left;
}
#gnb>ul>li>a{
font-size: 19px;
font-weight: bold;
width: 180px;
margin: 40px 0;
color: #004385;
display: inline-block;
}
/* 여기서부터 오늘 배운 내용 */
#visual{
height:500px;
}
#container{
width:1200px;
background:red;
margin:0 auto;
}
.big_box{width:600px;}
.box{ /* width -> 260 height 230-40=190 border값때문에 1px 추가됨 302px -> 258 height 188px */
width:300px; /*padding값 + border값을 뺌*/
height:230px;
float:left;
padding:20px;
border:1px solid #161515;
box-sizing:border-box; /* paading or border(1px) 써서 크기 커졋을때 말고 box-sizing하면 그냥 그 box안에서만되게
border color도 바꿈 -> 검정으로 */
border-collapse:collapse; /* 칸 두개 같이있는 2px -> 1px로 고치기? -> 이럴 땐 padding값 안먹음 */
display:table-row; /* 얜 모지*/
}
.box1{
background:url('../images/main_con_ic_01.png') no-repeat;
background-position:180px 100px; /* -<이걸 쓰면 right, bottom 을 사용 못함 -> 그래서 right, bottom을 삭제하고 px 로 조절해야함 */
} /* 180 - x , 100 - y 축 */
.box2{
background:blue;
background:url('../images/main_con_ic_02.png') no-repeat;
background-position:180px 100px;
}
.box3{
background:yellow;
background:url('../images/main_con_ic_04.png') no-repeat;
background-position:180px 100px;
}
.box4{
background:yellowgreen;
background:url('../images/main_con_ic_05.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-top:30px; /* margin: 30 0 0 0; 와 같음 */
line-height:20px;
}
.box >a{ /* 이게 버튼임 */
display:block; /*여기에 block으로 바꿔서 넓이줌?*/
width:100px;
height:30px;
margin:40px 0 0 0;
background:#81b4f2;
border-radius:15px; /* explore 구버젼 작동x~ 둥글게 만듬 px 크기에 따라 보통 높이의 반값이면 둥글~*/
line-height:32px; /*위에 공간을 늘림 */
font-size:14px;
color:#fff;
text-align:center; /*폰트 정렬을 가운데 */
}
-> 읭 안됨.
내일 하기로함.
border-collapse:collapse; /* 칸 두개 같이있는 2px -> 1px로 고치기? -> 이럴 땐 padding값 안먹음 */
display:table-row; /* 얜 모지*/
요건 일단 보류
============================================================================
====================추가내용 ===========================
CSS 2번째 설명
/* container 안, bigbox 의 작은 4개 박스들 만들기 */
.big_box>li{
box-sizing:border-box;
border:1px solid #000;
float:left;
padding:20px;
width:300px;
height:230px;
background:red;
}
*** .big_box>li{} = .box{}
.big_box > li >h2{
font-size:25px;
color:#red;
}
/*span 블록형태로 바꾸기 */
.big_box >li>h2>span{
display:block;
font-size:12px;
}
/* p 부분 만들기 */
.big_box>li>p{
width:50%;
margin:20px 0 0 0;
font-size:12px;
color:#333;
}
/* 버튼 영역만들기 a는 인라인이라서 블록형태로 바꿔야함*/
.big_box>li>a{
idsplay:block;
width:100px;
height:30px;
background:blue;
color:#fff;
text-align:center;
line-height:30px;/*위에서 떨어뜨리기 */
border-radius:15px; /*동그랗게*/
margin:40px 0 0 0;
}
====================완=====성====================
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 = "./commons/css/index2.css">
</head>
<body>
<div id = "wrap">
<div id = "header">
<h1 id = "logo">
<a href = "#"><img src = "./commons/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 = "./commons/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 couaching</span>
프로게이머 코칭
</h2>
<p>
프로게이머 데뷔 Class
</p>
<a href = "#">바로가기</a>
</li>
</ul>
</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{
float: left;
margin: 20px 0 0 0;
}
#gnb{
float: right;
}
#gnb>ul>li{
display: inline-block;
float: left;
}
#gnb>ul>li>a{
font-size: 19px;
font-weight: bold;
width: 180px;
margin: 40px 0;
color: #004385;
display: inline-block;
}
/* #################################################*/
#visual{
height:500px;
}
#container{
width:1200px;
background:red;
margin:0 auto;
}
.big_box{
width:600px;
}
.box{
width:300px;
height:230px;
float:left;
padding:20px;
border:1px solid #ececec;
box-sizing:border-box;
}
/*
.big_box>li{
box-sizing:border-box;
border:1px solid #000;
float:left;
padding:20px;
width:300px;
height:230px;
background:red;
}
이랑 위랑 똑같? */
.box>h2{
font-size:23px;
color:#2d2d2d;
}
.box>h2>span{
font-size:12px;
color:#4689e1;
display:block;
}
.box > p{
display:block;
width:50%;
margin-top:30px;
line-height:20px;
font-size:12px;
height:40px;
}
.box>a{
display:block;
width:100px;
height:30px;
background:#81b4f2;
border-radius:15px;
margin:40px 0 0 0;
line-height:32px;
font-size:14px;
color:#fff;
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;
}
질문 : 1. css에서 # 있고 없고의 차이? ok
2. 웹사이트 만들때
#gnb> ul > li{
float:left;
}
left; right;
3.
#logo{
float:left;
margin:20px 0 0 0;
}
#gnb>ul>li>a{
font-size:19px;
font-weight:bold;
color:#004385;
display:inline-block; -> inline a 를 block으로 바꿔준다는 뜻?
margin:40px 0;
width:180px 답변 : (display:inline-block; 을 해야 width 넓이 지정이 가능함)
}
logo 마진은 4개, a는 2개? block & inline 차이???
4. 뭘 눌러야 ; 랑 같이 나오는지
5. line-height?
느낀점 : 더 어렵다.
'블록체인 기반 핀테크 및 응용 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 |
| [4일차] 20210317 웹사이트 화면만 html 로 60% 만들기 (4) | 2021.03.17 |
| 20210316 2일차 html, css 홈페이지 기본 틀 만들기 (0) | 2021.03.15 |
