1주차에서는 기본 개념과 css/JavaScript 맛보기 연습을 해보는 시간이었다.
서버/클라이언트/웹의 동작 개념
-웹의 동작 개념 (HTML을 받는 경우 / 데이터만 받는 경우)
HTML, CSS 기본 내용
HTML은 뼈대, CSS는 꾸미기, JavaScript는 움직임을 주는 것
HTML
-head안에는 페이지의 속성 정보/ body안에는 페이지의 내용을 담는다.
-필요할 때마다 찾아서 넣어보고, 바꿔보고 습관들이는 것이 중요.
-실습 :간단한 로그인 페이지 만들기.
CSS
<head> 안에 <style> </style> </head>-마찬가지로 검색하고 바꿔서 적용해보고, 평소 괜찮은 페이지를 보면 코드가 뭔지 알아보기
부트스트랩:예쁜 CSS 모아둔 사이트
JavaScript
여기서 통곡함..ㅠㅠ 난 재능없나보다......싶고 막😥
계속 따라해 봐야 할 것 같다.
<head> 안에 <script> </script> </head>크롬 -> 페이지-> 오른쪽 클릭-> 검사-> console
이걸로 많이 연습해보기.
사칙연산/함수/조건문/반복문
-실습 :패턴 연습
1주차 과제
<!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>
<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=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Sans KR', sans-serif;
}
.title_image {
width: 600px;
height: 500px;
border-radius: 10px;
margin-top: 50px;
background-image: url('https://post-phinf.pstatic.net/MjAxODA2MDRfMjMy/MDAxNTI4MDcxNDMzMTQy.kdsUMGdPiGzoASAFfeCZjoRwDcR2xS3gD3TU-UkL4u4g.DKGmumvOvyGBxP3l9geW7AXGfE92o1ZRQsh2qvPmOV4g.JPEG/%EB%8F%85%EC%9D%BC_%EC%97%B0%EB%B0%A9%EC%9D%98%ED%9A%8C_%EC%9D%98%EC%82%AC%EB%8B%B9.jpg?type=w1200');
background-position: center;
background-size: cover;
}
.wrap {
margin: auto;
width: 600px;
}
.btn {
margin: 300px;
margin: auto;
display: block;
background-color: gold;
color: whitesmoke;
}
.price {
font-size: 20px;
color: cornflowerblue;
font-weight: bold;
}
.form-group {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="title_image"></div>
<div class="title">
<h1>가즈아~독일로!! <span class="price">비용:오만원!!/명 </span></h1>
<p>독일은 인상적인 나라입니다. 독일 자연과 건축물의 놀라운 조화, 독특한 음식과 맥주, 흥미로운 역사를 상상해 보세요. 독일은 여러분의 눈과 입 그리고 마음까지 만족시켜드릴 것입니다. 유레일의 독일
여행 일정은 독일의 주요 5개 도시로 안내해 드립니다. 초고층 건물에서부터 역사적인 랜드마크까지, 박물관에서부터 각종 파티까지, 유레일이 이 모든 멋진 경험들을 준비했습니다.
</div>
<div>
<div class="form-group">
<label for="exampleFormControlInput1">갈 사람 누구?</label>
<input type="email" class="form-control" id="exampleFormControlInput1">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">몇 명?</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="form-group">
<label for="exampleFormControlInput1">여행 희망일?</label>
<input type="email" class="form-control" id="exampleFormControlInput1">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">안내받을 E-Mail?</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<button class="btn">los geht's</button>
</div>
</div>
</div>
</body>
</html>
아유... 나는 천상 문과충인가... 몇 번 더 해봐야 될 것 같다.
몰러유