CSS Layout

BitYoungjae·2020년 3월 17일
0

HTML스터디

목록 보기
8/9

포지셔닝

box-sizing

  • content-box 너비와 높이를 content를 기준으로
  • border-box 너비와 높이를 border를 기준으로

예시

box-sizing

float

특정 요소를 띄워서 그 주변을 다른 요소들이 흘러갈 수 있도록 합니다.

clear

여기서부터 float을 무효화시키겠다!
라는 의미로 clear 속성을 사용합니다.

Holy Grail Layout

CSS Layout 의 Helloworld!

예시

float

Holy Grail Layout

position

static

기본 값입니다.

HTML 문서상 요소의 정의 순서대로 배치가 됩니다.

float 속성을 통해 좌우 배치만 결정할 수 있습니다.

relative absolute fixed stikcy

예시

  1. 좌표에 대해 - Coordinates
  2. 포지셔닝 예시 - Positioning

z-index

예시

z-index
Simple Modal

Column

신문처럼 다단 레이아웃 구성하기

예시

Column

profile
가르침을 주십시오..!

0개의 댓글