9일차 CSS 배치(position), 정렬(flex), 전환, 변환

변승훈·2022년 4월 7일

CSS

KDT 핀테크 프론트엔드 개발자 2기 배운 내용

목록 보기

10/37

1. 배치

1-1. position

position : 요소의 위치 지정 기준
기본 값 : static(기준 없음)

position: relative; => 요소 자신을 기준, 화면에는 아무런 변화가 없다.
만약 뷰포트 기준이 아닌 다른 요소를 기준으로 삼고 싶다면 해당 요소에 position: relative;를 사용해주면 된다.
position: absolute; => 위치 상 부모 요소를 기준, 위치 상 부모 요소를 꼭 확인해야 한다.
position: absolute;를 부여하게 되면 결과적으로 부여되어져 있는 요소에 주변과의 상호 작용이 무너진다.
★ 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.
★header(뷰포트)에서 width: auto를 사용하면 이 경우 최대로 넓어짐 -> 최소로 사용하는 것으로 바뀐다. 그러므로 width:100%를 사용하자.
position: fixed; => 뷰포트(브라우저)를 기준
★ 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.
★header(뷰포트)에서 width: auto를 사용하면 이 경우 최대로 넓어짐 -> 최소로 사용하는 것으로 바뀐다. 그러므로 width:100%를 사용하자.

position: sticky; => 스크롤을 기준

가장 가까운 조상 스크롤 박스(보통 뷰포트, overflow도 가능)에 달라붙는다.
가장 가까운 블록 요소인 조상(통상적으로 부모) 요소 범위 안에서만 움직인다.
아래는 예시에 관한 코드 이다.

<div class="grand">
    <div class="parent">
      <div class="child c1"></div>
      <div class="child c2"></div>
    </div>
  </div>

  body {
    width: 4000px;
    height: 9000px;
  }
  .grand {
    width: 400px;
    height: 300px;
    background-color: royalblue;
  }
  .parent {
    width: 300px;
    height: 200px;
    background-color: orange;
  }
  .child {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 2px solid;
  }
  .child.c1 {
    position: sticky;
    top: 0;
    left: 0;
  }
  .child.c2 {

  }
  /* 뷰포트 대신 overflow이용 코드, 다음 선택자만 코드 수정 */
  .parent {
    width: 2000px;
    height: 2000px;
    background-color: orange;
  }
  .grand {
    width: 400px;
    height: 300px;
    background-color: royalblue;
    overflow: auto;
  }

top, bottom, left, right, z-index(쌓임 순서) : position과 같이 사용하는 CSS 속성들이다.
모두 음수를 사용할 수 있다.

1-2. top, bottom, left, right

top, bottom, left, right : 요소의 각 방향별 거리 지정
기본 값 : auto(브라우저가 계산)
단위 : px, em ,rem 등

1-3. 요소 쌓인 순서(Stack order)

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

요소에 position 속성의 값이 있는 경우 위에 쌓인다.(기본 값 static 제외)
1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓인다.
1번과 2번 조건까지 같은 경우, HTML의 다음(나중) 구조일 수록 위에 쌓인다.

z-index : 요소의 쌓임 정도를 지정
기본 값 : auto(부모 요소와 동일한 쌓임 정도), 숫자가 높을수록 위에 쌓인다.

1-4. 요소의 display가 변경됨

position 속성의 값으로 absolute, fixed가 지정된 요소는, display: block;으로 변경된다.

2. Flex(정렬)

2-1. display

display : Felx Container의 화면 출력(보여짐) 특성

display: flex; => Flex Container를 기준으로 블록 요소로 변한다.
자식 요소들은 Flex Items로 바뀌게 된다. 부모 요소에 쓰도록 권장!
display: inline-flex; => Flex Container를 기준으로 인라인 요소로 변한다.

2-2. Flex Container

Flex container에 부여할 수 있는 속성들 :
display, flex-flow, flex-decoration, flex-wrap, justify-content, align-content, align-items

flex-direction : 주 축을 설정
기본 값 : row(행 축, 좌=>우)

flex-direction: row-reverse; => 행 축, 우=>좌
flex-direction: column; => 열 축, 위=>아래
flex-direction:: column-reverse; => 열 축, 아래=>위

flex-wrap : Flex Items 묶음(줄 바꿈)여부
기본 값 : nowrap(묶음 없음)

flex-wrap: wrap; => 여러 줄로 묶음

justify-content : 주 축의(x축, 수평) 정렬 방법
기본 값 : flex-start(Flex Items를 시작점으로 정렬, 왼쪽정렬)

justify-content: flex-end; => Flex Items를 끝점 정렬, 오른쪽 정렬
justify-content: center; => Flex Items를 가운데 정렬
justify-content: space-between; => 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
justify-content: space-around; => Items를 균등한 여백을 포함하여 정렬

align-content : 교차(★수직) 축의 ★여러 줄(수평) 정렬 방법
기본 값 : stretch(Flex Items를 시작점으로 정렬)
flex-wrap: wrap; 이 있어야 사용 가능하다.

align-content: flex-start; => Flex Items를 시작점으로 정렬, 왼쪽 정렬
align-content: flex-end; => Flex Items를 끝 정렬, 오른쪽 정렬
align-content: center; => Flex Items를 가운데 정렬
align-content: space-between; => 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
align-content: space-around; => Items를 균등한 여백을 포함하여 정렬

