[TIL] 반응형 CSS

1. currentColor 속성

.ediya-menu__item--name{
    color: #202022;
    font-size:1.125rem;
    border-bottom: 2px solid currentColor;
    padding: 1.125rem;
}

2. 영어로 적힌 자식인 경우만 스타일링 변경 방법

.ediya-menu__item--name [lang="en"]{
    display: block;
    font-size: 0.875rem;
    color: var(--gray);
}

3. display:grid 활용하기

.ediya-menu__item--multi-column{
    background-color: var(--green);
    /* 2단 중간 선도 생김 */
    column-count: 2;
    column-rule: 1px solid var(--black2);
}
.ediya-menu__item--multi-column dl{
    margin: 0;
}
.ediya-menu__item--multi-column dt{
    float: left;
    width: 40%;
    margin-left: 10%;
}
.ediya-menu__item--multi-column dd{
    margin-left: 0;
    float: left;
    width:40%;
    margin-right: 10%;
}

4. 버튼 밑에서 상단으로 이동하기

.ediya-menu__item--detail .button-close-panel{
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5rem 1rem;
}

5. flex로 배치하기

.ediya-menu__item--detail{
    display: flex;
    flex-flow: column nowrap;
 }
.ediya-menu__item--multi-column{
    background-color: var(--green);
    column-count: 2;
    column-rule: 1px solid var(--black2);
    margin: 0 -1.25rem 1.25rem;

}

6. 애니메이션 적용

@keyframes moveFromLeft {
    0% {
        transform: translateX(-4rem);
    }
    100% {
        transform: translateX(0);
    }
}
.brand {
    width: 46.93333333333333%;
    max-width: 200px;
    animation-name: moveFromLeft;
    animation-duration: 300ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); 
}

7. 애니메이션 중복 최소화하기

.ediya-menu__item {
	opacity: 0;
	transform: translateY(4rem);
	animation: transform-none 0.3s 0.85s cubic-bezier(0.6, 0.01, 0.16, 1) forwards;
}

@keyframes transform-none {
	to {
		transform: none;
		opacity: 1;
	}
}

8. backdrop-filter:blur(5)

• 사진에 필터를 입힐 수 있습니다.

    .navigation {
        /* display: none; */
        background-color: hsla(225, 57%, 10%, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        color: #fff;
        padding-top: 3.5rem;
        transform: translateX(105vw);
        transition: all 400ms ease;
        z-index: 600;
        backdrop-filter: blur(20px);
    }

9. 메뉴바 맨 상단에 고정하기

    .header-container{
        animation: moveFromTop 600ms forwards;
        background-color: yellow;
        position: sticky;
        top: 0;
    }