728x90
1. block
- display가 block으로 설정되면, 해당 행을 모두 차지 하기 때문에 새로운 요소는
밑으로 추가된다. - div태그는 기본적으로 block으로 설정되어 있다.
2. inline
- block과 달리 해당 크기만큼만 차지 하기 때문에,
옆으로 추가된다. - 해당 태그 안 컨텐츠 만큼만 차지한다.
3. inline-block
- inline과 달리 설정된 크기만큼 공간을 만든다.
4. flex
- column 방향과 row 방향을 정하여 레이아웃을 보다 유연하게 정렬할 수 있다.
display: flex;
flex-direction: row / column;<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>
.container{
background-color: green;
display: flex;
height: 100vh;
flex-direction: column;
}
.container .box{
width: 100%;
height: 100px;
background-color: black;
margin-bottom: 10px;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>flex: 1 : 나머지 요소가 만들어진 크기 외의 모든 공간을 차지
728x90