HTML, CSS -7

레이아웃

CSS포지셔닝 - 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할지를 결정

box-sizing: width, height 기준

• content-box : 기본값, 내용물 기준, 내부여백, 경계선 -> 전체 크기가 증가

  .box {
       width: 200px;
       height: 200px;
       background: gray;
       margin-bottom: 30px;
 }
          

width와 height는 컨텐츠를 기준으로 한다.
-> box 크기가 커짐

• border-box : 경계선 기준, 내부 여백,
  경계선 -> 크기x -> 내용물의 크기가 감소

.box2 {
     padding: 50px;
     border: 5px solid #000;
     box-sizing: border-box;
}

-> box크기가 같고 컨텐츠가 작아짐

float

-left: 왼쪽 배치
-right: 오른쪽 배치
-none: 기본 값

clear

-flaot 적용 속성을 제거

-clear: 방향; float 특정방향 제거 (both는 양쪽)

• 공간이 있는 요소(block, inline-block)에서만 적용 가능

• 가상 클래스 선택자 ::after

ul::after {
   content: '';  //필수
    clear: left;
                
}

position

-static: 기본값

--상대적인 배치--

-relative: 현재 요소의 위치 기준(왼쪽 상단)

-absolute: 문서 왼쪽 상단이 기준
상위 요소에 상대 배치속성(relative, absolute, fixed)이 적용된겨우, 상위 요소의 왼쪽 상단이 배치 기준

-fixed: 뷰포트가 배치의 기준

• 뷰포트: 화면에서 보이는 영역

   left: 왼쪽 -> 오른쪽 배치
   right: 오른쪽 -> 왼쪽 배치
   top: 위 -> 아래 배치
   bottom: 아래 -> 위로 배치

 .box1 {
                background: orange;
                position: relative;
                left: 100px;
                top: 100px;
            }

visibility

visible - 기본값 보임
hidden - 감추기 (영역을 유지)

참고) display: none - 감추기 (영역x)

z-index

레이아웃의 배치 우선도 작성

상대 배치에서 적용 가능(position - relative, absolute, fixed)

층위

숫자가 높을 수록 앞쪽에 배치,
숫자가 낮을 수록 뒤에 배치

다단으로 편집하기

column-width : 컬럼 너비
column-count : 나눠질 단수
column-gap : 컬럼 사이 여백