<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>샘플페이지</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
.menu{
background: linear-gradient(to bottom, gray, lightblue);
}
.menu div{
padding :0 0;
}
.menu div a:hover{
color:aliceblue;
background-color: slategrey;
}
.menu div a{
text-decoration: none;
display: block;
color:black;
}
#main-img{
width: 100%;
margin: 0;
padding: 0;
}
.detail-img{
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<div>
<div class ="jumbotron text-center" style="margin:0;"><h1>Responsiv web</h1></div>
<!-- h1은 기본적으로 margin을 크게 가지고있다, 그것을 없애기 위해
스타일에 margin0을 주거나 reset.css를 활용해야 한다 -->
<!--메뉴바작성-->
<div class="row menu">
<div class="col-lg-1 col-md-4 text-center"><a class="nav-link">service</a></div>
<div class="col-lg-1 col-md-4 text-center"><a class="nav-link">about</a></div>
<div class="col-lg-1 col-md-4 text-center"><a class="nav-link">home</a></div>
<!--메뉴바는 큰 사이즈일때는 1/12크기 중간사이즈 일대는 4/12의 크기이다-->
<!--클래스 명으로 가운데 정렬을 했다, 이건 div안에 글씨를 정렬한것이다.-->
</div>
<!--여기부터 메인 화면구 구성-->
<div class="conteiner">
<div class="row">
<div class = "col-md-8"> <!--중간크일때 8/12크기-->
<img src="./images/web.png" id ="main-img" alt="웹화면">
</div>
<div class = "col-md-4"><!--중간크일때 4/12크기-->
<table class="table" style="margin-top: 2px;">
<!--클래스 명으로 클래스 스타일 작성됨-->
<thead>
<tr>
<th colspan="2">홈페이지 제작</th>
</tr>
</thead>
<tbody>
<tr>
<th>개발사</th>
<td>kh Bussiness</td>
</tr>
<tr>
<th>개발기간</th>
<td>3개월</td>
</tr>
<tr>
<th>금액</th>
<td>10,000,000원~</td>
</tr>
<tr>
<th rowspan="4">옵션선택</th>
<td>
<input type="checkbox" name="" id="">
pc페이지</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
모바일페이지</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
반응형 페이지</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
보안페이지</td>
</tr>
<tr>
<td colspan="2">
<button class="btn btn-warning btn-lg">문의하기</button>
<button class="btn btn-primary btn-lg">결제하기</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<button class="btn btn-info btn-lg" style="width: 100%;" data-toggle="collapse" data-target="#detail-page">상세정보</button>
<!--상세정보 버튼을 이용하여 아래 div를 열고 닫을수 있게 data-toggle=collapse를설정해준다-->
<!-- class명을 이용하여 버튼의 스타일을 정했다 크기는 인라인 태그로 지정-->
</div>
<div class="collapse" id="detail-page">
<!--클래스 명과 id값으로 접었다 펴는 페이지가 되도록 만들어졌다-->
<hr>
<div class="row" >
<div class="col-md-6"> <!--6/12 크기로 지정-->
<img src="./images/PC_Page.png" class="detail-img" alt="">
</div>
<div class="col-md-6 text-center">
<h2>
PC페이지
</h2>
<p>상세설명</p>
<p>상세상세상세</p>
</div>
</div>
<div class="row" >
<div class="col-md-6">
<img src="./images/mobile.png" class="detail-img" alt=""></div>
<div class="col-md-6 text-center">
<h2>
모바일 페이지
</h2>
<p>상세설명</p>
<p>상세상세상세</p>
</div>
</div>
<div class="row" >
<div class="col-md-6">
<img src="./images/responsiveweb.jpeg" class="detail-img" alt=""></div>
<div class="col-md-6 text-center">
<h2>
반응형 페이지
</h2>
<p>상세설명</p>
<p>상세상세상세</p>
</div>
</div>
<div class="row" >
<div class="col-md-6">
<img src="./images/secure_coding.jpg" class="detail-img" alt=""></div>
<div class="col-md-6 text-center">
<h2>
소스코딩
</h2>
<p>상세설명</p>
<p>상세상세상세</p>
</div>
</div>
</div>
</div>
</body>
</html>
hello world