Hi

background-color: background-color:#00ff00; // 16진수: 세밀히 색상 조절background-color: rgb(0,255,0); // rgba: 필요하면 투명도도 함께 조절 가능background-color: green; // 색상 이름: 원색 사용

width: calc(100% / 12);서로 다른 단위들을 계산해 주는 메소드(함수) #{variable}을 통해 변수를 calc안에 삽입할 수 있다. ex) $size: 24px top: calc(50% - #{$size / 2})

em 단위는 부모 요소의 크기에 따라 자식 요소의 글자 크기가 바뀌기 때문에, em 수치가 계속 달라진다는 단점을 보완하기 위해 나온 단위 rem에서 r은 root를 뜻함. body {font-size: 16px;} 로 지정하면,rem은 항상 body의 폰트사이즈를 기준으로 폰트 크기를 변환한다.

justify-content : 주축 기준의 배치 방법 지정하기 justify-content: flex-start | flex-end | center | space-between | space-around align-items, align-self - 교차축 기준의 배치 방법 지정하기 align-items: stretch | flex-start | flex-end | center | baseline align-self 속성을 이용하면 플렉스 항목을 개별적으로 배치할 수 있음 align-self: auto | stretch | flex-start | flex-end | center | baseline

html의 naming convention 워낙 소스 코드가 많아지다 보니 네이밍 컨벤션(이름짓기)가 중요해서 이 기관에서 지정함

플렉스 항목 크기 조절하기 flex: [ ] | autu | initial 플렉스 항목의 너비를 얼마나 늘일지 숫자로 지정 플렉스 항목의 너비를 얼마나 줄일지 숫자로 지정 플렉스 항목의 기본 크기 지정. initial 항목의 width/height 값에 의해 크기가 결정되는데 플렉스 컨테이너의 공간이 부족할 경우, 최소 크기까지 줄입니다. auto 항목의 width/height 값에 의해 크기가 결정되지만 플렉스 컨테이너의 고간에 따라 늘이거나 줄입니다. 출처 : Doit! html5 + css3 웹표준의 정석