728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
box-sizing: border-box;
/*
지금부터 지정하는 가로세로길이는 테두리까지 포함한 길이임을 의미
*/
border: 1px solid red;
}
/* 전체를 감싸는 div wrap */
.wrap{
width:1000px;
height: 800px;
margin:auto;/* 좌우로 가운데로 자동정렬 시켜줌*/
}
/* 크게 3가지 영역에 스타일 부여*/
/* #header , #content , #footer*/
.wrap>div{ /* class 속성이 wrap이면서 자손태그중 div태그에만 스타일 부여하겠다 */
width: 100%;
}
#header, #footer{
height: 20%;
}
#header>div{
height: 100%;
float: left;
}
#header_1{
width: 30%;
}
#header_2{
width: 70%;
}
#content{
height: 60%;
}
#content>div{
height: 100%;
float:left;
/* 블럭요소인 div들을 옆으로 배치되게끔 해줌 */
}
#content_1{
width: 15%;
}
#content_2{
width: 65%;
}
#content_3{
width: 20%;
}
</style>
</head>
<body>
<div class="wrap">
<div id="header">
<div id="header_1"></div>
<div id="header_2"></div>
</div>
<div id="content">
<div id="content_1"></div>
<div id="content_2"></div>
<div id="content_3"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
728x90
반응형
LIST
'VsCode(HTML)' 카테고리의 다른 글
| css 홈페이지화면구성 로그인폼 만들기 HTML (0) | 2023.05.18 |
|---|---|
| css 홈페이지구조잡기 세부_푸터바만들기 HTML (0) | 2023.05.18 |
| 화면구조잡기 HTML (0) | 2023.05.17 |
| 애니메이션관련 HTML (0) | 2023.05.17 |
| 트랜지션관련스타일 HTML (0) | 2023.05.14 |