4편 Omnifood section-steps

1.HTML

<section class="section-steps">
        <div class="row">
            <h2>How it works &mdash; Simple as 1, 2, 3</h2>
        </div>
        <div class="row">
            <div class="col span-1-of-2 steps-box">
                <img src="public/img/app-iPhone.png" alt="Omnifood app on iPhone" class="app-screen">
            </div>
            <div class="col span-1-of-2 steps-box">
                <div class="works-step">
                    <div>1</div>
                    <p>Choose the subscription plan that best fits your needs and sign up today.</p>
                </div>

                <div class="works-step">
                    <div>2</div>
                    <p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
                </div>

                <div class="works-step">
                    <div>3</div>
                    <p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
                </div>

                <a href="#" class="btn-app">
                    <img src="public/img/download-app.svg" alt="App Store Button">
                </a>
                
                <a href="#" class="btn-app">
                    <img src="public/img/download-app-android.png" alt="Play Store Button">
                </a>
            </div>
        </div>
    </section>

 

2.CSS

/*---------------------------*/
/*BASIC SETUP*/
/*---------------------------*/

.clearfix {
    zoom: 1
}

.clearfix:after {
    content: ".";
    clear:both;
    display: block;
    height: 0;
    visibility: hidden;
}

/*---------------------------*/
/*SECTION3.HOW IT WORKS*/
/*---------------------------*/

.section-steps {
    background-color: #f4f4f4;
}

.steps-box:first-child {
    text-align: right;
    padding-right: 3%;
    margin-top: 30px;
}

.steps-box:last-child {
    padding-left: 3%;
    margin-top: 70px;
}

.app-screen {
    width: 40%;
}

.works-step {
    margin-bottom: 50px;
}

.works-step:last-of-type {
    margin-bottom: 80px;
}

.works-step div {
    color: #e67e22;
    border: 2px solid #e67e22;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    text-align: center;
    padding: 5px;
    float: left;
    font-size: 150%;
    margin-right: 25px;
}

.btn-app:link,
.btn-app:visited {
    border:0;
}

.btn-app img {
    height: 50px;
    width: auto;
    margin-right: 10px;
}

.clearfix { zoom: 1 }

 

.clearfix:after { content: "."; clear: both; display:both; height: 0; visibility: hidden }

 

플로팅한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에

 

레이아웃을 무너뜨리게 되는 현상을 보게 될 것입니다.

이는 플롯을 사용하면 발생되는 현상이며 이러한 문제를

 

해결하기 위해서는 float 을 해제해 주어야 합니다.

 

여기서 "float 을 해제한다" 는 의미는 float 이 적용된 요소를 해제하는 것이 아니라

clear 속성을 적용해 float 의 영향을 받지 않도록 한다는 의미입니다.

 

플롯을 해제하는 방법 중에 전 세계적으로 통용되는

 

이름(관용적인 기법의 이름)으로 clearfix 라는 방법이 있습니다.

 

물론 clear 속성을 적용하기 보다 다른 방법으로도

 

플롯을 해제할 수는 있으나 float 을 사용해 레이아웃을 잡다보면

 

clear 가 필요해지기 때문에 가급적 플롯된 요소의 부모 요소에

 

clearfix 방법을 적용하는 것을 권장하고 있습니다.

 

다시 말해, float 이 적용된 자식 요소를 부모 요소가 감싸 안지 못하는

 

현상을 해결하기 위해서는 대략적으로 6가지 방법이 있는데

그 중 대표적으로 많이 사용 되는 방법이 clearfix 입니다.

 

즉, clearfix 방법은 무조건이라기 보다 필요에 의해서 사용하는 것입니다.

참고: https://webclub.tistory.com/606 [Web Club]

플로팅(float) 레이아웃과 clear 속성

 

.steps-box:first-child

 

부모 요소 안의 첫 번째 요소만을 선택한다.

 

.steps-box:last-child

 

부모 요소 안의 마지막 요소만을 선택한다.

 

.works-step:last-of-type

 

부모 요소 안의 여러 요소 중 마지막 요소를 선택한다.

 

이 때 단 하나의 요소만 사용했다면 첫 번째 요소가 선택되고

 

두 개의 요소를 사용했다면 두 개의 요소 중 마지막 요소가 선택된다.