::public/HTML & CSS(SCSS)40 SCSS - 주석 // 컴파일되지 않는 주석/* 컴파일되는 주석 *//*컴파일되는여러 줄주석*/cs 2021. 7. 2. SCSS? CSS Preprocessor(CSS 전처리기) ; 종속형 시트(CSS)로 해석 및 컴파일되는 스크립트 언어. 대규모 프로젝트 진행시에 상용하는 경우가 많음. - [참고] Sass Guidelines - https://sass-guidelin.es/ko/ - [컴파일 방법] SassMeister 페이지 접속 후 바로 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환됨. HTML를 작성하여 적용된 결과를 보거나 Sass 버전 설정 등 여러 환경 설정들을 지원함. Parcel 웹 애플리케이션 번들러 Parcel은 굉장히 단순하게 컴파일할 수 있음. node.js 나 NPM 이 사용 가능한 환경이어야 하고 Parcel를 전역으로 설치해야 사용 가능함. 설치 및 사용방법은 [참고]heropy.blog/.. 2021. 5. 10. CSS - Grid CSS Grid ; 2차원(행과 열)의 레이아웃 시스템을 제공. 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈. Grid Properties ; CSS Grid는 CSS Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분. Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치. - [Grid Container] display ; 그리드를 사용하기 위해 컨테이너에 필수로 작성. grid : Block 특성의 Grid Container를 정의. inline-grid : Inline 특성의 Grid Container를 정의. grid-template-columns ; 명시적 열(.. 2021. 4. 28. CSS - Flex(Flexible Box) flex ; 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공. Flex 의 개념 1. Container - display, flex-flow, justify-content 등의 속성을 사용. 2. Items - order, flex, align-self 등의 속성을 사용. Container - display ; flex container 를 정의. 값의 차이가 내부의 Items 에 영향을 주지 않음. display: flex = block 특성. 수직 쌓임. display: inline-flex = inline 특성. 수평 쌓임. - [Flex Container] flex flow ; 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 I.. 2021. 4. 20. CSS - 애니메이션&다단 animation ; 요소에 애니메이션을 설정/제어. @keyframes ; 2개 이상의 애니메이션 중간 상태(프레임)을 지정. animation-name ; @keyframes 규칙(애니메이션 프레임)의 이름을 지정. none : 애니메이션을 지정하지 않음. @keyframes 이름 : 이름이 일치하는 @keyframes 규칙의 애니메이션을 적용. animation-duration ; 애니메이션의 지속 시간 설정. animation-timing-function ; 타이밍 함수(애니메이션 효과를 계산하는 방법) 지정. ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n, n, n, n), steps(n). animation-delay ; 애니메이션.. 2021. 4. 12. CSS - 속성(전환&변환) 전환(transitions) ; css 속성의 전환 효과를 지정. transition: property duration ease delay; transition-property : 전환 효과를 사용할 속성 이름. transition-duration : 전환 효과의 지속시가 설정. transition-timing-function : 타이밍 함수 지정. transition-delay : 전환 효과의 대기시간 설정. 변환(transform) ; 요소의 변환 효과(변형)를 지정. transition: 변환함수1 변환함수2 ....; transition: 원근법 이동 크기 회전 기울임; transform 2D 이동 : translate(x, y), translateX(x), translateY(y). 크기 : s.. 2021. 4. 9. 이전 1 2 3 4 5 6 7 다음
