211004 1주차 개발일지
배운 내용
스파르타 코딩클럽 1-1
1. 네이버 화면에서 코드를 수정해도 내가 보는 웹페이지만 바꿀 수 있다.
2. 내가 지금 보는 웹페이지는 사실 인터넷과 관련이 없다
3. 새로고침을 하면 수정한 코드가 원상복기 된다 -> 뭔가를 새로 받아와서 그려준다
<웹 서비스 요소들의 역할>
브라우저 : 서버에게 데이터를 요청하고 받아온 데이터를 그대로 그려주는 역할
HTML : 뼈대 (사전은 뉴스 옆에 있어!)
CSS : 예쁘게 꾸미기
JavaScript : 클릭하면 이동, 움직이게 하는 것
서버 : 데이터를 주는 애
스파르타 코딩클럽 1-3
<Html 태그 요소들>
Head : 바디 말고 나머지에 필요한 태그들이 다 있음. ex) 아이콘, 구글 검색엔진이 내 사이트를 퍼가기 좋게 만드는 것들,
body : 눈에 보이는 부분 전부
div : 구역을 묶어주는 애들
p : 문단
h1 ~ h6 : 제목
Span : 글씩만 묶을 수 있음
a: 하이퍼링크
image : 이미지 링크
hr : 가로선
과제
과제 코드 - 원페이지 쇼핑몰 페이지 만들기
<!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=Nanum+Brush+Script&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Nanum Brush Script', cursive;
font-size: large
}
.productImage{
background-color: green;
width: 500px;
height: 300px;
background-image : url("https://www.guitargear.com.mx/tienda/images/detailed/22/strat1.jpg");
background-size : cover;
background-position : center;
border-radius : 10px;
padding-top : 20px;
}
.wrap{
width : 500px;
margin : auto;
}
.info{
width : 500px;
}
.submit{
width = 30px;
margin : auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="productImage">
</div>
<span style="font-size:2.5em">기타를 팝니다</span> 가격 : 1,829,000/개
<p>이 기타는 사실 특별한 힘을 가지고 있어요. 기타를 치면 바로 세계적인 락스타가 될 수 있어요! 유명한 락스타가 되어서 막 해체해버리세요! 꼭 하나 사가세요~!</p>
<div>
<div class="form-row align-items-center">
<div class="col-auto info">
<label class="sr-only" for="inlineFormInput">Username</label>
<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">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend info">
<div class="input-group-text">수량</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>
</div>
<div class="col-auto info">
<label class="sr-only" for="inlineFormInput">Username</label>
<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">
</div>
</div>
<div class="col-auto info">
<label class="sr-only" for="inlineFormInput">Username</label>
<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">
</div>
</div>
<div class="col-auto submit">
<button type="submit" class="btn btn-primary mb-2">주문하기</button>
</div>
</div>
</div>
</div>
</body>
</html>결과물
짧은 후기
유니티 개발 장고 서버 개발 이런거 하다가 갑자기 html 웹페이지 만들기를 하니 상당히 산뜻하다 ^~^ 1학년때로 돌아간것 같다.
1학년때는 너무 싫어서 c+ 받았지만 지금 해보니 요즘 하는 거에 비해서 난이도가 낮아서 상당히 할만하다.
1학년 때 왜그렇게 싫어했을까?ㅎㅎ
근데 사용자 정보 받는 부분은 그냥 부트스트랩 갖다 쓴거 수정한거라서 자바 스크립트 넣으면 아마 에러가 빵빵 터질 것이다.
이부분은 좀 아쉽다. 아마 강사님이 알려주신대로 부트스트랩에서 가져온 코드의 Form 태그를 그냥 div태그로 수정해버려서 이런 에러가 나오는 것 같다. 다음 수업에서 자바 스크립트를 적용하면 아마 input 필드 id 수정을 해야 할 것이다.
웹을 싫어하는 나지만 나름 재밌었다~ㅋㅋ