<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 두개의 박스를 왼쪽 정렬에서 가운데 정렬로 바꿈
가운데 정렬을 위해서 부모박스에 해당하느 중첩박스 생성 */
* {
margin: 0;
padding: 0;
}
.banner {
width: 740px; /* 넓이 */
height: 120px; /* 높이 */
background-color: burlywood; /* 배경색상 */
float: left; /* 왼쪽 기준 정렬 */
border: 2px solid black;
}
.login {
width: 333px;
height: 120px;
background-color: beige;
float: left;
margin-left: 8px;
border: 2px solid black;
/* 로그인 박스 기준에서 간격을 주고자 왼쪽 바깥쪽 여백을 지정하였으며,
배너 박스 기준일 때 바깥쪽 여백은 margin-right가 됨 */
}
/*
배너 영역 박스 넓이 : 740 + 2 + 2 = 744px
로그인 박스 넓이 : 333 + 8 + 2 + 2 = 345px
부모박스의 넓이 : 744 + 345 = 1089px
부모박스의 높이 : 120 + 2 + 2 = 124px
*/
.main {
width: 1089px; /* 배너 박스와 로그인 박스를 더한 값 */
height: 120px; /* 두개 박스의 고정 높이 */
background-color: gray; /* 높이값을 확인하기 위해 배경 색상 지정 */
margin: 0 auto; /* margin 값이 2개일 때 top bottom, left right 로 지정 */
/* block 속성을 가진 박스의 넓이가 지정되어 있을 때 margin:0 auto를 통해 가운데 배치가 가능하며
margin: auto auto라고 입력하면 브라우저의 위아래는 자동인식이 되지 않지만 좌우는 자동으로 가운데 배치가 가능 */
}
</style>
</head>
<body>
<!-- left right 박스들을 묶은 중첩 박스 -->
<div class="main">
<div class="banner">배너영역</div>
<div class="login">로그인</div>
</div>
</body>
</html>
