CSS② 위치 속성

CSS 위치속성

Display / Position / Float / Align

Display

Block / Inline

Block

이아웃을 만들기 위한 요소 (수직으로 쌓임)
블록 요소는 브라우저의 전체 너비를 차지한다.
대표적인 블록요소 : div, p

가로, 세로 너비 지정가능
margin, padding 지정 가능

Inline

글자를 만들기 위한 요소 (수평으로 쌓임)
인라인 요소는 필요한 만큼만 너비를 차지한다.
대표적인 인라인 요소 : span, a, img

Inline-block

인라인 요소와 달리 인라인 블럭 요소는 너비와 높이를 설정할 수 있으며 margin, padding이 지정된다.
가로 수평 정렬을 위해서 사용되기도 한다.

position

요소의 위치 지정의 기준 설정

static
기준없음 / 배치 불가능 (기본값)

relative
요소 자기 자신 기준

absolute
위치상 부모 요소를 기준

부모요소가 static인 경우에는 absolute가 부모 기준을 무시함
부모요소가 static이 아닌 경우(relative, fixed)에는 absolute가 부모 기준으로 배치

fixed
페이지를 스크롤하더라도 항상 같은 위치에 고정

skticky
스크롤 영역 기준
top 등의 값이 1개 이상 존재
스크롤과 맞닿았을때 동작(페이지 상단 고정)

Float

요소를 좌우 방향으로 띄움 (수평정렬)

특징

절대 위치 요소는 float 속성 무시
띄움 속성이기에 원치않는 위치 조정이 일어날 수 있다.

float 문제 해결

• 부모 요소에도 float 속성 주기 : 콘텐츠 영역만큼만 차지 (근본적 해결X)

• 부모요소에 overflow:hidden : 콘텐츠가 짤릴 가능성 有

• 부모요소에 display: inline-block ;

• 부모요소에 가상요소 만들기 ::after{content: ''; display:block; clear:both;}

  • 브라우저 호환성에 따라 지원이 안 될수도있다.

• 부모요소에 display: flow-root;

  • 브라우저 호환성에 따라 지원이 안 될수도있다.

    		: float을 사용한 요소에 clear를 같이 사용되면 아무런 효과X

Flex

flex : 블록 요소와 같이 Flex Container 정의
lnline-flex : 인라인 요소와 같이 Flex Container 정의

Flex-Container 적용 속성

• flex-direction : 주축을 설정

• flex-wrap : 줄넘김 처리

• justify-content : 주축 정렬 방식

space-around / space-evenly 차이점
	space-around : 아이템들의 공간이 동일 
    space-evenly : 여백이 동일

• align-items : 수직축 방향 설정

• align-items : 수직축 방향 여러 행 방향 설정

Felx-Item 적용 속성

• flex-basis : 아이템의 기본 점유 크기 설정 (기본값 auto)

  • 실제 아이템 크기와 여백 상관없이 너비 설정

• flex-grow : 빈 공간을 메우는 증가너비

  • flex-basis를 제외한 여백 부분을 flex-grow 지정 숫자의 비율로 나누어 가진다

• flex-shrink : 감소 너비 (빈공간없이)

• order : 아이템 배치 순서/ 작은 숫자일 수록 먼저 배치

Align

수평 정렬

• margin: 0 auto; (block)
• text-align: center; (inline)

수직 정렬

• vertical-align
• line-height
• table / table-cell

수직 & 수평 정렬

• position
• transform