Day 05. aspect-ratio
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 가이드!
- 가장 먼저 가져야 하는 관점 : 전체적인 덩어리를 보라!
- 구분을 위해 border나 background 컬러를 이용해 레이아웃 완벽하게 잡기!
- 레이아웃 관련 스타일 먼저 짜기!
- 요리재료(요소, 타입셀렉터 이용) 손질부터 먼저 해주자! 초기화를 통해 가장 담백한 상태로 만들기!
- height는 자식요소에 따라 바뀌므로 자식요소 먼저 생각해보기!
- 타입셀렉터는 위험하다! 클래스를 이용해서 구체적으로 스타일 주기!
- mdn과 개발자 도구와 친해지자!
margin-left: auto;
margin-right: auto;
남는공간을 여백으로 자동으로 취하겠다!
둘을 한번에 주면 가로 중앙 정렬
🐣 행복해지자!
Author And Source
이 문제에 관하여(Day 05. aspect-ratio), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gustjq4146/멋쟁이-사자처럼-프론트엔드-스쿨-TIL-5일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)