첫주차 homework로 간단한 페이지 만들기가 주어졌다.
html을 기본적으로 수강한적이 있어 만드는데 어려움은 없었다.
하지만 기존에 하던방식과는(일일이 모든 스타일을 하나하나 지정하며 만들던 방식)
달리 부트스트랩을 이용하여
스타일을 하나하나 직접 적용하지 않고 간편하게 붙여넣기를 통해
만들었는데 상당히 수월하게 제작할 수 있었다.
크게 수정한것은 없고 간단하게 width 와 margin , font정도만 손보고 제작 할 수 있었다.
https://getbootstrap.com/docs/4.0/components/alerts/ 부트스트랩
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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>
<title>homework</title>
<style>
.wrap {
width: 500px;
margin: auto;
}
.image1 {
width: 500px;
height: 300px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtOa06xju4XvOW2uj1FOD0dQzqPYh91FMQgQ&usqp=CAU");
background-size: cover;
background-position: center;
}
.price {
font-size: 15px;
}
.btn1{
display: block;
width: 100px;
margin: auto;
background-color: dodgerblue;
color: white;
border-style: none;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="image1">
</div>
<h3>애완용 마리모 팝니다 <span class="price"> 가격 : 3000원/마리</span></h3>
<p>마리모는 짖지않아요! 물지도 않고 투정도 안부린답니다 또 밥을제때 주지않아도 죽지않죠 ㅎ.ㅎ
누구나 쉽게 키우기 시작할 수 있습니다.</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="name">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="ea">수량</span>
</div>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected> -- 수량을 선택하세요 --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="address">주소</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="phone">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<button class="btn1"> 주문하기 </button>
</div>
</body>
</html>
코드를 실행한 결과는 아래와 같이 나왔다.
'study > Web' 카테고리의 다른 글
| HTML 기본_spartacoding 5 (크롤링, DB) (0) | 2022.02.10 |
|---|---|
| HTML 기본_spartacoding 4 (jQuery)(img src 변경)(로딩후 실행) (0) | 2022.02.10 |
| HTML 기본_spartacoding 3 (jQuery) (0) | 2022.01.25 |
| HTML 기본_spartacoding 2 ( 변수, 자료형, 함수, 조건문, 반복문) (0) | 2022.01.19 |
| HTML 기본_spartacoding (0) | 2022.01.18 |
