[스파르타코딩클럽_왕초보 웹개발 1주차] 디자인과 출신 코린이의 개발일지
27살/디자인과/AMD
미래가 막막해서 시작한 코딩
MD직무를 조금이나마 경험하면서 든 생각은
'나중에도 이거로 밥벌어 먹고 살 수 있을까?'였다.
보다 더 전문성 있는 직무를 준비해볼까 고민하던 찰나,
인스타그램에 뜬 "스파르타코딩클럽" 광고를 보게되었고 바로 결제했다.
다룰 줄 아는거라곤 포토샵, 일러스트밖에 없기에 코딩은 막막하고도 멀게 느껴졌다.
하지만 1주차 강의를 들으며 그런 고민은 사라졌고, 조금 더 깊게 배우고 싶어졌다.
이런 마음에 개발일지를 쓰면서 내 개발 실력을 더 발전시키고싶어졌다.
일기도 3일을 넘기지 못하는 내가 개발일지를 쓴다는 것은..정말 큰 결심..
코딩 왕초보라 CSS,HTML,JAVASCRIPT 모두 이 수업에서 처음 접했기에 개발일지가 개발새발일 수 있지만 한번 열심히 써봐야지!
왕초보 웹개발 수업 목차
수업은 총 5주차로 주차마다 학습 내용은 다음과 같다.
▶1주차: HTML, CSS, Javascript
▶2주차: jQuery, Ajax, API
▶3주차: Python, 크롤링, mongoDB
▶4주차: 미니프로젝트1, 미니프로젝트2
▶5주차: 미니프로젝트3, AWS
> 1주차 학습목표
1) 서버와 클라이언트의 역할에 대해 이해한다.
2) HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
3) Javascript 기초 문법을 익힌다.
1주차-1) 서버와 클라이언트의 역할
① 웹의 동작개념 (HTML을 받는 경우)
우리가 보는 웹은 서버에서 준비해둔 것을 받아서 그려주는 개념
브라우저가 하는 일은 요청을 보내고 받은 HTML파일을 그려주는 것!
서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보낸다고 한다.
②웹의 동작 개념 (데이터만 받는 경우)
항상 HTML만 내려주는 것이 아니라, 데이터만 갈아끼우는 경우가 더 많다! JSON형식으로 데이터가 내려온다.
ex) 공연티켓 예매하는 경우 - 자리가 찰때, 페이지가 리프레쉬 지않고 좌석 상태만 변동
1주차-2) HTML
HTML은 구역과 텍스트를 나타내는 코드로, '뼈대'라고 생각하면 된다.
크게 head와 body로 구분된다.
head는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.
① head 요소 - meta, script, link, title
② body 요소 - 많다! 그때그때 필요한 코드를 찾아서 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>수업을 하며 리스트를 받았는데 아주 좋았다. 무작정 암기하는 것을 매우 싫어해서 더 좋음..
👉가장 중요한 것은 정렬 맞추기
코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워진다.
Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬하기!
+이후 Tab키를 눌러서 한칸씩 들어가게 해주면 더 깔끔하다.
1주차-2)✍ HTML로그인 페이지 만들기
아주 간단한 로그인페이지 만들기부터 시작했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>상단에 있는 HTML리스트를 그대로 복붙해서 조금씩 수정하면 됐기에 크게어렵진 않았다.
head에선 title만 수정했고, body에서는 글자수 크기, 문단, 버튼 코드를 복붙해서 작성했다.
1주차-2) CSS
CSS는 HTML로 잡은 구역을 꾸며주는 기능을 한다. HTML 코드 내에 CSS 파일을 불러와서 적용한다.
① HTML태그, div 개념
HTML 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다!
div를 세세하게 묶어둬야 나중에 꾸미기가 편하다고 생각한다.
이때 특히 중요한 것은 앞서 언급한 정렬 맞추기! 하다보면 div가 너무 많아지는데, 정렬이 안맞춰져 있으면 뭔가 헷갈려서 보기가 힘들어지는 것 같다.
② CSS 사용법
앞서 언급한 HTML에 HEAD에서 사용한다.
<head> ~ </head> 안에 <style> ~ </style>각 div는 아래처럼 각기 다른 이름(클래스)를 붙일 수 있다.
<div class='mytitle'> ~ </div>👉만약 head에서 mytitle라는 클래스를 가리키고 싶다면?
.mytitle { 명령내용 }
클래스 앞에 . 을 붙이고 {}안에 내용을 기입하면 된다.
1주차-2)✍ HTML & CSS 로그인 페이지 만들기
연습내용
h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | 로그인페이지</title>
<style>
.mytitle {
color: white;
width: 300px;
height: 200px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding-top: 40px;
}
.wrap {
margin: 10px auto;
width: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</div>
</body>
</body>
</html>👉 margin과 padding
margin은 바깥 여백을, padding은 안쪽 여백
👉 가운데로 맞추기
width를 주고, margin: auto를 사용하자!
그래도 안되는 경우가 있다 (ex. 버튼) 그러면 display:block을 추가하기
✨CSS할 때 필요한 페이지가 있다.
원하는 디자인을 찾고 → 만들어놓은 코드를 그대로 복붙하면 된다!
- 부트스트랩 : 하이라이트표시된 components에서 서치 https://getbootstrap.com/docs/4.0/components/alerts/
1주차 숙제- 나만의 쇼핑몰 페이지 만들기
예시를 보고 폰트와 제품은 내가 마음에 드는 거로 수정했다.
(비싸서 가질 수 없는 조말론 캔들..)
주문완료 alert까지! 완성
<!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=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.wrap{
width: 500px;
margin: auto;
}
.img{
margin-bottom: 20px;
}
.exp{
margin-bottom: 20px;
}
.btn{
display: block;
margin: auto;
margin-top: 20px;
}
</style>
<script>
function order(){
alert('주문이 완료되었습니다!'); }
</script>
</head>
<body>
<div class="wrap">
<div class="img">
<img src="https://blog.kakaocdn.net/dn/btsP6T/btqOS8g3zAi/QnjJk5sg54siVqij9MAh61/img.png" width="500px" />
</div>
<div class="exp">
<h3>바질 앤 네롤리 홈 캔들<span style="font-size: medium">가격: 92,000원/개</span></h3>
매혹적인 꽃 향기로 생기 넘치는 분위기를 연출하세요. 달콤한 네롤리에 바질의 기분 좋은 향을 살짝 더해 진정한 영국을 느끼게 해주며, 언제나 즐거움이 가득합니다.
</div>
<div class="input-groups">
<div class="input-group mb-1">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-1">
<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-1">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon">주소</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-1">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">전화번호</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="button">
<button type="button" onclick="order()" class="btn btn-primary">주문하기</button>
</div>
</div>
</body>
</html>여기서 제일 어려웠던 부분은 alert이었다.
button의 onclick과 fuction을 맞춰야하는지 몰라서 한참을..헤멨다..
괜찮아 난 코린이니까
거의 다 까먹고 아무것도 모르는 상태였어서..
하나씩 수정해보고 어떻게 변하는지 보면서했다.
- mb
mb를 다 다르게 해줘야하는 건줄 알고, mb-1 mb-2 mb-3 mb-4 이렇게했다가 간격이 이상해졌다. 급히 수정하며 기능을 '아주 확실히'알 수 있었다.
이외에도 너무 많아 시간이 오래 걸렸다.
그래도 결과물이 마음에 들어서 기분이 좋았다.
끝마치며..
Javascript도 약간 맛보기로 배웠는데, 조금 더 배우고 작성하려고한다.
사실 예상보다 글이 너무 길어져서 힘들다..
그리고 너무 어려워 보임..😢
앞으로는 더 자주 써야지!
-끝
Author And Source
이 문제에 관하여([스파르타코딩클럽_왕초보 웹개발 1주차] 디자인과 출신 코린이의 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@daniya/스파르타코딩클럽왕초보-웹개발-1주차-디자인과-출신-코린이의-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
