5일차(2022.04.01)

📌 aspect-ratio

요즘에는 최신 기능으로 aspect-ratio 라는 속성을 css에서 지원한다고 한다.
하지만, padding을 이용해 화면비를 설정하는 방법을 알아보자.

width: 300px;
height: 100px;

이런식으로 설정한다면 3:1이 되지만, 반응형을 구현하지 못한다!

🐣 따라서 padding-top / padding-bottom 을 이용하자!

    <div class="outer">
        <div class="inner"></div>
    </div>

.outer {
    border: 1px solid red;
    width: 1000px;
}

.inner {
    border: 1px solid blue;
    padding-top: 20%;
}

padding-top을 %로 주게 되면 부모요소의 너비에 관계하여 높이를 설정하지 않았음에도 불구하고 반응형으로 높이값을 가지게된다!

📌 빔캠프 종찬님 특강 CSS 가이드!

1. 가장 먼저 가져야 하는 관점 : 전체적인 덩어리를 보라!
2. 구분을 위해 border나 background 컬러를 이용해 레이아웃 완벽하게 잡기!
3. 레이아웃 관련 스타일 먼저 짜기!
4. 요리재료(요소, 타입셀렉터 이용) 손질부터 먼저 해주자! 초기화를 통해 가장 담백한 상태로 만들기!
5. height는 자식요소에 따라 바뀌므로 자식요소 먼저 생각해보기!
6. 타입셀렉터는 위험하다! 클래스를 이용해서 구체적으로 스타일 주기!
7. mdn과 개발자 도구와 친해지자!

margin-left: auto;
margin-right: auto;
남는공간을 여백으로 자동으로 취하겠다!
둘을 한번에 주면 가로 중앙 정렬

🐣 행복해지자!