HTML
a. 중간에 <div class="s_photo">가 빠져있어서 수정.
b. 두번째로 <div id="ad_photo">가 bigbox전에 닫히지 않아서 수정.
<!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>경일아케데미1</title>
<link rel="stylesheet" href="./quest.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo">
<a href="#"><img src="./images/logo.png"></a>
</h1>
<div id="menu">
<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="ad_photo">
<img src="./images/visual.png">
</div>
<div id="bigbox">
<div id="text">
<div class="s_photo">
<ul>
<li class="s_photo1 s_box">
<h2>
<span>Game Architecture</span>
게임기획
</h2>
<p>
게임기획자를 위한 정석 class
</p>
<a href="#">바로가기</a>
</li>
<li class="s_photo2 s_box">
<h2>
<span>Game programing</span>
게임 프로그래밍
</h2>
<p>
게임 프로그래밍을 위한 정석 class
</p>
<a href="#">바로가기</a>
</li>
<li class="s_photo3 s_box">
<h2>
<span>Game Artworks</span>
게임 원화
</h2>
<p>
게임원화 위한 정석 class
</p>
<a href="#">바로가기</a>
</li>
<li class="s_photo4 s_box">
<h2>
<span>Progamer Coaching</span>
프로게이머 코칭
</h2>
<p>
프로게이머 데뷔 class
</p>
<a href="#">바로가기</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
a. 학교소식이 5,4,3,2,1 이런 식으로 거꾸로 떴었음
>>menu > lu > li 에서 float:right; 가 아니라 float: left;를 사용하니까 해결됨 << 정확한 이유가 궁금함 menu에 float: left; 를 넣어놔서 왼쪽을 기준으로 오른쪽으로 펴져서 그런 것 같기도 하고,,,?
b. 로고가 너무 멀리 나가있어서 contents랑 width를 비슷하게 맞춰주니까 해결 됨
c. s_box > p 에 글자가 이미지를 넘어감 >> 글자에 width를 줘서 넘어갈 수 있는 선을 조정해줌
조정 전
.s_box > p {
margin-top: 30px;
font-size: 12px;
}결과
조정 후
.s_box > p {
margin-top: 30px;
font-size: 12px;
width: 110px;
}결과
COMPLETE HTML
*{margin:0; padding:0;}
ul,li{list-style: none;}
html{
overflow-y: auto;
overflow-x: hidden;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
#wrap{
width: 100%;
}
#header{
width: 1200px;
height: 110px;
margin: 0 auto;
}
#logo{
display: inline-block;
margin-top: 27px;
}
#menu{
float: right;
}
#menu > ul > li{
float: left;
padding: 40px;
}
#menu > ul > li > a{
color: #004385;
font-weight: bold;
font-size: 18px;
}
#ad_photo/*visual*/{
width: 1920px;
height: 500px;
margin: 0 auto;
}
#bigbox/*container*/{
width: 100%;
height: 600px;
margin-top: 30px;
}
#text/*contents*/{
width: 1200px;
height: 109px;
margin: 0 auto;
}
.s_photo/*con_notice*/{
width: 600px;
}
.s_photo > ul > li{
float: left;
width: 50%;
height: 220px;
padding: 3%;
box-sizing: border-box;
border: 1px solid #ececec;
}
.s_box > h2{
font-size: 22px;
}
.s_box > h2 > span {
display: block;
font-size: 12px;
color: skyblue;
}
.s_box > p {
margin-top: 30px;
font-size: 12px;
width: 110px;
}
.s_box > a{
display: inline-block;
margin-top: 40px;
border-radius: 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
background: skyblue;
height: 30px;
width: 100px;
line-height: 30px;
}
.s_photo1{
background:url("./images/main_con_ic_01.png") bottom right no-repeat;
background-position: 178px 109px;
}
.s_photo2{
background:url("./images/main_con_ic_02.png") bottom right no-repeat;
background-position: 178px 109px;
}
.s_photo3{
background:url("./images/main_con_ic_04.png") bottom right no-repeat;
background-position: 178px 109px;
}
.s_photo4{
background:url("./images/main_con_ic_05.png") bottom right no-repeat;
background-position: 178px 109px;
}'Code' 카테고리의 다른 글
| 2021.3.12 (Thu) - clone NAVER (0) | 2021.03.12 |
|---|---|
| 2021.3.12(Thu) - Practice (0) | 2021.03.12 |
| 2021.3.10 (Wed) - container/ contents (0) | 2021.03.10 |
| 2021.3.10-code {혼자 (0) | 2021.03.10 |
| 2021.3.9 (Tue) - Code (1) | 2021.03.09 |
