HTML / CSS - 6 (2021.03.11)

2021.03.11.css

0.00MB

2021.03.11.html

0.00MB

*{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{
    margin:  0 auto;
    width:1200px;
    height: 600px;
    
    
}

#contents{
    width: 600px;
    margin-top: 30px ;
    
}




.con_item{
    float:left;
    
}

.con_item > h2 > span{
    display: block;
    font-size: 11px;
    color:#333;
}

.con_item > p{
    font-size:12px;
    margin-top:30px 0 0; 
}

.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{
    
    width:50%;
    padding: 3%;
    height:230px;
    box-sizing: border-box;
    border:1px solid #ececec;
}


.con_notice1{
    background:url("image/main_con_ic_01.png")bottom right no-repeat;
    background-position: 178px 109px;
}

.con_notice2{
    background:url("image/main_con_ic_02.png") bottom right no-repeat;
    background-position: 178px 109px;
}

.con_notice3{
    background:url("image/main_con_ic_04.png") bottom right no-repeat;
    background-position: 178px 109px;
}

.con_notice4{
    background:url("image/main_con_ic_05.png") bottom right no-repeat;
    background-position: 178px 109px;
}

html{      overflow-x: hidden;     overflow-y: auto; }	overflow-x: hidden;  x축 스크롤바를 숨겨줌
#visual{     margin: 0 auto;     width: 1920px;     height: 500px;   }	최초 width 값을 1600px로 주어서 화면이 깨짐.  width 값을 삭제하거나 원본 사이즈이상의 크기로 부여하면 해결.  이미지 원본의 크기보다 작은 값으로 속성값을 부여하면 화면이 깨짐.
#container{     margin:  0 auto;     width:1200px;     height: 600px;	height: 600px; 는 굳이 필요 없는 듯
#contents{ width: 600px; margin-top: 30px; } .con_item{     float:left; }	contents의 너비를 600으로 주고 그 안에 con_item은 float:left로 붙인다.
.con_item{     width:50%;     padding: 3%;     height:230px;     box-sizing: border-box;     border:1px solid #ececec; }
	1)/*box-sizing: border-box;*/ 너비가 300을 넘어서 만들어진다.  contents 영역 외부에 padding과 border가 생성된다.
	2)box-sizing: border-box;  border padding box 전부 합쳐서 300px이 된다.  브라우저에 따라 이 명령이 작동하지 않을 수도 있다. 그럴 때에는 픽셀수를 계산하여 적절하게 배치한다.

 

---

팀과제1

do.css

0.00MB

 

do.html

0.00MB

---

●border: 크기 스타일 색깔. 그중에서 스타일 

boder - style: solid;    실선 한줄

boder - style: dotted;  점선

border - style: dashed;  파선 

border - style: double;  실선 두줄

---

오늘 인상 깊은 건 box-sizing: border-box다.  표로 정리한 게 상당히 마음에 안드는데 언젠가 바꾸겠다.