Css

cascade layer 는 css 우선순위를 명시적으로 지정할 수 있게 지원하는 css 스펙으로 현재 대부분 브라우저에서 지원하고 있다.

touch-action 속성을 통해 어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있다.

transition으로 애니매이션 적용시 display:none 이 시작설정에 있는 경우, transition 애니매이션이 동작하지 않는다.

ITCSS는 확장성과 유지보수성을 높여서 CSS를 작성하는 하나의 방법론이다.

App의 테마 설정에 따라 동적으로 테마를 변경하는 방법 (with less)

flex container로 grid item 요소들을 감싸면 이 flex container 속에 들어간 자식요소들은 가로 세로 유연하게 배치된다.

아래의 horizontal div에서는 row방향으로 중앙정렬하고 vertical div에서는 column방향으로 중앙정렬하여 이미지가 중앙에 위치된다.

Text Select Color | Drop Caps | Image Overlay | Parallax Images ...

images, videos, objects, iframes, embed와 같은 Media element들은 container의 width를 넘어가지 않도록 초기화한다.

@keyframes 사용 | animation 설정

미디어 쿼리 (Media Queries) | Fluid Grid | Flexible Box

float 속성 동작 (left, right, inherit, none)

Can I Use 활용 | 버그 리포트 확인 | 브라우저 점유율 | CSS 초기화

LESS는 stylesheet를 작성하는 데 있어 Variable, Mixin, Nested Rule, Operation, Function과 같은 Script 기능을 제공한다.

CSS Browser hack 사용

테이블 패턴을 이용한 수직 중앙정렬. text-align을 통한 가로 중앙정렬.