9일차 CSS 배치(position), 정렬(flex), 전환, 변환
1. 배치
1-1. position
position : 요소의 위치 지정 기준
기본 값 : static(기준 없음)
-
position: relative; => 요소 자신을 기준, 화면에는 아무런 변화가 없다.
만약 뷰포트 기준이 아닌 다른 요소를 기준으로 삼고 싶다면 해당 요소에 position: relative;를 사용해주면 된다. -
position: absolute; => 위치 상 부모 요소를 기준, 위치 상 부모 요소를 꼭 확인해야 한다.
position: absolute;를 부여하게 되면 결과적으로 부여되어져 있는 요소에 주변과의 상호 작용이 무너진다.
★ 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다. -
position: fixed; => 뷰포트(브라우저)를 기준
★ 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다. -
position: sticky; => 스크롤을 기준
- 가장 가까운 조상 스크롤 박스(보통 뷰포트, overflow도 가능)에 달라붙는다.
- 가장 가까운 블록 요소인 조상(통상적으로 부모) 요소 범위 안에서만 움직인다.
아래는 예시에 관한 코드 이다.
<div class="grand">
<div class="parent">
<div class="child c1"></div>
<div class="child c2"></div>
</div>
</div>
<!--main.css-->
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 Items로 바뀌게 된다. 부모 요소에 쓰도록 권장!
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-item : 교차 축의 ★한 줄 정렬 방법
기본 값 : stretch(Flex Items를 교차 축으로 늘림)
flex-wrap: wrap; 이 있어야 사용 가능하다.
- align-item: flex-start; => Flex Items를 각 줄의 시작점으로 정렬, 수직 위
- align-item: flex-end; => Flex Items를 각 줄의 끝 정렬, 수직 아래
- align-item: 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>
<!--main.css-->
.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) => 함수, 적용대상 : 관찰 대상
기준점 설정 : transform-origin
Author And Source
이 문제에 관하여(9일차 CSS 배치(position), 정렬(flex), 전환, 변환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@toffg6450/9일차-CSS-배치-Flex-전환-변환저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)