CSS 레이아웃 스타일 #1

📝 CSS 레이아웃 스타일, FLEX
#230214

📌레이아웃(layout)

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

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

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

[속성]

• block : 화면을 수직 분할(행을 나눔)
              width / height 속성 사용 O

.block {
    border: 1px solid black;
    width: 150px;
    height: 150px;
    color: white;
    display: block; }

• inline : 화면을 수평 분할(하나의 행의 컬럼을 나눔 == 글자처럼 생각하면 됨)
                width / height 속성 사용 X

.inline {
display: inline;}

• inline-block : inline의 수평 분할 + block의 크기 조정

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

• none : 화면에 요소가 표시되지는 않으나 존재는 하고 있는 상태

.none {
display: none;}

• flex : 요소의 정렬되는 방향, 요소 간의 간격을 유연하게 처리하는 형식

📌 화면(영역) 분할

상하 2분할
상하 3분할
좌우 2분할
display : none

1. 감싸는 영역 요소
   ex) div id="container-1

2. 내부에 영역을 분할할 요소
   ex) #container-1 > .div-1:first-of-type

3. display : block
   (위에 배운 옵션)

4. 크기단위(고정(px)/가변(%))

1) 고정 크기 단위 (px) 
ex) width: 300px; / height: 200px;

2) 가변 크기 단위 (%) 
화면이나 감싸는 영역의 크기에 비례해서 크기가 자동 계산
ex) width: 100%; / height: 50%;