스파르타 코딩클럽의 내일배움단 웹개발 종합반 과정을 듣기 시작했다.
1주차에 배운 내용은 다음과 같다.
1. HTML
웹페이지의 뼈대가 되는 부분이다.
<head> 안에는 페이지의 속성 정보를, <body>에는 페이지의 내용을 담는다.
<ctrl + alt + L> 단축키를 이용해 자동정렬할 수 있다.
<div>는 division의 약자로 요소를 분리할 수 있다. <div class="">로 클래스 이름을 지정할 수 있다.
2. CSS
웹페이지를 꾸며준다.
HTML의 <style>안에서 지정한다.
.class로 클래스를 불러와 서식을 적용할 수 있다.
width : 가로 폭 지정
height : 세로 폭 지정
background-color : 배경 색상 지정 (요소의 범위 파악할 때 용이)
margin : 외부 여백 지정 (auto시 중앙 정렬)
padding : 내부 여백 지정
display : block 블럭으로 지정
3. Javascript
움직이는 요소 구현.
기본적인 요소로 변수, 자료형, 함수, 조건문, 반복문이 있다.
자료형 : 리스트와 딕셔너리가 있다.
함수 : 사칙연산, split, push 등이 있다.
조건문 : if, else, else if 등이 있다.
반복문 : for 등이 있다.
4. Homework
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gugi&family=Stylish&display=swap" rel="stylesheet">
<!-- 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>iPhone 13 Pro 구매하기</title>
<style>
* {
font-family: 'Stylish', sans-serif;
}
.thumbnail-main{
width: 600px;
height: 400px;
}
.wrap{
width: 600px;
margin: auto;
}
.place-order{
width: 50px;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
<img class="thumbnail-main"
src="https://www.apple.com/newsroom/images/product/iphone/standard/Apple-iPhone13-Pro-color-lineup-220308_big_carousel.jpg.slideshow-xlarge.jpg">
<p class="Title">
<font size="7"> iPhone 13 Pro</font>
가격 : 1,350,000
</p>
<p class="description">
비약적으로 강화된 카메라 시스템. 뛰어난 반응성으로 매일 하던 제스처에 전혀 새로운 감각을 선사하는 디스플레이. 스마트폰 사상 가장 빠른 칩. 독보적인 내구성. 획기적인 도약을 이뤄낸 배터리 성능까지. 이제 프로할 시간.
</p>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">주문자 이름</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="">
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">수량</div>
</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-2">
<div class="input-group-prepend">
<div class="input-group-text">주소</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="">
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">전화번호</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="">
</div>
<div class="place-order">
<button type="submit" class="btn btn-primary">주문하기</button>
</div>
<br/>
</div>
</body>
</html>'Coding > 스파르타코딩클럽' 카테고리의 다른 글
| [스파르타코딩클럽] AWS, Flask (0) | 2022.05.27 |
|---|---|
| [스파르타코딩클럽] Flask, API (0) | 2022.05.26 |
| [스파르타코딩클럽] 파이썬, 웹스크래핑(크롤링), DB, pymongo (0) | 2022.05.13 |
| [스파르타코딩클럽] jQuery, Ajax 기초 (0) | 2022.05.06 |