03 MDBootstrap으로 레이아웃 만들기
6강: 메인 콘텐츠 만들기
지난 시간에는 MDBoostrap을 이용해 내비게이션 영역을 디자인 해보는 시간을 가졌습니다. 이번 시간에는 MDBoostrap으로 메인 콘텐츠를 디자인 해보는 시간을 가져보도록 하겠습니다. 따라서 바로 <main> 태그 영역에 이어서 작성해보겠습니다.
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 페이지의 메인 영역 -->
<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> 태그 내에 몇 개의 사진과 함께 디자인을 더 넣어보도록 하겠습니다.
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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> 태그가 잘 꾸며진 것을 확인할 수 있습니다. 다음 시간이 마지막 시간이에요.
