elex/css-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2024-11-27

Browse Source
This commit is contained in:
Elex
2024-11-27 12:56:21 +09:00
parent 9b8584413a
commit a356a36eb0
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Writerside/topics/Flexbox.md
View File

@@ -30,7 +30,7 @@ div {
* `justify-content` : 주축을 기준으로 플렉스 아이템을 어떻게 정렬할 것인지를 지정합니다. * `justify-content` : 주축을 기준으로 플렉스 아이템을 어떻게 정렬할 것인지를 지정합니다.
* start | end | flex-start | flex-end | center | left | right | normal | baseline | space-between | space-around | space-evenly | stretch | safe | unsafe * start | end | flex-start | flex-end | center | left | right | normal | baseline | space-between | space-around | space-evenly | stretch | safe | unsafe
## 플랙스 아이템 ## 플렉스 아이템
* `flex` = `flex-grow` + `flex-shrink` + `flex-basis` * `flex` = `flex-grow` + `flex-shrink` + `flex-basis`
* `flex-grow` : 플레스 컨테이너 내부에서 할당 가능한 공간의 정도를 비례값으로 지정합니다. * `flex-grow` : 플레스 컨테이너 내부에서 할당 가능한 공간의 정도를 비례값으로 지정합니다.

14
Writerside/topics/Transition.md
View File

@@ -1,10 +1,11 @@
# Transition # Transition
* `transition` * `transition`
* `transition-property` * `transition-property` : 트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다.
* `transition-duration` * `transition-duration` : 트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
* `transition-timing-function` * `transition-timing-function` : 속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.
* `transition-delay` - ease | linear | step-end | steps(4, end)
* `transition-delay` : 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
```CSS ```CSS
@@ -12,3 +13,8 @@ div {
transition: <property> <duration> <timing-function> <delay>; transition: <property> <duration> <timing-function> <delay>;
} }
``` ```
## 트랜지션 완료 이벤트
```javascript
element.addEventListener('transitionend', function(propertyName, elapsedTime){}, true);
```