[HTML / CSS ] 단계를 나타내는 디자인 퍼블리싱

제목을 정하기 너무 힘든 포스팅이었습니다..

오늘 하려는 포스팅은 단계 디자인을 퍼블리싱 해보려고합니다.

그림으로 설명하자면 

출처 : 쏘카 사이트

이러한 단계를 나타내는 디자인입니다.

배워보니 이것도 하는 방법이 있더라구요 !

우선 뼈대 (html)을 먼저 만든 후에 스타일 작업으로 넘어가겠습니다.

<div id="wrapper">
    <div class="sub_tit">쏘카 이용방법</div>
    <ul class="guide-step">
        <li>
            <img src="img/howto-ico-way02.png">
            <div class="title"> 가입하기 </div>
            <div class="desc">앱 또는 홈페이지에서 운전면허증과 결제 카드만 등록하시면 쉽고 빠르게 가입하실 수 있어요.</div>
        </li>
        <li>
            <img src="img/howto-ico-way02.png">
            <div class="title"> 예약하기 </div>
            <div class="desc">출발·반납 위치를 선택하고, 원하는 시간 만큼, 지금 필요한 차종으로 예약하세요.</div>
        </li>
        <li>
            <img src="img/howto-ico-way02.png">
            <div class="title"> 차량찾기 </div>
            <div class="desc">앱의 스마트키에서 대여존 주소를 확인할 수 있으며 경적, 비상 등을 이용해 차량 위치를 확인하세요.</div>
        </li>
        <li>
            <img src="img/howto-ico-way02.png">
            <div class="title"> 차량이용 </div>
            <div class="desc">탑승 전, 쏘카의 상태를 찍어 앱으로 사진을 올려주세요. 상태 확인 후, 즐거운 드라이브를 시작하세요!</div>
        </li>
        <li>
            <img src="img/howto-ico-way02.png">
            <div class="title"> 쏘카반납 </div>
            <div class="desc">지정한 장소에 주차 후, 앱에서 바로반납을 누르면 반납이 완료됩니다..</div>
        </li>
    </ul>
</div>    
 

저는 위와 같이 코드를 짰습니다.

우선 항상 감싸고 있는 박스 ( wrapper )안에 ul태그를 사용해 목록형으로 만들어 주었습니다.

어렵지 않은 코드라 보면 이해되실 것 같습니다!😎  

다만 화살표는 어디에 있지...? 하는 의문은 css에서 다루도록 하겠습니다.

#wrapper{margin-top: 60px;}
#wrapper .sub_tit{font-size: 24px; font-weight:  600;}
#wrapper .guide-step {list-style: none; padding: 0; margin-top: 50px;}
#wrapper .guide-step:after{content:""; clear: both; display: block;}
#wrapper .guide-step li{text-align: center; float: left; width:calc(20% + 6px);box-sizing:border-box;padding-left:30px;}
#wrapper .guide-step li:first-child{width:calc(20% - 24px);}
#wrapper .guide-step li:nth-child(n+2){background-image:url("../img/right_arrow.png");background-repeat:no-repeat; background-position: left  7.5px top 40px; background-size: 15px;}
#wrapper .guide-step li .title{font-size: 18px; font-weight: 600; margin-top: 10px;}
#wrapper .guide-step li .desc{margin-top: 10px; font-size: 16px;}

요 9줄이 끝입니다!

우선 가장 첫번째로 해야할 부분은 ul아래의 li태그들을 왼쪽 정렬 해주어야 합니다.

li태그에 float: left;를 해주면 되겠죠?

여기서 float를 할때 유의해야할 점은 부모태그는 float을 해준 자식 태그를 인식 하지 못합니다.

li태그에 float을 한 상태로 ul태그를 높이를 보면 0일 것입니다.

그래서 해준 코드가 4번째 줄입니다.

#wrapper .guide-step:after{content:""; clear: both; display: block;}

풀어서 말하자면 ul태그 뒤에 객체를 생성하겠다. 

어떤 객체냐! 한줄을 다 사용하고 ( clear: both ) 블락형 태그이다.

이렇게 적어주면 ul태그가 float된 li태그를 인식하는것과 같이 된다.

첫번째가 해결 되었다면 두번째로 할 것은 넓이 계산입니다.

그냥 li태그가 5개니까 20%로씩 할당하면 안되나요? 넵 안됩니다..! 😣

이유는 첫번째 li태그를 제외한 나머지 태그의 좌측에는 margin값( 화살표 공간)이 들어가기때문에 

넓이를 계산해주어야합니다.

여백의 값이 30px이라고 하고 계산을 해보겠습니다.

여백의 크기가 총 30 * 4로 120px입니다. 여기서 120px을 li태그의 갯수로 동일하게 나눠 줍니다.

120 / 5를 한 24px을 뺀 값이 첫번째 li태그의 크기입니다. width:calc(20% - 24px);

그럼 나머지 태그는 30px의 여백을 가지고 있는 상황에서 첫번째 li태그에서 마이너스 된 부분까지

채워 주어야합니다. 

따라서 24 / 4 (나머지 li태그 갯수)를 한 6px씩을 더해 주게됩니다. width:calc(20% + 6px);

( 설명을 잘 못해서 죄송합니다... )

마지막으로 화살표를 넣어줄 차례입니다.

7번째 줄을 보시면 2번째 li부터 배경으로 화살표를 넣어 위치를 정해주었습니다. ( + 여백 )

코드를 치면 5분안에 끝나는 것을 설명을 하려니까 너무 어렵네요ㅎㅎ..

이렇게하면 단계를 나타내는 디자인이 끝나게 됩니다! 

오늘도 갑자기 끝!