참고사항.

BEM 
CSS 작명 규칙
- : 일반적인 작명
__  : ~의 일부분
--  : ~의 상태

display: flex 이유?

box-sizing: border-box;
; padding, border 값의 영향을 받지 않고 width, height 값의 크기를 가진다.

position: absolute;
; 부모의 위치 값을 기준.(부모의 position 값 확인)

position: relative;
; 자신의 위치 값을 기준. 

position: fixed;
; 현재 보고 있는 브라우저 전체장 기준.(스크롤에도 이동하지 않고 고정)

한번에 제어할 수 있는 형태로 구조를 잡기.

한 단어로 보이기 위해  를 사용한다.

반응형 사이즈를 표현하기. (ex. div>img)
div 에 사이즈가 정해져있어야 하고 img에 max-width를 100%, box-sizing: border-box 로 설정.

과거 브라우저 지원하려면
float: left, width: 25%..반드시 부모 요소에 clearfix 를 확인할것.