배치 방법을 결정하는 display 속성
| 종류 | 설명 |
| block | 인라인 레벨 요소를 블록 레벨 요소로 바꿈 (여러 줄->한 줄) |
| inline | 블록 레벨 요소를 인라인 레벨 요소로 바꿈 |
| inline-block | 인라인과 블록 레벨 요소의 속성을 모두 가지고 마진과 패딩을 지정할 수 있다. |
| none | 해당 요소를 화면에 표시하지 않는다 |
<!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>
ul{
list-style: none;
}
li{
display: inline-block; /*인라인 레벨 요소와 블록 레벨 요소 모두 지정*/
border: 1px solid black;
padding: 20px;
margin: 0 20px; /*위아래 0, 좌우 20px*/
}
</style>
</head>
<body>
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
</body>
</html>
li를 display : inline-block으로 지정하여 가로 배치를 해준다.
* display: inline-block과 float: left 속성의 차이점
display: inline-block은 기본 패딩과 마진 값을 가지고 있지만
float: left는 기본 패딩과 마진을 가지고 있지 않아서 필요에 따라 지정해야 되고 float:left를 사용하면 clear 속성으로 플로팅을 해제해야 한다는 점이 있다.
왼쪽 또는 오른쪽으로 배치하는 float 속성
float 속성을 이용하여 한 줄에 나란히 배치할 수 있게한다.
| 종류 | 설명 |
| left | 해당 요소를 문서의 왼쪽에 배치 |
| right | 해당 요소를 문서의 오른쪽에 배치 |
| none | 좌우 어느 쪽에도 배치하지 않는다. 기본값 |
float 속성을 해체하는 clear 속성
| 종류 | 설명 |
| left | float : left를 해제 |
| right | float : right를 해제 |
| both | float: left와 float: right를 해제 |
float, clear 속성을 이용하여 레이아웃 나눠보기 (feat. 시맨틱태그)
<!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>
<link rel="stylesheet" href="box.css">
</head>
<body>
<div id="container">
<header id="header">제목</header>
<aside id="sidebar">사이드바</aside>
<section id="section">본문</section>
<aside id="sidebar2">사이드바</aside>
<footer id="footer">푸터</footer>
</div>
</body>
</html>
시맨틱 태그를 이용하여 header, aside, section, footer로 나눠준다.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container{
width: 1200px;
margin: 20px auto;
}
#header{
width: 100%;
height: 120px;
background-color: gray;
}
#sidebar{
float: left;
width: 250px;
height: 600px;
background-color: antiquewhite;
}
#section{
float: left;
width: 800px;
height: 600px;
background-color: rgb(219, 190, 245);
}
#siderbar2{
float: left;
width: 150px;
height: 600px;
background-color: blanchedalmond;
}
#footer{
clear: left; /*플로팅 해제*/
background-color: rgb(186, 175, 160);
width: 100%;
height: 100px;
}
aside와 section의 내용을 가로로 나란히 정렬하기 위해서 각각의 css부분에다가 float: left를 추가해준다.
그 후 footer부분에 clear: left를 통해 float:left를 해제한다.
위 코드처럼 짜주면 이런 결과를 얻을 수 있다!
'WEB' 카테고리의 다른 글
| CSS와 박스 모델 (0) | 2024.02.22 |
|---|---|
| 로그인 페이지 만들기 (0) | 2023.08.08 |
| form태그 (0) | 2023.07.31 |
| table (0) | 2023.07.24 |
| HTML 정리(1) (0) | 2023.07.24 |