align-items : 교차 축의 ★한 줄 정렬 방법
기본 값 : stretch(Flex Items를 교차 축으로 늘림)
flex-wrap: wrap; 이 있어야 사용 가능하다.

align-items: flex-start; => Flex Items를 각 줄의 시작점으로 정렬, 수직 위
align-items: flex-end; => Flex Items를 각 줄의 끝 정렬, 수직 아래
align-items: center; => Flex Items를 각 줄의 가운데 정렬, 수직 가운데

아래의 예시 코드에서 하나 하나 경우를 주석해보고 실행 해보자.

<div class="container">
    <!-- .itme{$$}*7 -->
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
    <div class="item">05</div>
    <div class="item">06</div>
    <div class="item">07</div>
  </div>

  .container {
    height: 400px;
    margin: 30px;
    border: 2px solid red;
    display: flex;

    /* 수평 정렬 방법 */
    justify-content: flex-start;
    justify-content: center;
    justify-content: flex-end;
    justify-content: space-between;
    justify-content: space-around;

    /* 수직 정렬 방법 */
    align-items: flex-start;
    align-items: center;
    align-items: flex-end;

    /* item이 두줄 이상일 때 */
    flex-wrap: wrap;
    /* 기본 값: stretch 쭉 늘려라 */
    align-content: flex-start;
    align-content: center;
    align-content: flex-end;
    align-content: space-between;
    align-content: space-around;

    /* item이 한 줄 일때 */
    align-items: flex-start;
    align-items: center;
    align-items: flex-end;

  } 
  .item {
    width: 100px;
    height: 100px;
    border: 2px solid;
    font-size: 40px;
  }

2-3. Flex Items

Flex Items에 부여할 수 있는 속성들 :
order, flex, flex-grow, flex-shrink, flex-basis, align-self

order : Flex Item의 정렬되는 순서
기본 값 : 0(순서 없음), 숫자가 작을 수록 먼저 정렬된다. 음수도 사용 가능하다.
flex : flex-grow, flex-shrink, flex-basis의 단축 속성
flex-grow : Flex Item의 증가 너비 비율
기본 값 : 0(증가 비율 없음), 숫자로 증가 비율을 지정 가능하다.

예시로 위의 사진을 보면 1, 2번 상자는 flex-grow가 1, 3번 상자는 flex-grow가 2이다.

flex-shrink : Flex Item의 감소 너비 비율
기본 값 : 1(Flex Container 너비에 따라 감소 비율 적용, 숫자로 감소 비율을 지정 가능하다.

예시로 위의 사진을 보면 실제로는 파란색 영역 안에 주황색 1, 2, 3번 요소가 찌그러져서 들어가야 한다.
하지만 flex-shrink: 0;을 사용하여 해당 요소의 크기를 비율 감소를 0으로 적용시키지 않아 유지 시킨것을 볼 수 있다.

flex-basis : Flex Item의 공간 배분 전 기본 너비
기본 값 : auto(요소의 Content 너비)
기본너비(auto면 글씨영역)를 제외한 남은 영역을 비율로 계산해 지정
단위 : px, em, rem 등

3. Transition(전환)

transition : 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

transitiotn : 속성명 지속시간 타이밍 함수 대기시간;
transitiotn-property : 전환 효과를 사용할 속성명을 지정
기본 값 : all(모든 속성에 적용), 전환 효과를 사용할 속성 이름 입력해서 사용한다.
transitiotn-duration : 전환 효과의 지속시간을 지정, 단축형으로 작성할 때 필수 포함 속성이다.
기본 값 : 0s(전환 효과 없음), 시간을 입력하여 지속시간(s)을 설정한다.
transitiotn-timing-function : 전환 효과의 타이밍(Easing) 함수를 지정
기본 값 : ease(느리게-빠르게-느리게)

linear : 일정하게
ease-in : 느리게 - 빠르게
ease-out : 빠르게 - 느리게
ease-in-out : 느리게 - 빠르게 - 느리게

tansition-delay : 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
기본 값 : 0s(대기시간 없음), 시간을 입력하여 대기시간을 설정한다.

4. Transform(변환)

tranform : 요소의 변환 효과

사용 법

transform: 변환함수1 변환함수2 변환함수3 ...;
transform: 원근법 이동 크기 회전 기울임;

2D 변환 함수

px(픽셀)
translate(x,y) : 이동(x축, y축)
translateX(x) : 이동(x축)
translateY(y) : 이동(y축)
scale(x, y) : 크기(x축, y축)
deg(각도)
rotate(degree) : 회전(각도)
skewX(x) : 기울임(x축)
skewY(y) : 기울임(y축)

3D 변환 함수

px(픽셀)
perspective(n) : 원근법(거리), transform 제일 앞부분에적어줘야 한다!
deg(각도)
rotateX(x) : 회전(x축)
rotateY(y) : 회전(y축)
backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부
기본 값 : visible(뒷면 보임), 뒷면을 숨길려면 hidden을 해주면 된다.

5. perspective

pespective : 하위 요소를 관찰하는 원근 거리를 지정, CSS 속성이다.
단위 : px 등

perspective 속성과 함수 차이점

perspective: 600px; => 속성, 적용대상 : 관찰 대상의 부모
기준점 설정 => perspective-origin
transform: perspective(600px) => 함수, 적용대상 : 관찰 대상
★ perspective 함수는 맨 앞에다 먼저 작성을 해줘야 한다.
기준점 설정 => transform-origin: 100% 0%; (x축, y축)