[깃허브 예제] feature 섹션 만들기/ video넣기[깃허브 예제] feature 섹션 만들기/ video넣기

 <!-- feature -->
    <section class="section section--feature">

        <div class="summary">
            <div class="summary__title">
                Welcome home, developers
            </div>
            <div class="summary__description">
                GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.
            </div>
        </div>

        <div class="video">
            <div class="video-ratio">
                <iframe width="1020" height="574" src="https://www.youtube.com/embed/afvT1c1ii0c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
        <div class="tiles">

        </div>
    </section>

이렇게 구조를 잡아 주었다.

video그냥 넣으면 반응형이 안되기 때문에 div 태그 안에 넣었다.

---

2021.04.21 - [WEB/html,CSS] - [html][css] 유튜브 video 16:9 비율에 맞게 삽입하기[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기

[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기

<!-- feature -->
    <section class="section section--feature">

        <div class="summary">
            <div class="summary__title">
                Welcome home, developers
            </div>
            <div class="summary__description">
                GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.
            </div>
        </div>

        <div class="video">
            <div class="video-ratio">
                <iframe width="1020" height="574" src="https://www.youtube.com/embed/afvT1c1ii0c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
        <div class="tiles">

        </div>
    </section>

/* feature */
.section--feature{
    background: #f5f5f5;
    padding-top: 66px;
}
.section--feature .summary{
    max-width: 820px;
    /* 820안에서는 가변적인 넓이 */
    margin: 0 auto;
    text-align: center;
}
.section--feature .video{
    max-width: 650px;
    margin: 50px auto;
}
.section--feature .video .video-ratio{
    height: 0;
    padding-top: 56.25%;
    position: relative;
}
.section--feature .video .video-ratio iframe{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

---

grid

section--feature .tiles ul{
    display: grid;
    /* 4개의 column을 만들것이고 1대 비율로 만들것이다 */
    grid-template-columns: repeat(4, 1fr);
}

grid는 구형이라서 구형 브라우저는 사용 못한다.

.section--feature .tiles li{
    padding: 34px 24px;
    text-align: center;
    line-height: 1.5;
    border-right: 1px solid #e5e5e5;
    box-sizing: border-box;
    /* grid를 쓰지 않고 요소들을 수평으로 하기위해 */
    float: left;
    width: 25%;
}

li의 부모 요소인 ul 태그에 clearfix 클래스를 추가해준다

---