부트스트랩 사이트에 들어가서 파일을 다운로드 받고 압축을 풀면 css와 js 파일을 찾아서 사용하면 된다. 부트스트랩 4.0 버전에서는 플렉스 박스를 이용하여 그리드 레이아웃을 만들 수 있습니다. 자세한 사용법은 사이트에 나와있습니다.
코드 설명
<!-- 첫 번째 섹션 -->
<div class="box-padding-big grey-bg">
<div class="container">
<div class="row">
<div class="col-md-5 info-big">
<h2>Fastest way to<br><strong>present your design</strong></h2>
<p>Symu is an easy to use tool for web designers. With the help of our system you can present your projects in a browser for free. It is all very easy!</p>
<p><strong>Drop your project anywhere</strong><br>Symu will prepare a mockup of your website for you!</p>
</div>
<div class="col-md-7">
<img src="images/symu-panel-1.png">
</div>
</div>
</div>
</div>
container 클래스 안에 row와 column을 절정하는데 row 한 줄에 텍스트 부분에는 col-md-5가 적혀있고 이미지 부분에는 col-md-7가 적혀있는데 의미는 container은 한 개의 섹션을 의미하고 row는 한 줄 column은 총 12 줄로 텍스트 부분과 이미지 부분의 비율이 5:7이라는 의미이다.
<!-- 두 번째 섹션. 흰 배경 -->
<div class="box-padding-big white-bg">
<div class="container">
<div class="row">
<div class="col-md-7">
<img src="images/symu-panel-2.png">
</div>
<div class="col-md-5 info-big">
<h2>The simplest way to<br><strong>get feedback from your clients!</strong></h2>
<p><strong>You can add a comment anywhere</strong> on a project, this is a fast and easy way to gather input and proposed changes from your client. Click anywhere on a project and leave your thoughts.</p>
<p><strong>Every added comment becomes a task! </strong> Thanks to this solution you can easily mark the changes you have made.</p>
</div>
</div>
</div>
</div>
첫 번째 섹션과 비슷하다. 이미지 부분에는 7개의 칼럼을 텍스트 부분에는 5개의 칼럼의 공간을 부여한다.
<!-- 네 번째 섹션. 흰색 배경. 모바일 이하 크기에서 감춤 -->
<div class="d-none d-md-block box-padding-big white-bg">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="images/envelope-icon.jpg" style="float:left">
<h2 class="icon-title">Email<br><strong>notifications</strong></h2>
<p>An email notification will be sent when your client comments or opens a project. You will know when a client recieves the projects and if he has seen it!</p>
</div>
<div class="col-md-6">
<img src="images/lock-icon.jpg" style="float:left">
<h2 class="icon-title">Project<br><strong>protection</strong></h2>
<p>Your projects will be perfectly safe, Symu uses SSL encryption and every project added receives a unique link. Additionally you have the option to secure your project with a password.</p>
</div>
</div>
</div>
</div>
d-none은 디스플레이 none으로 화면에 보이지 않도록 하는 설정이고 d-md-block은 테블릿 이상의 디스플레이에서는 출력하는 설정입니다.
전체코드
| <!doctype html> <html lang="ko"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/style.css"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <!-- 헤더 --> <div class="header"> <div class="container align-center"> <h1><strong>Display your web design</strong><br>in a web browser</h1> <h4 class="silver hidden-xs">Fastest way to present your design and get feedback from your clients!</h4> <div class="btn btn-primary btn-lg">Upload Project</div> <div class="silver small-info margin-top-big d-none d-md-block"></div> <img src="images/drop-icon.png"> Drop here or select your project<br>prepared in the PNG or JPG format </div> </div> </div> <!-- 첫 번째 섹션 --> <div class="box-padding-big grey-bg"> <div class="container"> <div class="row"> <div class="col-md-5 info-big"> <h2>Fastest way to<br><strong>present your design</strong></h2> <p>Symu is an easy to use tool for web designers. With the help of our system you can present your projects in a browser for free. It is all very easy!</p> <p><strong>Drop your project anywhere</strong><br>Symu will prepare a mockup of your website for you!</p> </div> <div class="col-md-7"> <img src="images/symu-panel-1.png"> </div> </div> </div> </div> <!-- 두 번째 섹션. 흰 배경 --> <div class="box-padding-big white-bg"> <div class="container"> <div class="row"> <div class="col-md-7"> <img src="images/symu-panel-2.png"> </div> <div class="col-md-5 info-big"> <h2>The simplest way to<br><strong>get feedback from your clients!</strong></h2> <p><strong>You can add a comment anywhere</strong> on a project, this is a fast and easy way to gather input and proposed changes from your client. Click anywhere on a project and leave your thoughts.</p> <p><strong>Every added comment becomes a task! </strong> Thanks to this solution you can easily mark the changes you have made.</p> </div> </div> </div> </div> <!-- 세 번째 섹션. 모바일 이하 크기에서는 감춤 --> <div class="box-padding-big grey-bg"> <div class="container"> <div class="row"> <div class="col-md-5 info-big"> <h2>Support for<br><strong>Responsive projects</strong></h2> <p>Projects added to Symu are automatically checked whether they are mobile ready.</p> <p>The program will divide your files into responsive versions on its own! You have the option to view the projects in either normal or responsive modes!</p> </div> <div class="col-md-7"> <img src="images/home-panel-3.jpg"> </div> </div> </div> </div> <!-- 네 번째 섹션. 흰색 배경. 모바일 이하 크기에서 감춤 --> <div class="d-none d-md-block box-padding-big white-bg"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="images/envelope-icon.jpg" style="float:left"> <h2 class="icon-title">Email<br><strong>notifications</strong></h2> <p>An email notification will be sent when your client comments or opens a project. You will know when a client recieves the projects and if he has seen it!</p> </div> <div class="col-md-6"> <img src="images/lock-icon.jpg" style="float:left"> <h2 class="icon-title">Project<br><strong>protection</strong></h2> <p>Your projects will be perfectly safe, Symu uses SSL encryption and every project added receives a unique link. Additionally you have the option to secure your project with a password.</p> </div> </div> </div> </div> <!-- 다섯 번째 섹션. 짙은 배경. 모바일 이하 크기에서는 감춤 --> <div class="d-none d-md-block box-padding-big dark-bg-stat"> <div class="container"> <div class="row"> <div class="col-md-2"> <div class="info-box align-center"> <h3>253</h3> Todays uploads </div> </div> <div class="col-md-2"> <div class="info-box align-center"> <h3>171092</h3> Projects uploaded </div> </div> <div class="col-md-4 align-center"> <a href="#registerModal" role="button" data-toggle="modal"><div class="btn-danger btn-lg">Sign Up<strong>now</strong></div></a> </div> <div class="col-md-2"> <div class="info-box align-center"> <h3>931523</h3> Project views </div> </div> <div class="col-md-2"> <div class="info-box align-center"> <h3>100867</h3> Comments posted </div> </div> </div> </div> </div> <!-- 푸터 --> <footer class="footer"> The site owner is not responsible for uploaded images. You can only upload images for which you own the copyright. </footer> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> |
'웹 개발 > Front End' 카테고리의 다른 글
| vue3-excel-editor 사용법 (0) | 2024.06.01 |
|---|---|
| Javascript를 이용한 Todo list (0) | 2022.03.16 |
| 플렉스 박스 사이트 만들기 (0) | 2021.11.09 |
| 구글 웹 폰트 (1) | 2021.11.08 |
| 캐러셀 (0) | 2021.11.08 |
댓글