레이아웃 ( layout )

사전적 의미 : 배치, 정리
기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하느 것을 의미.

화면 배치 방법 ( 형식 ) : display 속성

요소가 화면에 어떻게 보여질지 형식을 지정하는 속성

• block : 화면을 수직 분할(행을 나눔) + width / height 속성 사용 가능
• inline : 화면을 수평 분할 + width / height 속성 사용 불가능
• inlineblock : inline의 수평분할 + block 크기 조정
• none : 화면에 요소가 표시되지는 않으나 존재하고 있는 상태
• flex : 요소의 정렬되는 방형, 요소간의 간격을 유연하게 처리하는 형식

.area1 {background-color: red;}
.area2 {background-color: orange;}
.area3 {background-color: yellow;}
.area4 {background-color: green;}
.area5 {background-color: blue;}

.block {
    width: 150px;
    height: 150px;

    display: block;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

<h3>block 형식의 요소(div)를 inline으로 변경</h3>
<div class="area1 inline">1번 영역</div>
<div class="area2 inline">2번 영역</div>
<div class="area3 inline">3번 영역</div>
<div class="area4 inline">4번 영역</div>
<div class="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>
<span class="area1 block inline-block">1번 영역</span>
<span class="area2 block inline-block">2번 영역</span>
<span class="area3 block inline-block">3번 영역</span>
<span class="area4 block inline-block">4번 영역</span>
<span class="area5 block inline-block">5번 영역</span>

화면 (영역) 분할

상하 2분할

준비물

• 감싸는 영역요소
• 내부에 영역을 분할할 요소
• display : block
• 크기 단위 (고정 (px) / 가변 (%) )

/* 감싸는 영역 요소 */
#container-1 {
    border: 3px solid black;
    width: 323px;
    height: 472px;
}

/* 내부에 영역을 분할할 요소 */
.div-1 {
     width: 100%;
     height: 50%;
}

#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-1">

	<!-- 내부에서 영역을 분할할 요소 -->
	<div class="div-1"></div>
	<div class="div-1"></div>

</div>

상하 3분할

• 감싸는 영역 요소 : id : container-2
• 화면 분할 요소 class : div-2
• 분할 비율 -> 20:30:50

#container-2 {
    border: 3px solid black;
    width: 300px;
    height: 500px;
}

/* block 형식의 요소는 별도의
width가 지정되지 않으면 항상 100% */
#container-2 > .div-2:nth-of-type(1) {
    background-color: red;
    height: 20%;
}
#container-2 > .div-2:nth-of-type(2) {
    background-color: blue;
    height: 30%;
}
#container-2 > .div-2:nth-of-type(3) {
    background-color: purple;
    height: 50%;
}

<div id="container-2">

	<div class="div-2"></div>
	<div class="div-2"></div>
	<div class="div-2"></div>

</div>

좌우 2분할

• 감싸는 영역 요소
• 내부에 영역을 분할할 요소
• 크기 단위
• display : inline-block (약간 문제점이 있을 수 있음)

#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: blue;
}

/* -------------------------------------------------- */

/* display:none , visibility : hidden; */

.div-4 {
    border: 3px solid black;
    height: 100px;
}

#test4 {
    background-color: deeppink;

    /* visibility: hidden; */
    display: none;
}

<div id="container-3">
	<div class="div-3"></div><div class="div-3"></div>
	<!-- 내부의 두 요소 사이에 엔터 == 한칸 -->
</div>

<h3> display : none </h3>

<pre>
    요소는 존재하지만 화면에서는 보이지 않음(투명 X)

	-> visibility : hidden; (투명 O)
</pre>

<div class="div-4">test</div>
<div class="div-4" id="test4">css 적용 요소</div>
<div class="div-4">test</div>