[CSS] 요소 위치 관련 프로퍼티

7097 단어 CSSCSS

PoiemaWeb CSS3 Section

기본

position

설명좌표 프로퍼티 사용 가능
static
(default)
부모 요소 내에 위→아래, 왼→오 방향으로 배치X
relativestatic과 동일하게 작동
아무것도 적용하지 않은 원래 자신의 위치를 기준으로 이동
O
absolutestatic이 아닌 가장 가까운 부모 요소를 기준으로 위치를 정함
block 레벨 요소라도 width값이 content의 크기에 맞춰짐
부모 요소를 벗어날 수 있음
O
fixedviewport를 기준으로 위치함 → 스크롤해도 이동하지 않음
block 레벨 요소라도 width값이 content의 크기에 맞춰짐
O

z-index

기본적으로 나중에 쓰여진 요소가 위에 덮여져서 렌더링 되지만 z-index프로퍼티를 이용하여 그 순서를 조정할 수 있음

  • 값이 클 수록 더 위에 렌더링
  • static이 아닌 요소에만 적용 가능

overflow

자식 요소가 영역을 벗어날 때 부모 요소에 해당 프로퍼티를 설정 어떻게 처리할 것인지 명시

  • visible(default) : 자식 요소가 영역을 벗어나도 표시
  • hidden : 영역을 벗어나는 부분을 표시하지 않음
  • scroll : 영역을 벗어나는 부분이 없어도 스크롤을 표시 → 현재 대부분 auto와 동일하게 작동
  • auto : 영역을 벗어난 부분이 있을 때만 스크롤 표시

overflow-x, overflow-y

특정 방향에 대해서만 명시하고 싶다면 해당 프로퍼티에 위 값을 적용하여 선언


2D Transform

좌표를 지정하듯이 요소의 위치를 정의함

transform: transform_func1 transform_func2 transform_func3 ...;

transform 프로퍼티 값으로 적용할 transform function들을 나열
주로 트랜지션으로 애니메이션을 구현할 때 거의 필수적으로 사용 (이외의 경우에도 사용가능)

transform-origin

아래 transform function을 적용할 때 기준이 되는 점을 설정 할 수 있음
기본 값은 요소의 정중앙 50% 50%
설정 값으로 %, px, top left, bottom right를 적용할 수 있음
직접 값을 적용할 경우 기준은 topleft에 대해 적용

/* 아래 두 선언은 동일함 */
transform-origin : 0 0;
transform-origin : top left;

transform function

  • translate(x,y) : 일반적인 위치 단위 사용
  • scale(x,y) : 0과 양수
  • skew(x-angle, y-angle) : 각도
  • rotate(angle) : 각도

Flexbox layout

요소들을 정렬시키고자 할때 편리
부모요소에

display:flex;

/*만약 부모 요소(지금 이 선언을 하는 요소)가 inline 요소라면*/
display:inline-flex;

를 선언하여 flexbox를 사용할 수 있음
이때 부모 요소를 flexbox container, 자식요소들을 flexbox item이라고 부름

Flexbox container 프로퍼티

자식 요소인 item을 어떻게 배치 할 것인지
중요한 것은 여기서 수평, 수직이라는 말은 flex-direction값에 의존함

  • flex-direction : item들을 배치할 방향

    • row / row-reverse : 가로
    • col / col-reverse : 세로
  • flex-wrap : item들을 몇 줄에 걸쳐 표현할 것인지

    • nowrap : 한 줄에 모두 표시, item들의 크기 조정 → 그래도 넘칠 경우 overflow 지정
    • wrap, wrap-reverse : 여러 줄로 나누어 표시, 왼→오는 일정
  • justify-content : item의 수평 정렬 방법(순서 조정X)

    • flex-start / flex-end / flex-center : 왼쪽/오른쪽/가운데 정렬, 공간X
    • space-between / space-around : item 사이사이 공간을 넣어 균등하게 정렬, between의 경우 item 사이에 균등한 공간이 적용됨
  • align-items : item의 cross-axis 정렬 방법

    • stretch : flexbox container에 꽉 차는 높이를 가짐
    • flex-start / flex-end / flex-center : 위/아래/가운데 정렬
    • base-line : 을 기준으로 정렬 예시
  • align-content : item줄의 cross-axis 정렬 방법

    • stretch : 각 줄 아래(이후)에 공간을 두어 균등하게 정렬
    • flex-start / flex-end / flex-center : 위/아래/가운데 정렬, 공간X
    • space-between / space-around : item 사이사이 공간을 넣어 균등하게 정렬, between의 경우 item 사이에 균등한 공간이 적용됨

    align-itemsalign-content 의 차이
    같은 기능을 하는 것은 맞음, 둘 다 flex-directioncross-axis 에 대해 동작

    • align-items의 경우 각 줄의 cross-axis에 대한 item들의 정렬 방식을 결정하고
    • align-content의 경우 각 줄이 flexbox container에 대해 어떠한 정렬 방식을 가질 것인지를 결정, 그래서 한 줄인 flex-wrap:nowrap; 이 선언되어 있다면 의미가 없음, justify-content와 동일한 기능이라고 생각하면 될 듯

Flexbox item 프로퍼티

float, clear, vertical-align 프로퍼티를 적용할 수 없음

  • order : default는 0, 기본적으로는 추가된 순서에 따르지만 해당 값으로 순서를 정해줄 수 있음, 음수도 가능

  • flex-grow : default는 0, 기본적으로는 모든 요소가 동일한 너비를 가지게 되는데 이를 이용하여 다른 요소의 몇 배인지를 지정해줄 수 있음

  • flex-shrink : default는 1, 기본적으로는 container에 맞추기 위해 모든 요소의 너비가 축소되게 되는데 이를 0으로 바꿔주면서 축소를 취소할 수 있음(원래 너비 유지)

  • flex-basis : default는 auto, 너비를 px, %, rem등의 단위로 지정할 수 있게함 flex-basis:350px;

flex-로 시작하는 프로퍼티의 shorthand로 flex를 사용할 수 있지만 따로 사용하는 것을 권장함

  • align-self : align-items와 동일한 역할을하고 동일한 프로퍼티 값을 가지지만 align-items보다 우선시되어 적용

좋은 웹페이지 즐겨찾기