div태그로 공간 나누기
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#fullscreen{
width: 600px;
height: 600px;
background-color: grey;
}
#screen1{
width: 200px;
height: 600px;
background-color: black;
float: left;
}
#screen1-1{
width: 200px;
height: 500px;
background-color: rgb(255, 0, 0);
}
#screen1-2{
width: 200px;
height: 100px;
background-color: yellow;
}
#screen2{
width: 200px;
height: 600px;
background-color: black;
float: left;
}
#screen2-1{
width: 200px;
height: 200px;
background-color: blue;
}
#screen2-2{
width: 200px;
height: 400px;
background-color: green;
}
#screen3{
width: 200px;
height: 600px;
background-color: black;
float: left;
}
#screen3-1{
width: 200px;
height: 300px;
background-color: black;
}
#screen3-2{
width: 200px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="fullscreen">
<div id="screen1">
<div id="screen1-1">
</div>
<div id="screen1-2">
</div>
</div>
<div id="screen2">
<div id="screen2-1">
</div>
<div id="screen2-2">
</div>
</div>
<div id="screen3">
<div id="screen3-1">
</div>
<div id="screen3-2">
</div>
</div>
</div>
</body>
</html>
설명
전체 div를 선언하고, 그 안을 (1)3개의 div를 선언한다.
3개의 div에 (2)2개씩 div를 선언한다.
(1)div에 "float: left"를 사용하여 왼쪽으로 밀어준다.
float
left : 정해진 크기 안에서 왼쪽으로 간다.
right : 정해진 크기안에서 오른쪽으로 간다.
(2)div에 각각의 공간을 할당한다.
width : 폭(가로)
height : 높이(세로)
'IT > CSS' 카테고리의 다른 글
| [CSS]공간 분할 태그 정의/ 사용예제/padding 한줄기입 순서 (0) | 2021.06.10 |
|---|---|
| [bootstrap]bootstrap정의/ bootstrap.min.js 사용예제 (0) | 2021.06.09 |
| [CSS] 리스트 마커 변경하기/list-style-image/list-style-type (0) | 2021.06.09 |
| [CSS] a:link/a:visited/a:hover/a:active (0) | 2021.06.09 |
| [CSS] background속성/창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법 (0) | 2021.06.09 |