[ css ] 태그의 정렬 ( 테이블과 같이 효과를 얻기 위해 사용하는 css의 종류 : display:table )
작성일 21-01-13 10:05
페이지 정보
작성자 웹지기 조회 7,012회 댓글 0건본문
세번째 방법은 display:table을 사용하는 방법
부모는 display:table를 사용하고 자식에는 display:table-cell을 사용해준다.
이때는 따로 제약이 없므로 잘만 사용하면 편하게 쓸수 있는 css이다.
<style>
*{
padding:0;
margin:0;
}
.main{
width:100%;
height:800px;
border:1px solid #000;
}
.head{
width:100%;
height:20%;
box-sizing:border-box;
}
.top{
width:100%;
height:50%;
background:#ea4335;
box-sizing:border-box;
text-align:center;
line-height:50px;
}
.nav{
width:100%;
height:50%;
background:#ff5e00;
box-sizing:border-box;
}
.cont{
width:100%;
height:60%;
box-sizing:border-box;
display:table;
}
.side{
width:30%;
height:100%;
background:#4285f4;
display:table-cell;
box-sizing:border-box;
border:1px dotted #000;
}
.content{
width:70%;
height:100%;
display:table-cell;
box-sizing:border-box;
border:1px dotted #000;
}
.sec1{
width:100%;
height:50%;
background:#34a853;
box-sizing:border-box;
}
.sec2{
width:100%;
height:50%;
background:#fbbc05;
box-sizing:border-box;
}
.foot{
width:100%;
height:20%;
background:#8a8d92;
box-sizing:border-box;
}
</style>
<div class="main">
<div class="head">
<div class="top">header : 장선수</div>
<div class="nav">nav</div>
</div>
<div class="cont">
<div class="side">side</div>
<div class="content">
<div class="sec1">section1</div>
<div class="sec2">section2</div>
</div>
</div>
<div class="foot">footer</div>
</div>
추천0
비추천 0
댓글목록
등록된 댓글이 없습니다.