[2-3] 웹 명함 구축하기 (1) - CSS 정리 (vw,vh,position,inline,grid)

vw, vh

CSS의 반응형 단위
= 대표적으로 vw, vh, rem, em을 자주 사용

vw - 화면의 가로
vh - 화면의 세로
ex) 100vw
뷰포트의 전체 영역을 100%라고 생각해서
100vw 라고 함.


em - 부모 폰트 사이즈 영향. 상속(상대) 개념
rem - 절대 개념

display: inline, display:inline-block

display: inline 하고
display: inline-block 차이

display: inline
= 딱 자기 컨텐츠 영역만 차지
= 가로 정렬이 된 것처럼 보임.
= 높이가 지정이 안됨.

- 높이를 지정해도 설정이 되지 않음.





display: inline-block
- 자기 컨텐츠 만큼 차지
- 높이 값 지정 가능

= 인라인 요소지만, 블록 속성 가짐.
= 높이 값을 바꿔주지 못했던 기존 인라인 요소와 달리
블록 속성이 추가돼서 하위 값을 지정할 수 있음.
= 인라인 요소기 떄문에 자기 컨텐츠 만큼 차지를 해서 가로 정렬처럼 보임.
= 중간에 인라인 요소가 끼어든다면, 해당 요소에 높이값은 지정되지 않은 채 차이를 보이게 됨.

display:grid

display: grid;
자식 요소들 끼리의 행/열을 가지는 그리드.

grid-row
grid-template-row
grid-column
grid-template-column
등의 속성을 함께 사용해야만
grid의 제 모습 볼수 있음.

position

position 속성
(5 가지 속성)
top
right
bottom
left
z-index
속성 같이 쓰임

기본 값 - static
포지션과 쓰이는 5가지 속성은
static 일 때는 적용되지 않음.

속성들이 적용되기 위해서는
relative를 함께 써야함.

fixed = 브라우저의 "뷰포트" 기준으로 절대 위치로 이동.
sticky = 평소에는 static 처럼 자리.
컨테이너가 스크롤 되면서 요소가 사라질 무렵에는 위치 속성이 지정한 위치에서 고정되어 멈춤.

psoition: relative
원래 위치에서 상대적인 값을 추가해서 가짐

position을 다주고 (기본적으로 띄우는 속성)
z-index (더 띄우는 속성) 를 지정하지 않으면
뒤에 만들어놓은 엘리먼트가 우선적으로
위로 올라옴.

position: fixed
= absolute와 달리
브라우저 뷰포트 기준으로 위치 지정
= 스크롤 할 때 위치 변하지 않음

position: sticky
= 인계점에 다다르면
position 값에 가서 고정이 됨.
= 그 전에는 static 을 유지하는 속성