- 사전적 의미 : 배치, 정리
- 기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미
요소가 화면에 어떻게 보여질지 형식을 지정하는 속성
화면을 수직 분할(행을 나눔)
화면을 수평 분할
(하나의 행의 컬럼을 나눔 == 글자처럼 생각하면 됨)
+ width / height 속성 사용 X
inline의 수평 분할 + block의 크기 조정
화면의 요소가 표시되지는 않으나 존재는 하고 있는 상태
요소의 정렬되는 방향, 요소 간의 간격을 유연하게 처리하는 형식
<h3>block 형식의 요소(div)를 inline으로 변경</h3>
<div class="block area1 inline">1번 영역</div>
<div class="block area2 inline">2번 영역</div>
<div class="block area3 inline">3번 영역</div>
<div class="block area4 inline">4번 영역</div>
<div class="block area5 inline">5번 영역</div>
<h3>inline 형식의 요소(span)를 block으로 변경</h3>
<span class="area1 block">1번 영역</span>
<span class="area2 block">2번 영역</span>
<span class="area3 block">3번 영역</span>
<span class="area4 block">4번 영역</span>
<span class="area5 block">5번 영역</span>
<h3>inline-block 확인하기</h3>
<div class="area1 block inline-block">1번 영역</div>
<div class="area2 block inline-block">2번 영역</div>
<div class="area3 block inline-block">3번 영역</div>
<div class="area4 block inline-block">4번 영역</div>
<div class="area5 block inline-block">5번 영역</div>
.area1{ background-color: red;}
.area2{ background-color: orange;}
.area3{ background-color: yellow;}
.area4{ background-color: green;}
.area5{ background-color: blue;}
.block{
border: 1px solid black;
width: 150px;
height: 150px;
color: white;
display: block; /* 요소 형식을 block으로 변경 */
}
.inline{
display: inline; /* 요소 형식을 inline으로 변경 */
}
.inline-block{
display: inline-block;
/* 요소 형식을 inline-block으로 변경 */
}
<!-- 감싸는 영역 요소 -->
<div id="container-1">
<!-- 내부에 영역을 분할할 요소 -->
<div class="div-1"></div>
<div class="div-1"></div>
</div>
/* 감싸는 영역 요소 */
#container-1{
border: 3px solid black;
width: 323px;
height: 472px;
}
/* 내부에 영역을 분할할 요소 */
.div-1{
/* 고정 크기 단위
-> 감싸는 영역의 크기가 변하면 다시 계산(힘듦 ㅠㅠ)
*/
/* width: 300px;
height: 250px; */
/* 가변 크기 단위(%)
-> 화면이나 감싸는 영역의 크기에 비례해서 크기가 자동 계산
*/
width: 100%; /* 323px * 100% / 100 = 323px */
height: 50%; /* 472px * 50% / 100 = 236px */
}
/* 위쪽 분할 요소 */
#container-1 > .div-1:first-of-type{
background-color: red;
height: 30%;
}
/* 아래쪽 분할 요소 */
#container-1 > .div-1:last-of-type{
background-color: blue;
height: 70%;
}
<!-- 감싸는 영역 요소 -->
<div id="container-2">
<!-- 내부에 영역을 분할할 요소 -->
<div class="div-2"></div>
<div class="div-2"></div>
<div class="div-2"></div>
</div>
/* 상하 3분할(20:30:50) */
#container-2{
border: 3px solid rgb(100, 148, 237);
width: 300px;
height: 500px;
}
/* block 형식의 요소는
별도의 width가 지정되지 않으면 항상 100%다.
*/
/* .div2{
width: 100%;
} */
#container-2 > .div-2:nth-child(1){
background-color: rgba(100, 136, 237, 0.5);
height: 20%;
}
#container-2 > .div-2:nth-child(2){
background-color:lavender;
height: 30%;
}
#container-2 > .div-2:nth-child(3){
background-color:rgba(190, 173, 230, 0.548);
height: 50%;
}
<!-- 감싸는 영역 요소 -->
<div id="container-3">
<div class="div-3"></div><div class="div-3"></div>
<!-- 내부의 두 요소 사이에 엔터 == 한 칸 띄어쓰기 -->
</div>
/* 좌우 2분할 */
#container-3{
border: 5px solid red;
width: 400px;
height: 200px;
}
.div-3{ /* 내부 */
width: 50%;
height: 100%;
display: inline-block;
}
#container-3 > .div-3:first-child{
background-color: pink;
}
#container-3 > .div-3:last-child{
background-color: steelblue;
}
요소는 존재하지만 화면에는 보이지 않음(투명 X)
-> visibility : hidden; (투명 O)
<div class="div-4">test</div>
<div class="div-4" id="test4">css가 적용될 요소</div>
<div class="div-4">test</div>
/* display : none; visibility : hidden; */
.div-4{
border: 3px solid black;
height: 100px;
}
#test4{
background-color: deeppink;
/* 요소가 투명한 색으로 변했다! */
/* visibility : hidden; */
/* 요소는 존재하지만 화면에 보이지 않음(영역도 차지하지 않는다.) */
display: none;
}