[KDT]ピン技術サービスフロントエンド開発者-IL#3
4160 ワード
第3週4/9~4/15
Transition
property、duration、time-sfunction、delayの順に記入します.
▸ transition-property ( 기본값 : all )
css property 를 지정한다.
▸ Transition-duration ( 기본값 : 0s )
s, ms 변경 될 시간을 설정한다
▸ Transition-timing-function ( 기본값 : ease; )
변화율을 지정하며 ease-in, ease-in-out, linear등 의 값을 사용할 수 있다
▸ Transition-delay ( 기본값 : 0s )
지연 시간을 설정한다.
Animation
多くのスタイルをスーツに変換できます.
▸ @keyframes
keyframes로 만들어 둔 애니메이션 프레임을 기준으로 적용된다.
▸ Animation-name ( 기본값 : none; )
이름을 설정한다.
▸ Animation-duration ( 기본값 : 0s; )
한 사이클이 완료하는데 걸리는 시간을 지정하며 음수의 값은 무시된다.
▸ Animation-timing-function ( 기본값 : ease; )
변화율을 지정한다.
▸ Animation-delay ( 기본값 : 0s; )
시작할 시점을 지정하며 음수 값을 사용하여 앞당길 수 있다.
▸ Animation-iteration-count ( 기본값 : 1; )
반복 횟수를 설정 할 수 있다.
▸ Animation-direction ( 기본값 : normal; )
애니메이션의 재생 방향을 지정하는 속성 (normal, reverse, alternate, alternate-reverse)
▸ Animation-play-state ( 기본값 : running; )
애니메이션의 재생과 중지를 설정
▸ Animation-fill-mode ( 기본값 : none; )
전후 위치 설정을 할 수 있다.
Filter
▸ Blur (px)
블러 효과
▸ Grayscale (px)
흑백 효과
▸ sepia (px)
어두운 갈색 효과
▸ saturate (100)
채도조절 효과
▸ contrast (100)
이미지 대비
▸ hue-rotate (deg)
색조 회전 적용
▸ drop-shadow (px px px rgba())
그림자 효과
▸ backdrop-filter ✧
요소 뒤에 적용하는 효과
Grid
2 Dレイアウトcssシステム.(1次元はFlex)
CSS GridはCSS Flexと同様にコンテナ(Container)とプロジェクト(Item)の2つの概念に分けられ、コンテナはプロジェクトを囲む親要素であり、各プロジェクトを配置することができる.
Grid Container
▸ display : 그리드 컨테이너를 정의
▸ grid-template-rows : 명시적 행의 크기를 정의
▸ grid-template-columns : 명시적 열의 크기를 정의
▸ grid-template-areas : 영역 이름을 참조해 템플릿 생성 (Grid item 적용)
▸ grid-template : grid-template-xxx의 단축 속성
▸ row-gap : 행과 행 사이의 간격을 정의
▸ column-gap : 열과 열 사이의 간격을 정의
▸ gap (row-gap, column-gap) : xxx-gap의 단축 속성
▸ grid-auto-rows : 암시적인 행의 크기를 정의
▸ grid-auto-columns : 암시적인 열의 크기를 정의
▸ grid-auto-flow : 자동 배치 알고리즘 방식을 정의 (dense 속성 사용 가능)
▸ grid : grid-template-xxx과 grid-auto-xxx의 단축 속성
▸ align-content : 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
▸ justify-content : 그리드 콘텐츠를 수평(행 축) 정렬
▸ place-content : align-content와 justify-content의 단축 속성
▸ align-items : 그리드 아이템(Items)들을 수직(열 축) 정렬
▸ justify-items : 그리드 아이템들을 수평(행 축) 정렬
▸ place-items : align-items와 justify-items의 단축 속성
Grid Item Properties
▸ grid-row-start :그리드 아이템의 행 시작 위치 지정
▸ grid-row-end : 그리드 아이템의 행 끝 위치 지정
▸ grid-row : grid-row-xxx의 단축 속성 (행 시작/끝 위치)
▸ grid-column-start : 그리드 아이템의 열 시작 위치 지정
▸ grid-column-end : 그리드 아이템의 열 끝 위치 지정
▸ grid-column : grid-column-xxx의 단축 속성(열 시작/끝 위치)
▸ grid-area : 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
▸ align-self : 단일 그리드 아이템을 수직(열 축) 정렬
▸ justify-self : 단일 그리드 아이템을 수평(행 축) 정렬
▸ place-self : align-self와 justify-self의 단축 속성
▸ order : 그리드 아이템의 배치 순서를 지정
▸ z-index : 그리드 아이템의 쌓이는 순서를 지정
主な用語
Track : 트랙(Track)은 하나의 행(Row) 혹은 열(Column)을 의미합니다.
Line : 선(Line)은 일반적으로 거터(Gutter)라고 하는 트랙과 트랙 사이의 간격을 의미합니다.
Cell : 셀(Cell)은 아이템(Item)이 배치되는 최소 단위의 영역(Area)입니다.
Area : 영역(Area)은 아이템이 배치되는, 하나 이상의 셀(Cell)로 이루어진 영역입니다.
簡単なat@-ルール
@charset — 스타일 시트에 의해 사용되는 문자 집합을 정의한다.
@import — CSS 엔진에게 외부 스타일 시트를 포함하도록 알린다.
@media — 장치가 미디어 질의(media query)를 사용하여 정의된 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙을 말한다.
@keyframes — CSS 애니메이션 sequence 내 중간 단계의 양상을 설명한다.
ReferenceReference
この問題について([KDT]ピン技術サービスフロントエンド開発者-IL#3), 我々は、より多くの情報をここで見つけました https://velog.io/@momentomori/KDT-핀테크-서비스프론트앤드-개발자-TIL-3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol