Dust

one-way 애니메이션(a상태에서 b상태로 이동하는 애니메이션)

one-way 애니메이션 만들 때 시작스타일과 최종스타일을 css로 만들어놓으면 됨

예를 들어 모달창을 부드럽게 띄우고 싶을 때

html 파일

<div class="modal-bg">
    <div class="modal">
        <div class="modal-title">modal Title
            <a href="#" id="modal-close">닫기</a>
        </div>
        <div class="modal-content">modal Content</div>
    </div>
</div>

css 파일

/* modal */
.modal-bg{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 5;
    visibility: hidden;
    opacity: 0;
    transition: .5s;
}
.modal{
    position: absolute;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 500px;
    background: white;
    border-radius: 20px;
    z-index: 10;
}
.modal .modal-title{
    display: flex;
    height: 60px;
    border-bottom: 1px solid lightgray;
    align-items: center;
    padding: 0 10px;
}
.modal .modal-content{
    padding: 10px;
}
.modal-open{
    visibility: visible;
    opacity: 1;
}

*참고*

애니메이션 줄 때 display: none; 보다 visibility: hidden; 이 더 잘 먹음!기본 값에 transition 및 visibility 추가

지원되는 브라우저

chrome, edge, Firefox, opera, safari, samsung internet, IE.. 

드래그 시 색상 및 css 적용 가능

예시

::-webkit-selection{
    background: #fcc419;
    color: white;
    text-shadow: 1px 1px 2px #222;
}
::-moz-selection{
    background: #fcc419;
    color: white;
    text-shadow: 1px 1px 2px #222;
}
::selection{
    background: #fcc419;
    color: white;
    text-shadow: 1px 1px 2px #222;
}

- text-weight 는 적용x

- ::-mox-selection, ::selection 처럼 클래스명 연속 사용했을 때 적용 안됨

order

flex 후 출력 순서를 변경하고 싶을 때

- 기본값은 0

- 작은 값이 있는 요소부터 출력

- 값이 같다면 입력한 순서대로 출력

예시

/* 부모요소 */
inner{
 display: flex;
};
/* 자식요소 */
inner-box:first-child{
 order: 1;
};
inner-box:nth-child(2){
 order: 2;
}

align-items

교차축 요소를 정렬

- flex의 주축(main-axis)과 교차축(cross-axis)

- flex의 default 값은 row(가로정렬/주축) 이기 때문에 align-items: center; 일 경우 세로(교차축)로 가운데 정렬함

align-self

교차축 요소를 정렬

- 개별 요소에 적용할 수 있음

inner{
 display: flex;
 align-items: flex-start; 
 /* 제일 앞으로 */
};
inner-box:nth-child(3){
 align-self: flex-end;
 /* 위에 전체적으로 flex-start를 적용했지만 개별로 flex-end 적용 / 제일 밑으로 */
}

예시

flex-wrap

word-wrap와 비슷

- nowrap / 한 줄에 정렬

- wrap / 여러 줄에 걸쳐 정렬

- wrap-reverse / 여러줄에 걸쳐 반대로 정렬

예시

flex-flow

- flex-direction, flex-wrap을 같이 사용가능

row wrap, column wrap 이런식으로 한꺼번에 사용할 수 있다

row-wrap, column-wrap 아니고 하이픈(-) 없어야함

예시

inner{
 display: flex;
 flex-flow: column wrap;
         /* flex-direction | flex-wrap */
}

align-content

justify-content: 와 비슷

참고 

http://flexboxfroggy.com/#ko

지원되는 브라우저

chrome, edge, Firefox, opera, safari, samsung internet, IE

이미지 크기를 조정하여 선명하게 보이도록 함

크기 조정되지 않는 이미지는 적용이 불가능

예시

class{
    image-rendering: -moz-crisp-edges;		/* Firefox */
    image-rendering: -o-crisp-edges;		/* Opera */
    image-rendering: -webkit-optimize-contrast;	/* chorme */
    image-rendering: crisp-edges;				
    -ms-interpolation-mode: nearest-neighbor;	/* IE */
}

화면이 커질수록 이미지가 깨져서 속성을 추가하려고 보니 일일이 추가 하기가 막막해서 찾아본 결과

[class^="i-"]{
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

속성참고

https://min-ji07.tistory.com/entry/CSS-image-rendering-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%84%A0%EB%AA%85%ED%95%98%EA%B2%8C

이렇게 사용이 가능했다 굿,,!

더 알아보고 싶어서 검색하는데 검색에 안걸림 ..

..검색하는 법 아시는 분 알려주시면 감사하겠습니다

참고

https://www.w3schools.com/cssref/css_selectors.asp