개발야옹

Sass (Synthetically Awesome StyleSheetes)Sass는 CSS전처리기로 변수, 상소그 혼합, 중첩 등의 다양한 기능을 제공합니다.CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생성하는 프로그램 SCSS SCSS는 Sass 3 버전부터 새롭게 등장하였다.Sass의 모든 기능을 지원하는 Superset으로, CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있어 편리합니다. Sass와 SCSS의 차이점Sass: 중괄호가 아닌 들여쓰기를 사용한다.SCSS: CSS처럼 {} 와 ; 을 사용한다. 1. SCSS의 자료형Sass, SCSS는 다음 아래와 같은 자료형들을 지원하며, 속성값으로 사용할 수 있다.자료형설명Numbers숫자 타입Str..

position positon property는 요소의 위치를 결정하는 속성이다. top, bottom, left, right 속성들을 함께 사용하여 요소의 위치를 지정할 수 있다. position property의 값으로는 아래 다섯개의 값을 가질 수 있다. 1. static 2. relative 3. absolute 4. fixed 5. sticky position 속성의 각 값들에 대해 살펴볼 것이다. 1. static static은 position 속성의 기본 값으로 position 속성값을 지정하지 않았을 때와 같다. 일반적으로 요소 배치 순서에 따라 배치되며 bottom, left, top, right, z-index속성들에 대해 아무런 영향을 받지 않는다. 따라서 static은 왼쪽에서 오..

일반 CSS Sass CSS Module styled-components Sass 확장자 : .scss, .sass import : import '저장경로'; .scss => 중괄호 세미콜론 사용 .sass => 중괄호 세미콜론 사용 X Sass도 CSS Module로 사용이 가능하다. => 확장자 .module.scss Sass 를 사용하기 위해서는 node-sass library를 설치해줘야 한다. 설치 yarn add node-sass Sass는 변수 정의를 허용한다. 변수는 $로 시작하며 변수 할당은 콜론 ( : ) 으로 마무리한다. scss 스타일 $primary-color : #ffffff; $primary-background : #efaba2; .content{ background : $pr..

flexbox flexbox는 viewport( 웹페이지가 사용자에게 보여지는 영역 )나 요소의 크기가 불명확 또는 동적으로 변하는 경우 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. 아래는 flexbox 사용 예시이다. .flex-container{ display : flex; } .flex-items{ width : 50px; height : 50px; } display : flex 속성이 적용된 요소는 flex -container가 되고, flex-container의 자식 요소들은 flex-item이 된다. flex item은 메인축에 따라 결정되는데 메인축의 방향은 flex-direction 속성으로 결정되며 기본값은 row이다. flex-c..