프론트엔드/CSS

CSS transform 속성이란?

CSS transform 속성이란? CSS 에서 제공하는 transform 프로퍼티를 통해서 HTML 요소를 rotate(회전), scale(사이즈 조정), skew(왜곡), translate(이동) 시킬 수 있다. transform 속성은 CSS Visual formatting model 의 좌표 공간을 수정할 수 있는 기능이 있다. transform 속성이 none 값을 갖지 않는다면, stacking context 가 만들어진다. 이 경우에는 엘리먼트가 포함하는 position: fixed; 혹은 position: absolute; 엘리먼트에 대해 containing block 으로서 동작할 수 있다. 속성 예제 transform 에서 사용할 수 있는 다양한 함수들은 transform-functio..

CSS Animation 속성이란?

CSS Animation 속성이란? animation 과 관련된 여러 속성을 한번에 입력할 수 있는 축약 (shorthand) 속성이다. 예제 .animation { animation: 3s ease-in 1s infinite reverse both running slidein; } 순서 속성의 의미는 각각 아래와 같은 순서를 갖으며, 중간에 하나씩 생략도 가능하다. animation-name: 애니메이션의 이름 보통 @keyframes 의 이름이 들어간다. animation-duration: 애니메이션 한 싸이클의 지속시간 animation-timing-function: 애니메이션 시간대별 효과 가속, 선형 등의 옵션이 있다. animation-delay: 애니메이션이 얼마간의 딜레이를 갖고 실행될지 ..

CSS 포지션 (position) 속성이란?

CSS 포지션 (position) 속성이란? HTML 요소가 어떻게 위치할지에 대한 속성이다. top, right, bottom, left 프로퍼티가 최종 위치를 결정한다. position 의 종류 알아보기 position: static; position: relative; position: absolute; position: fixed; position: sticky; /* Global values */ position: inherit; position: initial; position: revert; position: revert-layer; position: unset; 위는 position 속성의 값으로 들어올 수 있는 모든 케이스를 적어둔 것이다. static 기본적인 엘리먼트 배치 원리를 따른..

CSS - Flex 정리

개요 2017년에 W3C Candidate Recommendation 에서 레이아웃 쉽게 잡을 수 있도록 FlexBox Layout 을 만들었다. FlexBox Layout 는 사이즈에 상관없이 유연하다고해서 이름에 flex 라는 단어가 들어갔다. 사이즈에 상관없이 유연하다는 장점이 있어 스크린의 크키가 각각 다른 기계에 대해서도 균일한 스타일 코드가 나올 수 있다는 장점이 있다. Flexbox Layout 과 비교되는 것으로 Grid Layout 이 있는데, 이는 좀 더 큰 사이즈의 레이아웃을 만드는 것을 목적으로 탄생했다. Flexbox Layout: 애플리케이션의 컴포넌트 레이아웃에 쓰기 적합 (one-dimensional layout model) Grid Layout: 애플리케이션 전체의 레이아웃..

PostCSS 의 Autoprefixer 란 무엇인가?

개요 Autoprefixer 는 PostCSS 플러그인 중 하나이다. CSS 를 파싱하고 vendor prefixes 를 추가한다. Can I Use 로부터 얻은 결과를 이용한다. 사용 예 적용 전 ::placeholder { color: gray; } .image { background-image: url(image@1x.png); } @media (min-resolution: 2dppx) { .image { background-image: url(image@2x.png); } } 위와 같이 vendor prefixes 가 포함되지 않은 CSS 를 작성하면, 적용 후 ::-moz-placeholder { color: gray; } :-ms-input-placeholder { color: gray; } ..

PostCSS 란 무엇인가?

개요 PostCSS 란 JS 플러그인을 통해 스타일을 변환하는 도구이다. 이 플러그인들을 통해 CSS 에 대한 린팅을 할 수도 있고, 변수와 믹스인 을 지원하기도 하고, 미래의 CSS 문법과 인라인 이미지를 변환하는 등의 일을 한다. Autoprefixer 는 가장 많이 쓰이는 인기있는 PostCSS 플러그인 중 하나의 예시이다. PostCSS 는 CSS 파일을 가져가서, 규칙을 분석 및 변경하기 위한 API 를 제공한다. CSS 를 Abstract Syntax Tree 로 변환함으로써 이를 제공한다. 이렇게 제공되는 API 는 PostCSS 를 이용하는 플러그인들에 의해 사용된다. 이를 통해 에러를 찾거나 vendor prefixes 등을 추가할 수 있다. Autoprefixer 는 이를 통해 vend..

SCSS 의 믹스인 (@mixin) 키워드에 대해 알아보자

개요 @mixin 과 @include 는 sass 혹은 scss 에서 자주 볼 수 있다. @mixin 을 통해 스타일 그룹을 지정하고 @include 를 통해 만들어놓은 그룹을 이용할 수 있다. 자바에서 사용되는 믹스인과 같은 맥락으로 사용된다. 자바에서의 믹스인 참고 @mixin 기본 사용 예 @mixin 정의 @mixin red-box { padding: 10px; margin: 5px; background-color: red; } red-box 라는 믹스인을 정의했다. @mixin 으로 정의했다면, @include 를 이용해 사용할 수 있다. @include 사용 div { @include red-box } 위와 같이 입력하면, div { padding: 10px; margin: 5px; backg..