FrontEnd/HTML&CSS
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에 의해 진행된다. ..
07_CSS_전환&변환(transition,perspective)
이번에는 전환,변환에 대해 알아보겠다. Transitions CSS속성의 전환효과를 설정 >>CSS속성의 시작과 끝을 지정(전환 효과)하여 중간값을 애니메이션 transition-property : 전환효과를 사용할 속성 이름 //all transition-duration :전환효과의 지속시간 설정 //0s transition-timing-function : 타이밍 함수 지정 //ease transition-delay : 전환효과의 대기시간 설정 //0s // 뒤는 기본값 설정이다. >> 기본값이 all이기에 trasition 1s;
06_CSS_background
오늘은 CSS속성 중 background 속성에 대해 공부했다. background 요소의 배경을 설정하는 속성으로 아래와 같은 설정을 가진다. background-color : 배경색상 background-image : 하나 이상의 배경 이미지 background-repeat : 배경이미지의 반복 background-position : 배경이미지의 위치 background-attachment : 배경이미지의 스크롤 여부 background : 색상 이미지경로 반복 위치 스크롤특성; 위와 같은 방식으로 적혀지게 되고, 누락하여 설정해도 괜찮은것이 특징 background color 요소의 배경 색상을 지정 transparent : 투명 이 기본값으로 부여되어 있다. background-image 요소의 ..