[til 027] CSS 연습

csstest.html

Document

<link rel="stylesheet" href="/02_CSS/css/csstest.css">

<div id="body">
    <div class="tb basis-15" id="header">#header</div>
    
    <div class="mid">
    <div class="basis-15" id="left">#left</div>
    <div class="basis-85" id="center">#center</div>
    <div class="basis-15" id="right">#right</div>
    </div>
    <div class="tb basis-15" id="footer">#footer</div>

</div>

<div id="body">
    <div class="" id="heder2">Header</div>
    <div class="mid-content-footer">
        <div class="" id="nav">Nav</div>
        <div class="content-footer">
            <div id="content">content</div>
            <div id="footer2">footer</div>
        </div>
    </div>
</div>

---

css파일 파일명: csstest.css

• {
  box-sizing: border-box;
  

}

#body {
border: 1px solid gray;
width: 400px;
height: 250px;

.tb {
background-color:rgb(31, 30, 30);
color: aliceblue;
height: 20%;
}

#left {
background-color: aqua;
;

}

#center {
background-color: lightgray;

}

#right {
background-color: red;

}

.mid {
display: flex;
height: 60%;

}

.basis-15 {
flex-basis: 25%;
}
.basis-85 {
flex-basis: 50%;
}

#heder2 {
background-color: red;
height: 20%;
}

.mid-content-footer{
display: flex;
height: 80%;
}

.content-footer {
display: flex;
flex-direction: column;
width: 80%;
}

#content {
background-color: greenyellow;
height: 80%;
}

#footer2{
background-color: aqua;
height: 20%;
}

#nav {
width: 20%;
background-color: yellow;
}

결과물