dukDukz
2021.03.16 회색 네모 박스 위치 조정 본문
네모칸 만드는 연습
1. 1200px 작업할 공간을 가운데로 정렬시키기
2. 안에 600px 작업 공간 하나 만들기
3. 300px짜리 li 를 4개 만들기
li 영역에 width height 주고 float: left; 주기
4. li에 padding이랑 border 선 그리고 border-box 해주기
5. html에서 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>네모연습</title>
<style>
*{margin: 0; padding: 0;}
ul, li{list-style: none;}
#container{
width: 1200px;
margin: 0 auto;
}
#contents{
width: 600px;
}
.box{
width: 300px;
height: 200px;
float: left;
padding: 20px;
border: 1px solid black;
box-sizing: border-box;
}
.box1{
background: green;
}
.box2{
background: red;
}
.box3{
background: yellow;
}
.box4{
background: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="contents">
<ul class="big_box">
<li class="box box1">aa</li>
<li class="box box2">bb</li>
<li class="box box3">cc</li>
<li class="box box4">dd</li>
</ul>
</div>
</div>
</body>
</html>
바로가기 버튼 만들기
<span><a href="#">바로가기</a></span>
span > a{
display: block; /*블락을 무조건 줘야함*/
width: 100px;
height: 30px;
color: white;
background: #81b4f2;
text-align: center;
border-radius: 15px;
line-height: 28px;
text-decoration: none;
}
ex3.html
<!--오늘 21.03.16 오후 수업시간에 한것-->
<!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="ex3.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo">
<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">
<img src="./img/visual1.png">
</div>
<div id="big_container">
<div id="container">
<ul class="big_box">
<li class="box box1">
<h2>
<span>Game Architecture</span>
게임기획
</h2>
<p>게임기획자를 위한 정석 Class</p>
<span><a href="#">바로가기</a></span>
</li>
<li class="box box2">
<h2>
<span>Game Programming</span>
게임프로그래밍
</h2>
<p>게임프로그래밍을 위한 정석 Class</p>
<span><a href="#">바로가기</a></span>
</li>
<li class="box box3">
<h2>
<span>Game Artworks</span>
게임 원화
</h2>
<p>게임원화를 위한 정석 Class</p>
<span><a href="#">바로가기</a></span>
</li>
<li class="box box4">
<h2>
<span>Progammer Coaching</span>
프로게이머 코칭
</h2>
<p>프로게이머 데뷔 Class</p>
<span><a href="#">바로가기</a></span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
ex3.css
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
html{
overflow-x: hidden;
overflow-y: auto;
}
#wrap{
width: 100%;
}
#header{
width: 1200px;
height: 100px;
margin: 0 auto;
}
#logo{
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;
}
#visual{
height: 500px;
margin: 0 auto;
width: 1920px;
}
/*******뒷 부분 회색 박스 부분 시작********/
#big_container{
width: 100%;
margin: 40px 0 0 0;
}
#container{
width: 1200px;
margin: 0 auto;
/*background: red;
height: 300px;*/ /*높이를 줘야 빨간 배경이 생김*/
}
.big_box{
width: 600px;
}
.box{
box-sizing: border-box;
width: 300px; /*300-40*/
height: 230px; /*-40*/
padding: 20px; /*상하 40 좌우 40 씩늘어남---- 시작점을 더 안쪽으로 변경 (0,0)에서 (2,2) 정도로*/
float: left;
border: 1px solid #ececec;
/*border-box 쓰면 300-40 = 260px 로 width를 줄 필요가 없다*/
}
.box1{
background: url('./img/main_con_ic_01.png') bottom right no-repeat;
background-position: 170px 105px;
}
.box2{
background: url('./img/main_con_ic_02.png') bottom right no-repeat;
background-position: 170px 105px;
}
.box3{
background: url('./img/main_con_ic_04.png') bottom right no-repeat;
background-position: 170px 105px;
}
.box4{
background: url('./img/main_con_ic_05.png') bottom right no-repeat;
background-position: 170px 105px;
}
.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: 10px;
}
.box >span>a {
display: block;
width: 100px;
height: 30px;
margin: 40px 0 0 0;
background: #81b4f2;
border-radius: 20px; /*height의 대략 반절 값 정도 주면 둥그래짐*/
line-height: 30px;
text-align: center;
font-size: 14px;
color: white;
text-decoration: none;
}
'웹 개발 > HTML 과 CSS' 카테고리의 다른 글
| 2021.03.19 쉽게 만드는 Programmers layout (0) | 2021.03.19 |
|---|---|
| 2021.03.18 프로그래머스 홈페이지 레이아웃 잡아보기 (0) | 2021.03.18 |
| 2021.03.15 경일 아카데미 홈페이지 만들기 (0) | 2021.03.15 |
| 2021.03.11 경일 홈페이지_공동 코드 작성 (0) | 2021.03.11 |
| 2021.03.10 경일 홈페이지_ 뒷 부분 까지 작성 / 새로운 CSS (0) | 2021.03.10 |
'웹 개발/HTML 과 CSS' Related Articles
more
