dukDukz
2021.03.11 경일 홈페이지_공동 코드 작성 본문
.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="./ex2.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo">
<a href="#"><img src="./img/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="./img/visual1.png">
</div>
<div id="container">
<div id="contents">
<div class="con_notice">
<ul>
<li class="con_notice1 con_item">
<h2>
<span>Game Architecture</span>
게임기획
</h2>
<p>
게임기획자를 위한 정석 class
</p>
<a href="#">바로가기</a>
</li>
<li class="con_notice2 con_item">
<h2>
<span>Game programing</span>
게임프로그래밍
</h2>
<p>
게임프로그래밍을 위한 정석 class
</p>
<a href="#">바로가기</a>
</li>
<li class="con_notice3 con_item">
<h2>
<span>Game Artworks</span>
게임 원화
</h2>
<p>
게임 원화를 위한 정석 class
</p>
<a href="#">바로가기</a>
</li>
<li class="con_notice4 con_item">
<h2>
<span>Programer Coaching</span>
프로그래머 코칭
</h2>
<p>
프로게이머 데뷔 class
</p>
<a href="#">바로가기</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
.css
*{margin:0; padding:0;}
html{
overflow-x: hidden;
overflow-y: auto;
}
ul,li {
list-style: none;
}
#wrap{
width:100%;
}
#header{
width:1600px;
height:110px;
margin: 0 auto;
background: red;
}
#logo{
float:left;
display:inline-block;
margin: 20px 0 0 0 ;
height: 100px;
width: 200px;
}
#gnb{
float:right;
}
#gnb > ul > li{
float:left;
padding:40px 0;
width:180px;
}
#gnb > ul> li > a {
color:#004385;
font-weight:bold;
font-size:19px;
text-align: center;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
/**********뒷 부분**********/
/*메인 사진*/
#visual{
margin: 0 auto;
width: 1920px;
height: 500px;
}
/*첫번째 박스*/
#container{
width:1200px;
height: 600px;
margin-top: 30px;
}
/**/
#contents{
width: 600px;
margin: 30px auto 0 auto; /*t r b l*/
}
/*Game Architecture*/
.con_item > h2 > span{
display: block; /*block 처리 해야 게임기획 부분이 아래로 배치 됨*/
font-size: 11px;
color:#333;
}
/*게임기획자를 위한 정석 class*/
.con_item > p{
font-size:11px;
margin-top:50px;
width: 130px; /*width 정해야 줄바꿈이 됨*/
}
/*바로가기*/
.con_item > 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;
}
/*각각의 네모 박스*/
.con_item{
float:left; /*상자가 아래로 배치됨*/
display: inline-block;
width:50%;
padding: 3%;
height:230px;
box-sizing: border-box; /*border로 선을 만들어줘서 상하로 1px씩 늘어나서 아래로 떨어짐 이거를 방지하기 위해서 씀*/
border:1px solid #ececec;
}
.con_notice1{
background:url("./img/main_con_ic_01.png") bottom right no-repeat;
background-position: 178px 109px;
}
.con_notice2{
background:url("./img/main_con_ic_02.png") bottom right no-repeat;
background-position: 178px 109px;
}
.con_notice3{
background:url("./img/main_con_ic_04.png") bottom right no-repeat;
background-position: 178px 109px;
}
.con_notice4{
background:url("./img/main_con_ic_05.png") bottom right no-repeat;
background-position: 178px 109px;
}
<발생한 문제들>
1. 로고 부분 가운데 정렬
2. 메인 사진 부분 크기보다 작게 width 설정해서 오른쪽으로 쏠리는 부분
3. 바로가기 부분 display: block; 설정 안해서 밑으로 안내려가고 크기도 이상함
4. 각각의 네모 박스에 float: left; 설정안해줘서 아래로 쭉 배치됨
float:left; /*상자가 아래로 배치됨*/
display: inline-block;
5. 각각 상자에 css 설정 .con_item에 공용으로 해야 하는 부분을 안해서 박스들이 깨짐
--> 크롬 개발자 모드에서 되어있는 부분 css확인하고 안되어 있는 부분 css확인해서 클래스 이름 다른거 확인
6. 상위박스 600px 하위 박스 50%로 지정해야 두 칸씩 먹고 들어감
#contents{
width: 600px;
}
.con_item{
float:left; /*상자가 아래로 배치됨*/
display: inline-block;
width:50%;
}
7. 회색 네모 상자 위치가 가운데로 지정됨 --> 왼쪽으로 옮기려면
박스들 크기를 잘못 지정함
/*첫번째 박스*/
#container{
width:100%; // 100%로 써줘야함
height: 200px;
margin-top: 30px;
/*width:1200px 이렇게 쓰면 XXXX
height:600px
*/
}
/**/
#contents{
width: 1200px; //이게 1200px
margin: 0 auto; /*t r b l*/ // 이걸 여기에 써야 네모 박스가 위치 고정됨
height: 100px;
}
.con_notice{
width: 600px;
}
* overflow
html{
overflow-x : ;
overflow-y : ;
}
화면에서 내용이 넘칠때
'웹 개발 > HTML 과 CSS' 카테고리의 다른 글
| 2021.03.16 회색 네모 박스 위치 조정 (0) | 2021.03.16 |
|---|---|
| 2021.03.15 경일 아카데미 홈페이지 만들기 (0) | 2021.03.15 |
| 2021.03.10 경일 홈페이지_ 뒷 부분 까지 작성 / 새로운 CSS (0) | 2021.03.10 |
| 2021.03.09 경일 홈페이지 앞 부분 안보고 작성해보기 (0) | 2021.03.09 |
| 2021.03.08 경일 홈페이지 앞 부분 작성 (0) | 2021.03.08 |
'웹 개발/HTML 과 CSS' Related Articles
more
