[TIL] 반응형 웹 디자인

1. 리셋 css

• 전체를 border-box로 만들어 레이아웃을 우리가 예상하지 못한 방향으로 흘러가지않게 막아준다.

• margin과 padding도 0으로 초기화시켜준다.

• h1~h6까지 스타일링도 원하는대로 해주기위해 따로 초기화 시켜줄 수 있다.

• a태그의 밑줄을 없애며 초기화를 할 수 있다 (폰트색상은 상속이 된다)

*, *::before, *::after{
    box-sizing: border-box;
}
.reset-box {
    margin: 0;
    padding: 0;
}

.reset-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

2. 스타일링 css (main css)

• 디버깅을 하는 여러가지방법이 존재하지만, background-color을 통해서 하는 방법이 시각적으로 잘 보여서 좋다.

• 반응형 웹 디자인의 규칙은 px이 아닌 %와 em 단위를 사용하는 것이다 (기기 사이즈에 따라 계속 바뀌기때문에)

• iframe을 사용할때 비율이 중요하다(16대 9와 4대 3 비율이 많음 => aspect ratio를 사용하면 간단해짐)

• margin영역은 클릭이 되지않고, padding영역은 클릭이 된다. 그러므로, 글자 바깥 영역에서도 클릭을 하고 싶다면 padding을 주고 버튼 사이 공간을 margin을 주면된다.

• 드래그를 하지 못하게 막는 방법

    .header .button-open-menu {
        user-select: none;
        padding: 0;
        background-color: #fff;
    }

• 이미지에 트랜지션을 주며 자연스럽게 커지는 모양을 줄 수 있다.

    .header .button-open-menu .ir{
        display: block;
        width: 3.125rem;
        height: 3.125rem;
        background-image: url(./../images/button-navigation.svg);
        background-repeat: no-repeat;
        transition: all 300ms ease;
    }

• 변수 선언하는 방법:

:root {
    --gray: #E0E0E0;
    --tomato: #CD5C5C;
    --coral: #ED8E7C;
    --green: #CDF3A2;
    --violet: #9B72AA;
    --pink: #FFC0CB;
    --yellow: #FFE194;
    --blue: #2e437c;
    --cyan: #4CA1A3;

    --primary: var(--blue);
}

• 여기서 primary는 변수를 재할당 한것이다. 재할당함으로써 나중에 재활용이 가능하고 변경이 필요할 때 하나만 바꿔주면 되기때문에 유지보수에 편하다. 단, 변수 재할당이 늘어나면 날수록 복잡해진다.

• display:flex를 주고 flex flow를 사용하면 일렬로 출력이 가능하다

    .navigation ul{
        display: flex;
        flex-flow: row nowrap;
    }