[CSS] 레이아웃1 :: display(block | inline | inline-block | none)

레이아웃 (Layout)

사전적 의미 : 배치       
기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배열(배치)하는 것을 의미.

 

---

화면 배치 방법

( display : block | inline | inline-block | none )

 

display 속성 : 요소가 화면에 어떻게 보여질지 지정하는 속성

속성	의미
block	화면을 수직 분할 (한 줄을 모두 차지) -> width / height 지정 O
inline	화면을 수평 분할 (한 줄에 여러 inline 요소가 배치됨 == 글자를 생각하면 된다) -> width / height 지정 X
inline-block	inline의 수평 분할 특성 + block의 크기 지정 가능
none	화면에 표시되지 않으나 요소는 존재하고 있는 상태

 

1) block 형식 요소인 div를 inline으로 변경

.block{
    border : 1px solid black; /* 테두리 1px 검정 실선*/
    width: 150px;
    height: 150px;
    color : white; /* 글자색 : 흰색*/

    display : block; /* 요소의 보여지는 형식을 block으로 지정*/
}

.area1{ background-color: rgb(255, 198, 198);}
.area2{ background-color: rgb(255, 237, 204);}
.area3{ background-color: rgb(255, 255, 193);}
.area4{ background-color: rgb(206, 255, 206);}
.area5{ background-color: rgb(197, 197, 255);}

.inline{
    display: inline; /* 요소의 보여지는 형식을 inline으로 지정*/
}

 

 <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>

block 클래스에서 크기를 고정해줬지만
inline클래스에서 display : inline이 되면서 고정크기가 사라짐

class가 여러 개 작성되어 css 속성이 겹치는 경우

마지막에 작성된 class의 css속성이 적용된다.

 

2) inline 형식 요소인 span을 block으로 변경

 

.block{
    border : 1px solid black; /* 테두리 1px 검정 실선*/
    width: 150px;
    height: 150px;
    color : white; /* 글자색 : 흰색*/

    display : block; /* 요소의 보여지는 형식을 block으로 지정*/
}

.area1{ background-color: rgb(255, 198, 198);}
.area2{ background-color: rgb(255, 237, 204);}
.area3{ background-color: rgb(255, 255, 193);}
.area4{ background-color: rgb(206, 255, 206);}
.area5{ background-color: rgb(197, 197, 255);}

 

<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>

span 태그이지만 block에서 display: block을 해서 고정크기가 생김

 

3) div를 inline-block으로 변경

.block{
    border : 1px solid black; /* 테두리 1px 검정 실선*/
    width: 150px;
    height: 150px;
    color : white; /* 글자색 : 흰색*/

    display : block; /* 요소의 보여지는 형식을 block으로 지정*/
}

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

.area1{ background-color: rgb(255, 198, 198);}
.area2{ background-color: rgb(255, 237, 204);}
.area3{ background-color: rgb(255, 255, 193);}
.area4{ background-color: rgb(206, 255, 206);}
.area5{ background-color: rgb(197, 197, 255);}

 

<div class="block inline-block area1">1번 영역</div>
<div class="block inline-block area2">2번 영역</div>
<div class="block inline-block area3">3번 영역</div>
<div class="block inline-block area4">4번 영역</div>
<div class="block inline-block area5">5번 영역</div>

수평분할 + 크기지정

 

---

화면(영역) 분할

 

/*  화면 분할 */
#d1{
    border : 2px solid red; /* 테두리 2px 실선 빨강 */
    width: 300px;
    height: 400px;
}

#d1-1{
    /* px : 고정 크기 단위 */
   /*  width: 300px; 
    height: 200px; */

    /* % : 가변 크기 단위 (부모 크기에 비례)  */
    width: 100%;  /* 부모(감싸고 있는 태그)의 너비의 100% */
    height: 50%;  /* 부모의 높이의 50%*/
    background-color: rgb(206, 255, 206);
}

#d1-2{
    /* width: 300px;
    height: 200px; */
    width: 100%;  /* 부모(감싸고 있는 태그)의 너비의 100% */
    height: 50%;  /* 부모의 높이의 50%*/
    background-color: rgb(164, 193, 255);
}

#d2{
    border: 2px solid black;
    width: 600px;
    height: 200px;
}

#d2-1{
    width: 49%;
    height: 100%;
    background-color: lightpink;
    display: inline-block;
}

#d2-2{
    width: 49%;
    height: 100%;
    background-color: rgb(255, 255, 137);
    display: inline-block;
}

 

<div id="d1">
    <div id="d1-1"></div>
    <div id="d1-2"></div>
</div>

<div id="d2">
    <div id="d2-1"></div>
    <div id="d2-2"></div>
</div>

d1

d2

display : inline-block 적용 전

만약 여기서 inline을 하게되면 width, height가 적용되지 않는다

display : inline-block 적용 후

inline-block은 100%가 되면 다음 줄로 넘어가기때문에 가로를 49%로 해서 두개가 나란히 배치되게한다

영역을 좌우 분할하기 위하여 inline-block으로 변경하는 경우 문제가 있음!
-> inline-block 요소는 다른 요소와의 간격이 지정되어 있어 살짝 벌어져 있는 형태를 띄게 된다.