Web - CSS Layout

CSS Box Model

: 모든 HTML 요소를 사각형 박스로 표현하는 개념
ex) 원은 네모 박스를 깎은 것

구성 요소

: 내용(content), 안쪽 여백(padding), 테두리(border), 외부 간격(margin)으로 구성되는 개념

• CSS가 width 값을 계산하는 기준
  : border가 아닌 content 크기를 width 값으로 지정
  

박스 타입

• Block & Inline
  

• Normal flow
  : CSS를 적용하지 않았을 경우, 웹페이지 요소가 기본적으로 배치되는 방향
  

• block 타입 특징
  

• inline 타입 특징
  

• 속성에 따른 수평 정렬
  

기타 display 속성

• inline-block & none
• inline-block 특징
  
• none 특징
  

참고

CSS Position

• CSS Layout
  : 각 요소의 위치와 크기를 조정하여 웹 페이지의 디자인을 결정하는 것 (Display, Position, Float, Flexbox 등)

• CSS Position
  : 요소를 Normal Flow에서 제거하여 다른 위치로 배치하는 것. 다른 요소 위에 올리기, 화면의 특정 위치에 고정시키기 등

1. static
   : 기본값. 요소를 Normal Flow에 따라 배치
2. relative
   : 요소를 Normal Flow에 따라 배치. 자기 자신을 기준으로 이동. 요소가 차지하는 공간은 static일 때와 같음
3. absolute
   : 요소를 Normal Flow에서 제거. 가장 가까운 relative 부모 요소를 기준으로 이동. 문서에서 요소가 차지하는 공간이 없어짐
4. fixed
   : 요소를 Normal Flow에서 제거. 현재 화면영역을 기준으로 이동. 문서에서 요소가 차지하는 공간이 없어짐
5. sticky
   : 요소를 Normal Flow에 따라 배치. 요소가 일반적인 문서 흐름에 따라 배치되다가 스크롤이 특정 임계점에 도달하면 그 위치에서 고정(fixed)됨. 만약 다음 sticky 요소가 나오면 다음 sticky 요소가 이전 sticky 요소의 자리를 대체. (이전 sticky 요소가 고정되어 있던 위치와 다음 sticky 요소가 고정되어야 할 위치가 겹치게 되기 때문)

• z-index
  : 요소가 겹쳤을 때 어떤 요소 순으로 위에 나타낼 지 결정
• z-index 특징
  

CSS Flexbox

: 요소를 행과 열 형태로 배치하는 1차원 레이아웃 방식 => '공간 배열' & '정렬'

구성 요소

• Flex Container
  display: flex; 혹은 display: inline-flex; 가 설정된 부모 요소
  이 컨테이너의 1차 자식 요소들이 Flex item이 됨
  flexbox 속성 값들을 사용하여 자식 요소 Flex Item들을 배치하는 주체

• Flex Item
  Flex Container 내부에 레이아웃 되는 항목

레이아웃 구성

• 목적에 따른 속성 분류
  
• 속성명 Tip
  

flex-wrap 응용

• 반응형 레이아웃
  : 다양한 디바이스와 화면 크기에 자동으로 적응하여 콘텐츠를 최적으로 표시하는 웹 레이아웃 방식

++
margin collapse
개구리
flex 관련
bootstrap 관련