Display / Position / Float / Align
Block / Inline
이아웃을 만들기 위한 요소 (수직으로 쌓임)
블록 요소는 브라우저의 전체 너비를 차지한다.
대표적인 블록요소 : div, p
가로, 세로 너비 지정가능
margin, padding 지정 가능
글자를 만들기 위한 요소 (수평으로 쌓임)
인라인 요소는 필요한 만큼만 너비를 차지한다.
대표적인 인라인 요소 : span, a, img
인라인 요소와 달리 인라인 블럭 요소는 너비와 높이를 설정할 수 있으며 margin, padding이 지정된다.
가로 수평 정렬을 위해서 사용되기도 한다.
요소의 위치 지정의 기준 설정
static
기준없음 / 배치 불가능 (기본값)
relative
요소 자기 자신 기준
absolute
위치상 부모 요소를 기준
부모요소가 static인 경우에는 absolute가 부모 기준을 무시함
부모요소가 static이 아닌 경우(relative, fixed)에는 absolute가 부모 기준으로 배치
fixed
페이지를 스크롤하더라도 항상 같은 위치에 고정
skticky
스크롤 영역 기준
top 등의 값이 1개 이상 존재
스크롤과 맞닿았을때 동작(페이지 상단 고정)
요소를 좌우 방향으로 띄움 (수평정렬)
절대 위치 요소는 float 속성 무시
띄움 속성이기에 원치않는 위치 조정이 일어날 수 있다.
부모 요소에도 float 속성 주기 : 콘텐츠 영역만큼만 차지 (근본적 해결X)
부모요소에 overflow:hidden : 콘텐츠가 짤릴 가능성 有
부모요소에 display: inline-block ;
부모요소에 가상요소 만들기 ::after{content: ''; display:block; clear:both;}
부모요소에 display: flow-root;
브라우저 호환성에 따라 지원이 안 될수도있다.
: float을 사용한 요소에 clear를 같이 사용되면 아무런 효과X
flex : 블록 요소와 같이 Flex Container 정의
lnline-flex : 인라인 요소와 같이 Flex Container 정의
flex-direction : 주축을 설정
flex-wrap : 줄넘김 처리
justify-content : 주축 정렬 방식
space-around / space-evenly 차이점
space-around : 아이템들의 공간이 동일
space-evenly : 여백이 동일
align-items : 수직축 방향 설정
align-items : 수직축 방향 여러 행 방향 설정
flex-basis : 아이템의 기본 점유 크기 설정 (기본값 auto)
flex-grow : 빈 공간을 메우는 증가너비
flex-shrink : 감소 너비 (빈공간없이)
order : 아이템 배치 순서/ 작은 숫자일 수록 먼저 배치