호다닥

box-sizing : ( content-box (defualt) / border-box ) --subject-font: 32px;font-size: var(subject-font); border-box 는 box size를 결정할 때 border까지 합한다. 즉, padding 과 border를 모두 포함한다. 기본값인 content-box는 컨텐츠만 지정한다. position : ( static / absolute (default) / relative ) static은 기본값으로 아무런 효과 없다. relative 는 원래 있던 자리를 기준으로 이동한다. absolute 는 근접한 부모 중에 기본값인 static이 아닌 부모의 기준에서 움직인다. 중간에 position: relative 인 부모가 없..

SCSS : CSS Processer (전처리기) CSS Processor 에는 scss 외에도 stylus, less 도 있다. scss가 sass 를 위한 공식적인 syntax로 릴리즈 되면서 scss와 sass 가 점점 업계 표준으로 되어가고 있다. scss는 css를 programming language 처럼 syntax를 개선하는데, 이를 사용하면 css 없는 많은 유용한 기능을 사용할 수 있다. 단, 이것을 위해 compile과 build 하는 과정이 필요하다. gulp 는 compile 하거나 transform 해주는 nodeJS package gulpfile.babel.js 에서 routes 상수를 확인하면 해당 gulpfile 이 styles.scss 라는 특정 파일을 보고 있음을 알 수..

Flex flex 는 기기의 속성에 따라 디자인이 유동적으로 바뀌지 않는 CSS의 단점을 개선하기 위해 사용된다. 요소의 사이즈가 불명확하거나 동적으로 변화할때 유용하게 사용할 수 있다. 단, 부모가 flex-container 이어야만 자식 element 를 움직일 수 있다. FlexBox layout 에서 content, items, self 의 차이 Grid 주요 properties grid-auto-rows ( / [column]) grid-auto-flow : row(default) ( / [column]) - 내가 지정한 grid보다 더 많은 cell 들이 생성될 때, 추가 생성되는 cell 들을 어디로 생성할지 결정 minmax - element 크기 변화에 limit 을 준다. ( 최대값을 ..