front-end 국비과정 일차 9일차 학습일지 CSS에서 사용되는 핵심속성2

css 배치

position:요소의 위치를 설정하는 기준점을 잡는다
기본값: static
속성 값
static: 기준 없음
relative: 요소 자신을 기준으로 삼는다
absolute: 위치상 부모 요소(상위 요소 중 position속성이 명시된 가장 가까운 요소)를 기준으로 삼음
fixed: 뷰포트(브라우저 화면)을 기준으로 삼음
sticky: 스크롤 영역을 기준으로 삼음

position속성으로 기준점을 잡고 방향을 이동시키는 속성
top:기준점의 윗 부분으로 부터 값만큼 밀어낸다
bottom:기준점의 아랫 부분으로 부터 값만큼 밀어낸다
left: 기준점의 왼쪽 부분으로 부터 값만큼 밀어낸다
right: 기준점의 오른쪽 부분으로 부터 값만큼 밀어낸다

z-index:요소가 겹쳤을때 우선적으로 보일 요소를 설정한다
기본값 :auto 0으로 인지한다
설정값 : 숫자(음수값을 허용한다) , 숫자가 높을수록 위에 쌓인다

top, bottom, left, right는 음수 값을 허용한다 
position 속성값으로 absolute와 fixed를 사용한 요소는 display가 block요소로 변경된다

css FLEX : 1차원 레이아웃으로써 요소를 수평 정렬한다 
FLEX는 container(부모요소)와 items(자식 요소)를 형성하여 사용하는 속성이다 이때 container의 사용할 수 있는 속성과 items의 사용할 수 있는 속성이 개별적으로 존재한다

container의 부여 할 수 있는 속성

1 display:flex/display:inline-flex: 요소의 flex를 사용하겠다고 선언하는 기능이 있고 flex와 inline-flex의 차이는 요소의 쌓임이다 container가 flex는 수직으로 쌓이고 inline-flex는 container가 수평으로 쌓인다

2 flex-direction: items의 주축(요소가 쌓이는 방향)을 설정한다 
기본값:row
속성값:
row: 요소가 좌-> 우 방향으로 쌓임
row-reverse:요소가 우-> 좌 방향으로 쌓임
column:요소가 위->아래 방향으로 쌓임
column-reverse: 요소가 아래-> 위 방향으로 쌓임

3 flex-wrap: items 요소가 container의 가로나비를 초과했을 때 items를 줄 바꿈 할지 여부를 설정한다
기본값:nowrap
속성값: 
nowrap: items를 줄 바꿈 하지 않고 items의 크기를 줄인다 
wrap:items를 줄 바꿈 한다.
  
4 justify-content: 주축으로 쌓인 items의 정렬 방법을 설정한다
기본값:flex-start
속성 값:
flex-start: 주축을 기준으로 요소가 쌓이는 시작점에 items를 정렬한다
flex-end: 주축을 기준으로 요소가 쌓이는 끝점에 items를 정렬한다
center:주축의 가운데 items를 정렬한다 
space-between(container의 여백이 있을 때만 사용 가능): 주축을 기준으로 첫 번째 item은 주축의 시작 부분에 마지막 item은 주축의 끝부분에 정렬시킨 후 나머지 items는 균등한 여백을 가진 채로 정렬한다
space-around(container의 여백이 있을때만 사용 가능) : 주축을 기준으로 items의 동일한 여백을 가진 채로 정렬한다

5 align-content:교차 축(주축의 방향과 교차되는 축)이 여러줄 일 때 정렬 방법을 설정한다
기본값 : stretch
속성값:
stretch: container의 공백이 있은 경우 items가 공백을 채우기 위해 늘어난다(height값을 명시하지 않은 경우에)
flex-start: 교차축을 기준으로 시작점에 items를 정렬한다
flex-end: 교차축을  기준으로 끝점에 items를 정렬한다
center:교차축의 가운데 items를 정렬한다
space-between(container의 여백이 있을때만 사용 가능): 교차축을 기준으로 첫 번째 item은 주축의 시작 부분에 마지막 item은 주축의 끝부분에 정렬시킨 후 나머지 items는 균등한 여백을 가진 채로 정렬한다
space-around(container의 여백이 있을때만 사용 가능) : 교차축을 기준으로 items의 동일한 여백을 가진 채로 정렬한다

6 align-items:교차 축(주축의 방향과 교차되는 축)이 한 줄 일 때 정렬 방법을 설정한다.
기본값: stretch
속성값:
stretch: container의 공백이 있은 경우 items가 공백을 채우기 위해 늘어난다(height값을 명시하지 않은 경우에)
flex-start: 교차축을 기준으로 시작점에 items를 정렬한다
flex-end: 교차축을 기준으로  끝점에 items를 정렬한다
center: 교차축의 가운데 items를 정렬한다

