[패스트캠퍼스:2주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/4

2주차.Chapter 03

 

01

position

---

자주 사용하고 유용하고 난발하면 문제가 되는 속성입니다!

position에는 static, relative, absolute, fixed, sticky 속성이 있어요.

같이 사용하는 속성으로 top, bottom, left, right, z-index가 있습니다.

 

요소의 위치를 지정할 수 있는 속성인데,

알아두어야 할 게, 기준이 되는 요소가 있어야 되고, 그 기준 요소를 기준으로

해당 요소의 위치를 지정할 수 있어요!

기준이 되는 요소로 지정하기 위해서 position 속성을 줘야합니다.

 

 

각 속성에 대해 자세히 우선 알아보자면

static	기본값. 기준이 될 수 없음
relative	요소 자신이 기준
absolute	position 값을 갖고있는 가장 가까운 조상 요소가 기준
fixed	뷰포트(브라우저)가 기준
sticky	스크롤 영역 기준

*또 다른 특징으로 position : absolute, fixed 속성을 갖고 있는 요소는 다른 일반 요소들과 달리 다른 층에 존재한다고 생각하셔야 됩니다.

 

 

relative

position: relative; top: 30px; left: 60px;

본인이 있던 위치를 기준으로 (본인이 기준) 위에서 30px, 왼쪽에서 60px이 띄워짐

BUT 원래 있던 자리에 자리는 차지하고 있어요!

그래서 구조상 이상한 빈 공간이 생기기 때문에,

relative 속성은 기준을 설정하기 위해서

주로 사용되고 위치를 잡기 위해서는 사용하지 않습니다!

(눈에 보이는 분홍 박스는 눈속임(?)이라고 생각하셔도 돼요.)

 

 

absoulte

배치를 위해서 자주 사용됩니다.

position: 값이 없을 떄

(파란박스에 position: relative) position: absolute; bottom: 180px; left: 0;

absolute 속성을 갖은 요소는 그 자리에서 다른 층으로 이동해요!

그래서 원래 차지하던 자리를 빼고 top, bottom, left, right의 속성 값에 따라 이동합니다.

위치 잡기 기준은 가장 가까운 조상 요소가 position relative, absolute, fixed 중에서 값을 갖고 있을 때!

그 조상이 기준이 됩니다!

(position 속성이 있는 조상을 찾을 때까지 계속 올라가요!)

(주로 relative를 기준 설정으로 사용합니다!)

 

아무 조상도 postioin이 없으면 결국 뷰포트(브라우저)가 기준이 됩니다!

 

 

fixed

항상 기준은 뷰포트!!!

position: fixed; bottom: 0; right: 0;

absolute와 동일하게 fixed도 층을 원래 구조에서 빠져나와 다른 층으로 이동합니다.

뷰포트를 기준으로 고정되어 있어서, 스크롤을 이동해도 계속 제자리를 유지해요.

 

background-attachment : fixed와 동일하게 제자리 유지!

 

 

02

z-index

---

z-index에 대해 알아보기 위해 우선 요소의 쌓임 순서에 대해 알아야 해요!

위에서 '층'에 대해 살짝 언급했는데, 이런 '층'은 position 속성을 갖은 요소가 갖게 됩니다.

(그냥 요소들은 한 층에 쌓여요!)

이렇게 컴퓨터 화면 내에서 요소들이 층층이 쌓여있다고 생각하고 읽기 시작하면 이해하기 좀 더 수월할 것 같아요!

 

1. 요소에 position이 있으면 일반속성 위에 쌓인다. (position: static은 일반속성과 동일!)

2. 두 개의 요소에 position이 있는 경우, HTML의 다음 구조일수록 위에 쌓임.

3. 두 개의 요소에 position이 있는 경우, HTML구조와 상관없이 z-index 속성의 숫자 값으로 층을 바꿀 수 있다.

HTML 구조 순서 1 > 2 > 3

HTML 구조로 보면 1번 요소가 제일 바닥에 그리고 2, 3 순서로 쌓이죠?!

근데 z-index로 이걸 완전히 바꿀 수 있어요!

 

1번 z-index: 3; 2번 z-index: 2; 3번 z-index: 1;

 

짠! 3번 요소는 2번에 가려져서 보이지도 않아요!

**** z-index는 반드시 position 속성이 필요하다는 거! relative를 줘도 가능합니다!

 

position : position/fixed 속성이 부여되면 display가 block으로 자동으로 변경됩니다!

---

 

02

flex

---

x, y축으로 레이아웃을 정렬할 수 있는 속성입니다!

부모요소에 display:flex를 주면 자식들이 수평/가로 정렬이 된다.

부모요소는 Flex Container, 자식 요소는 Flex Items로 각자에 맞는 CSS 속성이 나눠져 있어요.

 

Flex Container의 속성

display	flex, inline-flex(인라인 요소같은 flex)
flex-direction	자식요소 정렬 방법 row(수평/행), row-reverse, column(수직/열), column-reverse

display : flex;

 

display : inline-flex

 

flex-direction : row-reverse;

 

 

flex-wrap	한 줄 (기본값) nowrap, wrap
justify-content	주 축(row/column)의 정렬 방법 flex-start, flex-end, center, space-between, space-around
align-content	교차 축의 여러 줄 정렬 방식 stretch(기본값), flex-start, flex-end, center, space-between, space-around
align-items	교차 축의 한 줄 정렬 방법 stretch(기본값), flex-start, flex-end, center

Flex items 가로 100px, 세로 100px로 지정했지만,

flex-wrap: nowrap은 요소를 변형시켜서 한 줄에 다 집어넣으려고 하고,

flex-wrap: wrap은 요소를 유지하면서 줄을 바꾸는 걸 확인할 수 있어요.

 

justify-content - 수평 정렬의 종류 (flex-start/flex-end/center/space-between/space-around)

 

align-content - 여러 줄일 때 / 요소의 높이값이 지정되지 않은 상황 / 빈 공간이 있을 때 가능함 (stretch/flex-start/flex-end/center)

 

align-items - 한 줄에 대해서 (stretch / flex-start / flex-end / center)

align-items를 더 자주 사용하고, 한 줄 일때는 align-content를 사용할 수 없어요.

 

---

Flex items의 속성

order	flex item의 정렬 순서 숫자가 작을수록 먼저 정렬 (HTML 구조 수정 없이 순서 변경 가능)
flex-grow	남은 여백 채우기 비율 (남은 여백을 어떤 비율로 채울것인지 결정)
flex-shrink	감소 너비 비율 (요소가 한 줄로 정렬될 때, 요소의 변형을 어떤 비율로 적용할지 결정)
flex-basis	남은 공간을 설정

flex-grow - 남은 여백을 ㄱ - 1배율, ㄴ- 2배율로 나눠서 차지. ㄷ은 0

 

flex-shrink - 기본값은 1 / 비율에 따라 다른 크기로 줄어든다 / 값이 0 이면 원래 사이즈를 유지, 변형되지 않는다.

 

flex-basis의 기본 값은 auto로 요소의 내용이 결정 / flex-grow: 1;

 

남은 영역을 지정한 비율로 나눠서 갖게 되었으니,

내용이 많을 수록 더 넚은 영영을 차지합니다.

 

flex-basis : 0 / flex-grow: 1;

flex-basis가 0이면 남은 영역은 부모 영역과 동일해서

부모 영역을 비율 대로 나눠 갖게됩니다.

 

flex-basis: 50px;

flex-basis에 특정값을 주면,

각 요소가 해당 값 만큼 차지하고 있고, 그 나머지 영역을 지정한 비율로 나눠서 갖게 되요.

 

flex-basis: 50px; flex-grow: 1;

 

flex도 position도 자주 사용하지만

부모와 자식 요소들이 어떻게 상호작용 하는지를 이해해야 되서

익숙해 지는데 시간이 좀 걸려요ㅠㅠ

 

언제나 그렇듯, 연습을 많이 해 보는 방법 밖에는 없어요..🤦‍♀️🤦‍♀️

 

그래도 한 번 이해하게 되면, 생각보다 쉬우니까

좀 더 화이팅 해요❤❤

 

안뇽🙌