[CSS] 요소 위치 관련 프로퍼티
PoiemaWeb CSS3 Section
기본
position
⭐
position
⭐값 | 설명 | 좌표 프로퍼티 사용 가능 |
---|---|---|
static (default) | 부모 요소 내에 위→아래, 왼→오 방향으로 배치 | X |
relative | static과 동일하게 작동 아무것도 적용하지 않은 원래 자신의 위치를 기준으로 이동 | O |
absolute | static이 아닌 가장 가까운 부모 요소를 기준으로 위치를 정함 block 레벨 요소라도 width값이 content의 크기에 맞춰짐 부모 요소를 벗어날 수 있음 | O |
fixed | viewport를 기준으로 위치함 → 스크롤해도 이동하지 않음 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
를 적용할 수 있음
직접 값을 적용할 경우 기준은 top
과 left
에 대해 적용
/* 아래 두 선언은 동일함 */
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
: 왼쪽/오른쪽/가운데 정렬, 공간Xspace-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
: 위/아래/가운데 정렬, 공간Xspace-between
/space-around
: item 사이사이 공간을 넣어 균등하게 정렬, between의 경우 item 사이에만 균등한 공간이 적용됨
❗
align-items
과align-content
의 차이
같은 기능을 하는 것은 맞음, 둘 다flex-direction
의cross-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
보다 우선시되어 적용
Author And Source
이 문제에 관하여([CSS] 요소 위치 관련 프로퍼티), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zmin9/CSS-요소-위치-관련-프로퍼티저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)