![[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택) 1주차](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbG51cp%2Fbtq8H49kA3v%2FbYQz79pZqlKJ0ekK9xhq41%2Fimg.png)
반응형
1. 웹의 동작 개념
- 웹페이지: 서버에 저장 -> 받아서 -> 그려줌
- 브라우저: 요청을 보냄 -> 받은 HTML을 그려줌
2. HTML, CSS
- HTML은 뼈대, CSS는 꾸미기
- HTML: 구역과 text를 나타내는 코드
- CSS: 잡은 구역을 꾸며줌
- HTML의 기초 : 크게 head와 body로 구성, head안에는 페이지 속성정보, body안에는 페이지 내용
3. HTML 틀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
<script>
</script>
</head>
<body>
</body>
</html>4. 문제로 기억하자
<!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>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
.wrap {
width: 500px;
margin: auto;
}
.title-img {
width: 500px;
height: 300px;
background-image: url("https://platum.kr/wp-content/uploads/2019/12/64497335_490811004989301_7459130390851092480_n.png");
background-size: 450px;
background-position: center;
}
.img-desc {
margin-top: 30px;
margin-bottom: 30px;
}
.title-name {
width: 500px;
}
.name {
font-size: 30px;
}
.price {
font-size: 17px;
}
.order-name {
width: 350px;
margin: auto;
}
.btn-block {
margin: auto;
width: 130px;
display: block;
}
</style>
<script>
function order() {
alert('주문이 완료되었습니다!!!');
}
</script>
</head>
<body>
<div class="wrap">
<div class="title-img img-desc"></div>
<div class="title-name">
<p class="name">상품제목 <span class="price">가격: 1,000,000원 / 개</span></p>
<p>이 상품으로 말할 것 같으면 용왕이 찾지 못한 토끼의 간을 찾아 빨간망토의 늑대와 아기 돼지 삼형제의 숨결이 고루 녹아 있는 먹으면 120세까지 살 수 있다는 이 상품으로 말할 것 같으면 용왕이 찾지 못한 토끼의 간을 찾아 빨간망토의 늑대와 아기 돼지 삼형제의 숨결이 고루 녹아 있는 먹으면 120세까지 살 수 있다는.....</p>
</div>
<div class="order-name">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">주문자 성함</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">
<label class="input-group-text" for="inputGroupSelect01">수량</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<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">주소</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">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<button type="button" onclick="order()" class="btn btn-primary btn-block">주문하기</button>
</div>
</div>
</body>
</html>5. 주요 포인트
- <body>에서 뼈대를 만든 후 class로 속성을 부여하여 css에서 꾸며줄 수 있다. (<div class="wrap'></div>)
- 너비 : width
- 높이 : height
- 그림 백그라운드 : background-color : green;
- 그림 삽입 : bacground-image : url("")
- 그림 크기 : background-size
- 그림 위치 : background-position
- 가운데 정렬 : margin : auto;
- margin : 여백 설정 시계방향으로 x, x, x, x (30px, auto, 30px, auto 와 같은 형태도 가능)
- 빈칸 만들기 : border : 3px solid black;
- border 스타일 : dashed: | dotted | double | groove | hidden | inset | none | outset | ridge | solid | initial | inherit
- border 모서리 라운드 : border-radius : 10px;
- text 정렬 : text-algin : center;
반응형