클라우드 구름 IDE 서비스를 이용해 용량 0MB로 개인 웹 사이트 만들기 6강: MDBootstrap으로 메인 콘텐츠 만들기

나동빈

  지난 시간에는 MDBoostrap을 이용해 내비게이션 영역을 디자인 해보는 시간을 가졌습니다. 이번 시간에는 MDBoostrap으로 메인 콘텐츠를 디자인 해보는 시간을 가져보도록 하겠습니다. 따라서 바로 <main> 태그 영역에 이어서 작성해보겠습니다.

    <!-- 페이지의 메인 영역 -->

    <main>

        <div class="container mt-4">

            <div class="row">

                <div class="col-md-7">

                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"

                         class="card-img-top">

                </div>

                <div class="col-md-5">

                    <h2 class="mt-2">회사의 특징</h2>

                    <hr>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

                    <a href="#" class="btn btn-primary">자세히 보기</a>

                </div>

            </div>

        </div>

    </main>

  현재 우리는 간단히 디자인만 해보는 것이며 각자 내용을 채우면 되는 거니까 위와 같이 의미 없는 단어들을 채워보았습니다. 의미 없는 단어를 넣고자 할 때는 로렘 입숨을 이용하시면 됩니다. 구글에 'Lorem Ipsum'을 검색 해보시면 다양한 덤프(Dump) 문자열을 확인할 수 있습니다.

  이어서 카드 디자인 요소를 이용해 <main> 태그 내에 몇 개의 사진과 함께 디자인을 더 넣어보도록 하겠습니다.

            <div class="row mt-4">

              <div class="col-lg-4 col-md-12">

                <div class="card">

                  <div class="view overlay">

                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg" class="card-img-top">

                  </div>

                  <div class="card-body">

                    <h4 class="card-title">콘텐츠 1</h4>

                    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                    <a href="#" class="btn btn-primary">자세히 보기</a>

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-6">

                <div class="card">

                  <div class="view overlay">

                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg" class="card-img-top">

                  </div>

                  <div class="card-body">

                    <h4 class="card-title">콘텐츠 2</h4>

                    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                    <a href="#" class="btn btn-primary">자세히 보기</a>

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-6">

                <div class="card">

                  <div class="view overlay">

                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="card-img-top">

                    <a href="#">

                      <div class="mask rgba-white-slight"></div>

                    </a>

                </div>

                  <div class="card-body">

                    <h4 class="card-title">콘텐츠 3</h4>

                    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                    <a href="#" class="btn btn-primary">자세히 보기</a>

                  </div>

                </div>

              </div>

            </div>

  그러면 위와 같이 <main> 태그가 잘 꾸며진 것을 확인할 수 있습니다. 다음 시간이 마지막 시간이에요.