CSS의 position(배치)와 flex(정렬)에 대해서 알아보자

position

position(배치)

요소의 위치 지정 기준을 의미한다

• 위치 지정 기준

  1. static : 기준이 없다(배치할 수 없다)
  2. relative : 요소 자신을 기준으로 배치
  3. absolute : 위치 상 부모 요소가 기준('위치' 상의 부모 요소를 꼭 확인해야 한다)
  4. fixed : 뷰포트(브라우저)를 기준으로 배치. 화면에 배너를 배치하고, 스크롤을 내려도 배너를 고정시키는 역할
  5. sticky : 스크롤 영역 기준

• 각 요소의 방향별 거리 지정 : top, bottom, left, right (음수도 가능)

  1. 기본값 : auto(브라우저가 거리를 계산)
  2. 단위 : px, em, rem 등

  요소를 배치할 때에는 "기준"을 먼저 잡고 나서 위치 값을 지정(선언)해준다.
  이 때 사용하는 CSS 속성들이 위/아래/좌/우 속성들이며 모두 음수까지 사용 可

• 각 기준별 예시

  1. relative 예시 : 요소 자신을 기준으로 배치(2번째 요소에 대한 선언)
     position : relative;
     top : 30px;
     left : 30px; > top과 left 속성이 부여되어야 배치된다
     
  2. absolute 예시: 위치 상 부모 요소가 기준('위치' 상의 부모 요소를 꼭 확인해야 한다)
     position : relative; > 위치 상 부모요소에 선언(지정해줌), 연보라색 container에 선언했다고 가정.
     position : absolute;
     top : 30px;
     right : 30px
     

stack order(요소 쌓임 순서)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지)를 결정

• 요소 쌓임 순서 결정 조건
  1. 요소에 position 속성의 값이 있는 경우 위에 쌓임
  2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
  3. 1번과 2번 조건까지 같은 경우. HTML의 다음 구조
• z-index : 요소 쌓임의 정도를 지정
  1. 기본값 : auto = 0; (부모요소와 동일한 쌓임 정도)
  2. 숫자가 높을 수록 위에 쌓임(음수도 사용 가능하지만, -1이하는 잘 안 쓴다)
• 요소의 display 변경
  1. position 속성의 값으로 absolute, fixed가 지정된 요소는 diplay:block으로 변경됨

flex

Flex(정렬)

1차원의 layout을 만드는 개념

• flex container : 부모요소에 diplay:flex;를 지정하면 flex-container가 된다

  1. display : flex container의 화면 출력(보여짐)의 특성
     • flex : 블럭요소와 같이 flex container 정의
     • inline-flex : 인라인 요소와 같이 flex container 정의
  2. flex-direction : 주 축을 설정(수평정렬 or 수직정렬)
     • row : 행 축(좌 -> 우)
     • row-reverse : 행 축(우 -> 좌)
     • column : 열 축(위 -> 아래)
  3. flex-wrap : flex itmems 묶음(줄바꿈) 여부
     • nowrap : 묶음(줄바꿈) 없음(기본값)
     • wrap : 여러 줄로 묶음
  4. justify-content : 주 축(수평축)의 정렬방법 => 수평정렬의 방법을 결정한다
     • flex-start : flex items를 시작점으로 정렬
     • flex-end : flex items를 끝점으로 정렬
     • center : flex items를 가운데로 정렬
  5. align-content : 교차축의 여러 줄 정렬 방법 => 수직정렬의 방법을 결정한다
     - stretch : flex items를 교차 축으로 늘림(기본값)
     - flex-start : flex items를 각 줄의 시작점으로 정렬(시작하는 교차축쪽으로 다 붙인다)
     - flex-end : flex items를 각 줄의 끝점으로 정렬(끝내는 교차축 쪽으로 모두 붙인다)
     - center : flex items를 가운데로 정렬

     align-content 동작의 전제 조건
     1.flex-wrap : wrap; > 묶음 상태여야 한다
     2.정렬 후에 container에 빈 공간이 있어야 한다
     3.실제로 item이 한 줄이 아닌 두 줄 이상이어야 한다

  6. align-items : 교차축(수직축)의 한 줄 정렬 방법. (item 묶음이 여러 개일 때, 그 중 한 줄 의미)
     • stretch : flex items를 교차 축으로 늘림(기본값)
     • flex-start : flex items를 각 줄의 시작점으로 정렬
     • flex-end : flex items를 각 줄의 끝점으로 정렬
     • center : flex items 각 줄의 가운데로 정렬

• flex item : flex-container의 자식요소는 flex items라고 부른다

  1. order : flex item에 정렬되는 순서

     • 0 : 기본값. 순서 없음.
     • 숫자 : 숫자가 작을 수록 순서가 먼저(앞에 정렬된다)
       
       ex) item 숫자가 작을 수록 앞에 정렬된다 if) A(0), B(17), C(-1), D(2)
       : itme 정렬 순서는 C, A, D, B

  2. flex-grow : flex item의 증가 너비 비율

     • 기본값 : 0 (증가 비율 없음, 다른 숫자로 설정하면 요소가 숫자만큼의 비율로 증가)
     • contents가 요소 안에 있는 상태에서 flex-grow를 쓰려면, 'flex-basis=0'으로 선언해줘야 한다

  3. flex-shrink : flex item의 감소 너비 비율

     • 기본값 : 1(flex container 너비에 따라 감소비율 적용, 다른 숫자로 설정하면 요소가 숫자만큼의 비율로 감소)

  4. flex-basis : flex item의 공간배분 전 기본 너비

     • auto : 요소의 content 너비
     • 단위 : px, em, rem 등 단위의 너비