1. float를 이용해서 만들기
- 전체를 감싸는 wrapper(=container) 만들어 두면편함
- width: 100%; → 부모요소의 100%
- display: block (가로행 전부 차지)속성 때문에 옆에 안 나와서 float속성 이용
- float: left -> 요소를 붕 띄워서 정렬
- clear: both -> float 다음에 오는 요소에게 주 float로 발생하는 이상현상 해결 가능()
[main.css]
.container {
width: 800px;
}
.header {
width: 100%;
height: 100px;
background: darkolivegreen;
}
.left-menu {
width: 20%;
height: 400px;
background: cornflowerblue;
float: left;
}
.right-content {
width: 80%;
height: 400px;
background: coral;
float: left;
}
.footer {
width: 100%;
height: 100px;
background-color: grey;
clear: both;
}
[layout1.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header"></div> <!-- 헤더 부분 -->
<div class="left-menu"></div>
<div class="right-content"></div>
<div class="footer"></div>
</div>
</body>
</html>
2. inline-block 이용하기
- display: inline-block : 내 크기만큼 차지
- inline-box 사용 시 박스 사이 공백 제거가 귀찮음
- 공백 제거 방법
- 주석 이용할 수 있긴 함.
- 부모 태그에 font-size: 0px;
<div class="container" style="font-size: 0px">*부모태그로부터 inherit되는 스타일은 중요도 가장 낮으므로 글씨 쓰고 싶으면 해당 박스에서 font-size지정해주면 됨.
- inline-box안에<p>로 글씨 넣으면 또 이상해짐 -> baseline이 옆에 존재하면 display:inline-block요소들이 baseline 위에 오려고 함.
- vertical-align: top;으로 해결
[main.css]
.container {
width: 800px;
}
.header {
width: 100%;
height: 100px;
background: darkolivegreen;
}
.left-menu {
width: 20%;
height: 400px;
background: cornflowerblue;
/* float: left; */
display: inline-block;
vertical-align: top; /*상하정렬 속성.
top이면 위로 보내서 정렬/inline요소들에만 적용 가능*/
}
.right-content {
width: 80%;
height: 400px;
background: coral;
/* float: left; */
display: inline-block;
}
.footer {
width: 100%;
height: 100px;
background-color: grey;
/* clear: both; */
}
[layout1.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="left-menu"></div><!--
--><div class="right-content">
<p>안녕하세요</p>
</div>
<div class="footer"></div>
</div>
</body>
</html>
': ) Web > 웹 스터디' 카테고리의 다른 글
| [HTML, CSS 실습] Contact Form 만들기 (1) | 2023.11.17 |
|---|---|
| [HTML, CSS 실습] 블로그 레이아웃 만들기 (0) | 2023.11.16 |
| VSCode git이랑 연결하기 / git에 올리기 (1) | 2023.11.09 |
| CSS 기초 - <div>로 만든 상자에 그림자 넣기 (0) | 2023.11.09 |
| CSS 기초 - <div> 이용하여 네모 상자 만들기 (0) | 2023.11.09 |
