6강: 메인 콘텐츠 만들기 - 구름IDE를 이용하여 초고속으로 개인 웹 사이트 만들기

구름IDE를 이용하여 초고속으로 개인 웹 사이트 만들기

01
기본 환경 구축하기

1강: 구름IDE 컨테이너 생성하기

02
nginx 설정하기

2강: nginx 웹 서버 설치하기

3강: nginx의 HTML 폴더 경로 변경하기

03
MDBootstrap으로 레이아웃 만들기

4강: MDBootstrap 디자인 프레임워크 설치하기

5강: 네비게이션 만들기

6강: 메인 콘텐츠 만들기

7강: 푸터 만들기

6강: 메인 콘텐츠 만들기

03 MDBootstrap으로 레이아웃 만들기

6강: 메인 콘텐츠 만들기

지난 시간에는 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>

php

현재 우리는 간단히 디자인만 해보는 것이며 각자 내용을 채우면 되는 거니까 위와 같이 의미 없는 단어들을 채워보았습니다. 의미 없는 단어를 넣고자 할 때는 로렘 입숨을 이용하시면 됩니다. 구글에 '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>

php

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

질문하기