FrontEnd
13_SCSS_연산,재활용(mixin,include),확장
계속해서 SCSS 문법을 공부해 나가보겠다. 이번에는 연산, 재활용, 확장 개념에 대해 다뤄보겠다. 연산(Operations) + 더하기 - 빼기 * 곱하기 하나 이상의 값이 반드시 숫자(Number) / 나누기 오른쪽 값이 반드시 숫자(Number) % 나머지 == 동등 != 부등 대소 / 보다 큰 = 대소 및 동등 / 보다 크거나 같은 and 그리고 or 또는 not 부정 일반적인 언어의 연산을 다 지원한다. 숫자 연산 >곱하기를 사용할 때 10px * 5처럼 사용해야 한다. 10 * 10 이나 10px * 10px는 사용할 수 없다. >CSS는 속성 값을 분리하는 방식으로 /를 사용하기 때문에 /가 나누기로 사용되지 않을 수 있다. 그래서 다음과 같은 조건을 충족하는 경우에 나누기로 계산이 된다. ..
12_SCSS_중첩,변수,import
이제 본격적으로 SCSS 문법들에 대해 공부해 보겠다. 주석(Comment) // /* */ 두가지 스타일의 주석을 사용한다. //는 컴파일되지 않는 주석으러 처리되며, /*는 컴파일이 되는 주석으로 처리된다. 단, 여러줄을 사용할때 Sass는 /* 나는 * 정민규 * 나는정민규 */ 이런식으로 해야한다. SCSS는 문제없어 CSS와 호환이 더 쉽다. 데이터 종류 (Data Types) Numbers 숫자 1, .82, 20px, 2em… Strings 문자 bold, relative, "/images/a.png", "dotum" Colors 색상 표현 red, blue, #FFFF00, rgba(255,0,0,.5) Booleans 논리 true, false Nulls 아무것도 없음 null Lists..
11_SCSS_개요(Parcel 설치)
이제부터는 SCSS에 대해 알아보겠다. SASS CSS는 상대적으로 배우고 쉽다. 하지만 불필요한 선택자의 과용과 연산기능의 한계, 구문의 부재등 프로젝트의 규모가 커질수록 아쉬움이 있는편. 하지만 웹에서는 표준 CSS만 동작 가능하기때문에 선택권이 없다. CSS Preprocessor? Sass,Less등 CSS 전처리기라고 하는것들로 CSS가 동작하기전에 사용하는 기능으로 CSS의 불편함을 상쇄할 수 있다. Sass(SCSS)는 Sylus,Less와 크게 다르지는 않지만, 가장 오래된 CSS확장언어라 성숙도와 커뮤니티도 많고, 진입장벽도 낮은 편이기에 사용할 것이다. Sass(Syntactically Awesome Style Sheets)의 3버전에서 등장한 SCSS는 CSS구문과 완전호환이 되도록 ..
10_CSS_Grid
오늘은 grid에 대해 공부했다. 평소 내용보다 조금 양이 많다!! CSS Grid는 2차원(행과열)의 레이아우스 시스템을 제공한다 CSS Grid는 예전부터 Hack이라 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS모듈이다. >>파이어폭스 브라우저를 사용해 테스트하면 공부하기 더 편하다. >>확인해보니 크롬도 지원해준다! CSS Flex와 같이 컨테이너와 아이템이라는 두 가지 개념으로 구분되어 있다. display 그리드 컨테이너(Container)를 정의 grid-template-rows 명시적 행(Track)의 크기를 정의 grid-template-columns 명시적 열(Track)의 크기를 정의 grid-template-areas 영역(Area) 이름을 참조해 템플릿 ..
09_CSS_FLEX
이번에는 CSS속성중 FLEX에 대해 알아보겠다. CSS FLEX(Flexible Box) Flex는 요소의 크기가 불분명 하거나, 동적인 경우에도 각 요소를 정렬할 수 있는 효율적인 방법을 제시. Container와 item으로 구성되어 사용된다. Container : display,flex-flow,justify-content item : order,flex,align-self 등의 속성을 사용할 수 있다. 위와같은 번잡함을 사용하지 않고, flex를 사용하면 보다 쉽게 요소들을 사용할 수 있다. Flex Container display : Flex Container를 정의 flex-flow : Flex-direction와 flex-wrap의 단축 속성 flex-direction Flex items의..
08_CSS_애니메이션
이번에는 CSS를 이용한 애니메이션 속성들에 대해 알아보겠다. animation 요소에 애니메이션을 설정/제어 animation-name @keyframes규칙의 이름을 지정 animation-duration 애니메이션의 지속 시간 설정 animation-timing-function 타이밍 함수 지정 animation-delay 애니메이션의 대기 시간 설정 animation-iteration-count 애니메이션의 반복 횟수 설정 animation-direction 애니메이션의 반복 방향 설정 animation-fill-mode 애니메이션의 전후 상태 설정 animation-play-state 애니메이션의 재생과 정지 설정 >>애니메이션을 직접 만드는건 아니고, 특정 keyframes에 의해 진행된다. ..