2022-08-30 유튜브_클론_5

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4

 

---

flex

 

각각의 flex의 item들이 컨테이너에서 차지하는 크기를 설정할 수 있다.

 

아래는 3개의 item들의 각기 다른 범위를 차치하는 상황이다.

 

 

---

flex-grow

 

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다.

 

기본값은 0이다.

 

그래서 따로 값을 설정하기 전까지는 아이템이 늘어나지 않는다.

 

설정된 flex-grow의 값에 비례해서 여백 부분을 할당받는다.

 

.upNext .item .img {
    flex-grow: 1;
}

.upNext .item .info {
    flex-grow: 1;
}

.upNext .item .moreBtn {
    flex-grow: 1;
}

 

해당 예시에서는 모두 동일한 1:1:1 비율이다.

 

---

flex-shrink

 

flex-shrink는 flex-grow의 반대되는 속성이다.

 

아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다.

 

단, flex-grow와는 달리 기본값이 1이다.

 

그렇기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있다.

 

설정된 flex-shrink의 값에 비례해서 축소된다.

 

.upNext .item .img {
    flex-grow: 1;
    flex-shrink: 1;
}

.upNext .item .info {
    flex-grow: 1;
    flex-shrink: 1;
}

.upNext .item .moreBtn {
    flex-grow: 1;
    flex-shrink: 1;
}

 

---

flex-basis

 

flex-basis는 Flex 아이템의 기본 크기를 뜻한다.

 

flex-direction이 row냐 column이냐에 따라서 아래의 값이 기본 크기가 된다.

 

• row : 너비
• column : 높이

 

.upNext .item .img {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 35%;
}

.upNext .item .info {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 60%;
}

.upNext .item .moreBtn {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 5%;
}

 

---

flex

 

.upNext .item .img {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 35%;
}

.upNext .item .info {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 60%;
}

.upNext .item .moreBtn {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 5%;
}

.upNext .item .img {
    flex: 1 1 35%;
}

.upNext .item .info {
    flex: 1 1 60%;
}

.upNext .item .moreBtn {
    flex: 1 1 5%;
}

위의 두 코드이 의미하는 바는 같다.

 

flex는 flex-grow, flex-shrink, flex-basis 순서대로 한 번에 모아 쓴 거다.

 

출처 : https://studiomeal.com/archives/197

 

---

가로 세로 비율 설정

 

aspect-ratio: 16 / 9;

가로 세로 비율 16대 9 비율로 설정하는 방법이다.

 

---

반응형 웹 디자인

 

미디어 쿼리와 관련된 코드는 css 파일의 가장 하단에 위치하도록 하자.

 

서열 때문에 실행되지 않을 수도 있다.

 

.infoAndUpNext {
    display: flex;
    flex-direction: column;
}

@media(min-width: 786px) {
    .infoAndUpNext{
        display: flex;
        flex-direction: row;
        margin: var(--padding) 0;
    }

    .infoAndUpNext .info {
        flex: 1 1 60%;
    }

    .infoAndUpNext .upNext {
        flex: 1 1 40%;
    }
}

 

---

JS 코드

 

<script src="main.js" defer></script>

해당 코드를 head 태그에 추가한다.

 

main.js 라는 파일을 만든다.

 

---

defer

 

defer, async 스크립트

defer, async 스크립트

<script> 태그에 defer을 사용하는 이유.

 

대충 보니 실행하는데 시간이 오래 걸리는 대용량의 js 파일의 부작용을 막고자 사용하는 것 같다.

 

---