[프론트엔드] CSS 5

align-items
플렉스 요소들의 수직방향 정렬 방식을 설정

stretch : 기본설정, 플렉스 요소의 높이가 컨테이너의 높이와 같게 변경된 뒤 연이어서 배치된다.
flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치된다. (기준선은 위쪽)
flex-end : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치된다. 
baseline : 플렉스 요소는 플렉스 컨테이너의 기준선에 배치된다. 

align-self 
플렉스 요소마다 서로 다른 align 속성값을 설정할 수 있다.

order
플렉스 요소들의 순서를 설정

flex-grow
플렉스 아이템들이 차지할 너비들에 대한 증가형 숫자를 지정
flex-shrink
플렉스 아이템들이 차지할 너비들에 대한 감소형 숫자를 지정
flex-basis
플렉스 아이템들의 길이를 지정

flex
flex의 속성을 한꺼번에 설정

미디어쿼리
width, height, color, ... 속성과 같은 미디어 관련 표현식을 통해 
스타일이 적용되는 범위를 조절(반응형 개발)
컨텐츠를 별도로 변경하지 않아도 웹 페이지에 접속하고 있는 기기에 따라 알맞은 형태로 스타일을 조절

장점 : UI 고급화, 유지관리와 업데이트
단점 : 구현이 어렵다, 다운로드 속도가 느려진다. 

@media 매체유형 and 조건 ... {
적용할 스타일 코드
}

매체유형
- all : 모든 매체
- screen : 컴퓨터, 태블릿, 스마트폰, ...
- print  : 프린터 기기
- speech  : 스크린 리더

* 상대 크기 em / rem
em 단위는 상위 요소 크기의 몇 배인지를 나타내는 크기
rem 단위는 문서의 최상위 요소, 즉 html 요소 크기의 몇 배인지를 나타내는 크기