[HTML&CSS] inline grid
2020. 11. 26. 18:58ㆍHTML&CSS&JavaScript
<HTML>
<section class="box-1 con inline-grid">
<!-- 이 안쪽 부분만 수정할 수 있습니다, 시작 -->
<nav></nav>
<article><nav></nav><div></div></article>
<!-- 이 안쪽 부분만 수정할 수 있습니다, 끝 -->
</section>
<CSS>
/* 이 부분은 수정하지 마세요. 시작 */
body {
margin:0;
}
.inline-grid {
font-size:0;
}
.inline-grid > * {
font-size:1rem;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
}
.con {
width:1200px;
}
.con {
margin-left:auto;
margin-right:auto;
}
/* 이 부분은 수정하지 마세요. 끝 */
.box-1{
border:10px solid red;
}
section > *{
height:100px;
width:calc(100% / 2);
background-color:pink;
}
section>nav{
height:300px;
}
section>article{
height:300px;
background-color:black;
}
section>article>nav{
height:calc(100%/3);
background-color:gold;
}
section>article>div{
height:calc(100%/3);
background-color:green;
}
'HTML&CSS&JavaScript' 카테고리의 다른 글
| [HTML&CSS] body, a, ul, li 노멀라이즈 (0) | 2020.11.27 |
|---|---|
| [HTML&CSS] inherit (0) | 2020.11.27 |
| [HTML&CSS] block 요소 좌측,가운데,우측 정렬하는 방법(feat.margin) (0) | 2020.11.26 |
| [HTML&CSS] nth-child, first-child, last-child (0) | 2020.11.26 |
| [HTML&CSS] 이미지 기본 특성 (0) | 2020.11.25 |