items의 부여 할 수 있는 속성 

1 order: items의 배치 순서를 결정한다 
기본값:0(배치 순서가 html구조대로 배치됨)
속성 값: 숫자(음수 값을 허용한다) 숫자가 작을수록 앞에 배치됨

2 align-self:교차축을 기준으로 item하나의 정렬 방법을 설정한다.
기본값: auto
속성값: 
auto: container(부모 요소)의 명시된 align-items 속성 값을 상속받는다
stretch: container안에 교차축의 공백을 채우기위해 items(자식 요소)의 크기를 늘림 (단 height값이 auto일 경우에만)
flex-start: container(부모요소)안에서 item(자식 요소 하나)를 교차축에 시작점에 정렬시킨다
flex-end: container(부모요소)안에서 item(자식 요소 하나)를 교차축에 끝점에 정렬시킨다
center: container(부모요소)안에서 item(자식 요소 하나)를 교차축에 가운데 정렬시킨다

3 flex-grow: item의 증가 비율을 설정함
기본값: 증가 비율x
속성 값: 숫자(비율에 따라 items가 늘어남)

4 flex-shrink: item의 감소 비율을 설정함
기본값: 감소 비율x
속성 값: 숫자(비율에 따라 items가 줄어듬)

5 flex-basis: shink/grow를 사용하기 전에 기본 너비를 설정함
기본값:auto(item에 설정된 값)
설정값: CSS단위

전환(Transitions) : 전환 효과를 설정하여 중간에 애니메이션을 을 넣어준다

transition-property :  전환 효과를 부여할 css속성에 이름을 설정한다.
기본값:all
transition-property의 속성값 
1 all : 해당 요소에 모든 css속성에 전환 효과를 부여한다.
2 속성이름:  명시한 css속성에만 전환 효과를 부여한다

transition-duration : 전환 효과의 동작 시간을 설정한다
기본값:0s 

transition-duration의 속성값 
숫자를 이용하여 동작시간을 명시한다 ex) transition-duration : 5s;

transition-delay : 전환 효과의 대기시간을 설정한다
기본값:0

transition-delay의 속성 값:
숫자를 이용하여 동작시작을 지연시킨다  ex) transiton-delay : 3s;

transition-timing-function : 타이밍 함수를 지정한다 

타이밍 함수란? :  전환효과(transition)가 동작할 때 동작 시작과 끝의 속도를 설정하는 것을 의미함

기본값 : ease 

transition-timing-function의 속성값 :
ease : 애니메이션이 동작할때 시작 구간 = 빠르게, 끝 구간  = 느리게 동작한다.
linear: 애니메이션이 동작할때 모든 구간이 일정하게 동작한다.
ease-in: 애니메이션이 동작할때 시작 구간이 느리고 점점 빨라진다.
ease-out:애니메이션이 동작할때 시작 구간이 빠르고 점점 느려진다.
ease-in-out : 애니메이션이 동작할때 시작 구간 = 느리게, 중간구간 = 빠르게, 끝 구간 = 느리게 동작한다.

변환(transform) : 함수를 이용하여 요소의 변환 효과를 설정한다.

2D 변환(transform) 함수모음  (큰 틀로 보면 요소에 이동, 회전, 기울임, 크기를 설정한다)

translate(x, y): 요소를 x값(가로축), y값(세로축) 만큼 이동시킨다 이때 단위는 px ,%,em 등등을 사용한다
translateX: 요소를 x값(가로축)만큼 이동시킨다. 이때 단위는 px,%,em 등등을 사용한다
translateY: 요소를 y값(세로축)만큼 이동시킨다. 이때 단위는 px,%,em 등등을 사용한다.
scale(x, y): 요소를 x값(가로축), y값(세로축) 만큼 크기를 늘리고 줄인다 이때  숫자를 이용한 배수를 사용한다
scaleX: 요소를 x값(가로축)만큼 크기를 늘리고 줄인다 이때 숫자를 이용한 배수를 사용한다 
scaleY: 요소를 y값(세로축)만큼 크기를 늘리고 줄인다 이때 숫자를 이용한 배수를 사용한다.
rotate(deg): 요소를 ()안에 각도 값만큼 회전시킨다 이때 deg라는 단위를 사용하는데 deg는 각도를 나타낸다
skew(x-deg, y-deg) : 요소를 x-deg값(가로축), y-deg값(세로축) 만큼 기울인다 이때 deg는 각도를 나타낸다.
skewX(x-deg): 요소를 x-deg값(가로축)만큼 기울인다.
skewY(y-deg): 요소를 y-deg값(세로축)만큼 기울인다.

이때  모든함수에 x값은 양수일 때=오른쪽 음수일 때=왼쪽 y값은 양수일 때=아래쪽 음수일 때=위쪽으로 이동한다