레이아웃 (Layout)

 

 

기본적으로 요소는

왼쪽 상단의 좌표가 (0, 0)이 되고,

픽셀 단위나 퍼센트 단위 등을 사용하여

위에서 아래로, 왼쪽에서 오른쪽으로 확장합니다.

 

좌표계를 바탕으로 절대/상대적인 위치에 위치할 수 있습니다. 

 

 

 

Box Mobel

크기의 속성은 외부여백(margin), 경계선(border), 내부여백(padding)으로 나뉩니다.

box-sizing  

기준에 따라서 크기가 다를 수 있기에 box-sizing으로 기준을 정해주어야 합니다.

content-box (컨텐츠 기준) / border-box (경계선 기준)

 

 

 

 

positioning & layout

 

static: 기본값

relative: 기본값 + 상대적인 위치

fixed: 브라우저 화면의 좌상단을 기준으로 절대적인 위치

absolute: 부모 중 기준점이 있는 경우, 그 기준으로 절대적인 위치

sticky: 기본적으로 relative처럼 작동하나, 스크롤 영역을 벗어나면 fixed 처럼 작동

 

• 레이아웃 & Box Model
  • margin, padding, border
  • width, height, top, left, bottom, right
  • position, box-sizing
• 레이아웃 고급:
  • z-index
  • float, flex
• 기본 스타일링:
  • font-*, background-*
  •  

 

• Responsive Web
• Pseudo class