🧩CSS 레이아웃 스타일 1

레이아웃 (layout)

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

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

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

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

block 형식의 요소(div)를 inline으로 변경

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

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

        /* inline이라는 속성을 가지면 inline이다 */
    .inline {
        display: inline ;
    }

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

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

/* inline을 block으로 */
.block {
    display: block;

    width: 150px;
    height: 150px;
}

inline-block 확인하기

• block의 크기 조정 속성+ 옆으로 쌓이기
• display 속성은 덮어쓰기되고 위의 높넓이는 유지됨

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

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

none

• 요소들이 전부 보이지 않는다
• 존재는 함 ➡️ 개발자 도구에서 확인 가능

.inline-block {
    display: none;
}

화면 (영역) 분할

상하 2분할

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

    <!-- container : 감싸는 요소 class나 id명으로 많이 사용 -->
    <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 {
   height: 50%; /* 감싸는 영역 높이의 50씩 가진 것 */
   width: 100%;

   border: 1px dashed hotpink;
}

상하 3분할

• 감싸는 영역 요소 : `<id="container-2">
• 화면 분할 내부 요소 : class="div-2"
• 분할 비율 ➡️ 20:30:50

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

#container-2 > .div-2:first-of-type{
    height : 20% ;
    width: 100% ;
    background-color: yellowgreen;
}

#container-2 >.div-2:nth-child(2) {
    height: 30%;
    width : 100% ;
    background-color: tomato;
}

#container-2 > .div-2:last-child{
    height: 50%;
    width: 100%;
    background-color: skyblue;
}

block 형식의 요소는 별도의 width가 지정되지 않으면 항상 100%

좌우 2분할

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

    <div id="container-3">
        <div class="div-3"></div><div class="div-3"></div>
    </div>

#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

• 요소는 존재하지만 화면에는 보이지 않음 (투명x)

    <div class="div-4">test</div>
    <div class="div-4" id="test4">test</div>
    <div class="div-4">test</div>

#test4 {
    background-color: deeppink;
    visibility: hidden;
}

visibility: hidden;
요소는 있는데 (자리는 그대로) 모습만 안 보임
display: none
화면에 요소 자체가 사라짐
HTML 상에서 아예 사라진 것은 아님
개발자 도구에서 확인 가능