10. CSS - 레이아웃 - 화면 분할

• 상하 분할
  • 상하 분할 시 필요한 요소들
    • 감싸고 있는 영역 요소
    • 내부를 분할할 요소
    • display : block
    • 크기 지정 단위(px, %)

 

HTML 작성 화면 - 상하 2분할
CSS 코드 작성
웹에서 출력된 화면

HTML에서 작성된 화면 - 상하 3분할
CSS 작성 화면
웹에서 출력된 화면

 

 

• 좌우 분할
  • 좌우 분할 시 필요한 요소들
    • 감싸고 있는 영역 요소
    • 내부를 분할할 요소
    • dispaly : inline-block
    • 크기 지정 단위(px, %)

 

HTML 작성 화면 - 좌우 2분할
CSS 작성 화면
웹에서 출력된 화면 - class="area3"에는 노란색 배경색 class="area4"에는 초록색 배경색이 지정되어 있음.

 

 

• display: none / dispaly: hidden
  • 화면에 요소가 표시되지 않으나 존재는 하고 있는 상태
  • visibility : hidden -> 요소를 투명한 상태로 표시

HTML 작성 화면
CSS 작성 화면
웹에서 출력된 화면 - display: none을 지정해준 2는 없어지고 바로 3이 이어서 출력됨 - display: hidden을 지정해준 4는 투명한 상태로 되어 비어져서 출력됨.