[Bootstrap] 웹사이트 만들기 - 서비스 섹션

서비스 섹션 결과물

PC 화면

 

모바일 화면

 

index.html

<!-- 서비스 섹션 -->
    <section id="service">
        <div class="container">
            <div class="text-center py-5">
                <h2 class="fw-bold mb-3">ART Cook 서비스</h2>
                <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, voluptates!</p>
            </div>

            <div class="row mb-5 g-4">
                <div class="col-md-6">
                    <div class="card-hover shadow rounded p-4">
                        <div class="d-flex align-items-center py-3">
                            <img src="images/service1.jpg" class="rounded-circle">
                            <div class="ms-3">
                                <h3 class="fw-bold">케이터링</h3>
                            <p class="text-muted">Lorem ipsum dolor sit amet.</p>  
                            </div>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis expedita accusamus fugit dolorum ipsum ratione harum nemo tempore porro cupiditate!</p>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card-hover shadow rounded p-4">
                        <div class="d-flex align-items-center py-3 flex-row-reverse">
                            <img src="images/service2.jpg" class="rounded-circle">
                            <div class="me-3 text-end">
                                <h3 class="fw-bold">디저트 아트</h3>
                            <p class="text-muted">Lorem ipsum dolor sit amet.</p>  
                            </div>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis expedita accusamus fugit dolorum ipsum ratione harum nemo tempore porro cupiditate!</p>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card-hover shadow rounded p-4">
                        <div class="d-flex align-items-center py-3">
                            <img src="images/service3.jpg" class="rounded-circle">
                            <div class="ms-3">
                                <h3 class="fw-bold">아트쿡 클래스</h3>
                            <p class="text-muted">Lorem ipsum dolor sit amet.</p>  
                            </div>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis expedita accusamus fugit dolorum ipsum ratione harum nemo tempore porro cupiditate!</p>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card-hover shadow rounded p-4">
                        <div class="d-flex align-items-center py-3 flex-row-reverse">
                            <img src="images/service4.jpg" class="rounded-circle">
                            <div class="me-3 text-end">
                                <h3 class="fw-bold">신제품 개발</h3>
                            <p class="text-muted">Lorem ipsum dolor sit amet.</p>  
                            </div>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis expedita accusamus fugit dolorum ipsum ratione harum nemo tempore porro cupiditate!</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

 

<div>

• shadow : 요소 테두리에 그림자를 생성
• rounded : 요소의 radius를 둥글게 만들어 줌

 

<img>

• rounded-circle : 이미지의 테두리를 동그랗게 만들어 줌

 

<div>

• flex-row-reverse : 안에 배치된 flexbox 요소들이 거꾸로 나열됨
• ms-3, me-3 : ms(margin start)는 왼쪽 부분의 여백, me(margin end)는 오른쪽 부분의 여백

 

style.css

/* 서비스 영역 */
.card-hover:hover {
    background-color: #ffc10726;
    cursor: pointer;
}

 

카드 영역 호버시 카드 배경 색이 달라진다.