반응형
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#full{
width: 600px;
height: 600px;
background-color: gray;
margin: auto; /* 중앙 맞춤 */
}
#left{
width: 200px;
float: left;
}
.red{
background-color: red;
width: 200px;
height: 500px;
}
.yellow{
background-color: yellow;
width: 200px;
height: 100px;
}
#center{
width: 200px;
float: left;
}
.blue{
background-color: #0000ff;
width: 200px;
height: 200px;
}
.green{
background-color: green;
width: 200px;
height: 400px;
}
#right{
width: 200px;
float: left;
}
.black{
background-color: black;
width: 200px;
height: 300px;
}
.pink{
background-color: pink;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div id='full' align='center'>
<div id='left'>
<div class='red'>red</div>
<div class='yellow'>yellow</div>
</div>
<div id='center'>
<div class='blue'>blue</div>
<div class='green'>green</div>
</div>
<div id='right'>
<div class='black'>black</div>
<div class='pink'>pink</div>
</div>
</div>
</body>
</html><div>태그를 사용해서 공간을 맞춰준다음, float : left로 왼쪽부터 붙여준다.
결과
red
yellow
blue
green
black
pink
반응형
'프로그래밍 언어 > CSS' 카테고리의 다른 글
| [CSS] header 영역 / main 영역 / footer 영역 (div 태그를 이용해서 나눠보기) (0) | 2021.06.10 |
|---|---|
| [CSS] 링크 꾸미기 (link 속성/ a:link, a:visited, a:hover, a:active) (0) | 2021.06.10 |
| [CSS] CSS text 속성 (color, text-align, text-transform, direction...) (0) | 2021.06.09 |
| [CSS] CSS란? CCS기초, CSS적용하는 방법 (inline, internal, external) (0) | 2021.06.09 |