Daily coding
CSS : 화면분할과 정렬(float) 본문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#fullScr{
width: 800px;
height: 500px;
background-color: red;
}
#left{
width: 400px;
height: 500px;
background-color: orange;
float: left;
}
#right{
width: 400px;
height: 500px;
background-color: yellow;
float: left;
}
#leftup{
width: 300px;
height: 300px;
background-color: blue;
margin-left: 10px;
}
#leftdown{
width: 250px;
height: 200px;
background-color: olive;
margin-left: 10px;
}
#rightup{
width: 350px;
height: 200px;
background-color: black;
}
#rightdown{4
width: 200px;
height: 300px;
background-color: grey;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="fullScr"> <!-- 전체화면 -->
<div id="left"> <!-- 왼쪽화면-->
<div id="leftup"> <!-- 왼쪽상단 -->
</div>
<div id="leftdown"> <!-- 왼쪽하단 -->
</div>
</div>
<div id="right"> <!-- 오른쪽화면 -->
<div id="rightup"></div> <!-- 오른쪽상단 -->
<div id="rightdown"></div> <!-- 오른쪽하단 -->
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.innersection{
width:200px;
height: 100%;
float: left;
background-color: brown;
}
.d1{
background-color: red;
height: 500px;
}
.d2{
background-color: yellow;
height: 100px;
}
.d3{
background-color: blue;
height: 200px;
}
.d4{
background-color: green;
height: 400px;
}
.d5{
background-color: black;
height: 300px;
}
.d6{
background-color: pink;
height: 300px;
}
</style>
</head>
<body>
<div style="width: 600px; height: 600px;" align="left">
<div class="innersection">
<div class="d1">
</div>
<div class="d2">
</div>
</div>
<div class="innersection">
<div class="d3">
</div>
<div class="d4">
</div>
</div>
<div class="innersection">
<div class="d5">
</div>
<div class="d6">
</div>
</div>
</div>
</body>
</html>'Front-end > Client' 카테고리의 다른 글
| CSS : Gradient 만들기 (linear-gradient) (0) | 2020.01.10 |
|---|---|
| CSS : header 헤더 / main 메인 / footer 푸터 태그 (0) | 2020.01.10 |
| CSS : 테이블 스타일 (0) | 2020.01.10 |
| CSS : list 스타일과 list-style-image 설정 (0) | 2020.01.09 |
| CSS : Anchor 태그와 속성들 (0) | 2020.01.09 |
'Front-end/Client' Related Articles
more
