달라진점 A- contents에 넣었던 margin container로 옮김
바뀌기전
#container{
width:100%;
height: 600px;
background: red;
}
#contents{
width: 1200px;
margin: 30px auto 0 auto;
height:100px;
background: blue;
}
바뀐 후
#container{
width:100%;
height: 600px;
margin-top: 30px;
}
#contents{
width: 1200px;
margin: 0 auto;
}
사실 이 margin에 뭔가 들어가지 않는 다면 상관은 없다고 함
달라진점 B - con_notice 에 width 부여
바뀌기 전
에는 .con_notice에 css자체를 부여하지 않음
바뀐 후
.con_notice{
width:600px;
}
달라진점 C - contents 에 정확한 width 부여
좀 더 자세히는 여기 참고
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;
}
#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:100%;
height: 600px;
margin-top: 30px;
}
#contents{
width: 1200px;
margin: 0 auto;
}
.con_item{
float:left;
display: inline-block;
width:50%;
padding: 3%;
height:230px;
box-sizing: border-box;
border:1px solid #ececec;
}
.con_item > h2 > span{
display: block;
font-size: 11px;
color:#333;
}
.con_item > p{
font-size:11px;
margin-top:50px;
}
.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_notice{
width:600px;
}
.con_notice1{
background:url("./images/main_con_ic_01.png") bottom right no-repeat;
background-position: 178px 109px;
}
.con_notice2{
background:url("./images/main_con_ic_02.png") bottom right no-repeat;
background-position: 178px 109px;
}
.con_notice3{
background:url("./images/main_con_ic_04.png") bottom right no-repeat;
background-position: 178px 109px;
}
.con_notice4{
background:url("./images/main_con_ic_05.png") bottom right no-repeat;
background-position: 178px 109px;
}
'Lecture' 카테고리의 다른 글
2021.3.12 (Fri) (0) | 2021.03.12 |
---|---|
2021.3.10 (Tue) - Assignment (0) | 2021.03.11 |
2021.3.11(Thu) - Def (0) | 2021.03.11 |
2021.3.10 (Wed) -def (0) | 2021.03.10 |
2021.3.9 (Tue) - Def (0) | 2021.03.09 |