어제였나 앱개발 1주차 개발일지 쓴 지 하루도 채 안되어 드디어 웹개발 1주차도 끝을 보았다. 글을 시작하기 앞서 언급드리자면 필자 또한 비전공이고 뉴비이며 이제 막 자바스크립트에 입문한 사람이니 마음에 들지 않는 구석이 있어도 부디 귀엽게 봐주었으면 하는 바램. 이 글은 '개발새발 개발자'의 일대기이다.
⛵ 수업 목표
- 서버와 클라이언트의 역할에 대한 이해
- HTML, CSS의 기초 지식, 부트스트랩
- Javascript 기초 문법 익히기
웹의 동작 개념? 해킹해보자!🦊
크롬 창에서 우리에게 보여지는 웹페이지는 어떤 원리로 보여지게 될까? 원리를 알기 위해서, 일단 해킹부터 해보자. 진짜 해킹이 아니다! 크롬에서 F12를 눌러보시라. 콘솔모드에 돌입하게된다.
우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 '받아서' '그려주는' 것. 브라우저의 일은 요청을 보내면 받은 HTML 파일을 그려줄뿐. 그럼 요청은 어디다 보낼까? 서버가 만들어둔 "API" 창구에 정해진대로 요청을 보내는 것. 예컨대, http://naver.com/ 이라 쳤을 때 "naver.com"이라는 서버에 있는, "/"창구에 요청을 보낸 것.
그럼 항상 이렇게 HTML만 내릴까? 그렇지 않다. 데이터만 내려줄 때가 더 많다. 사실 HTML도 줄글로 쓰면 이게 곧 '데이터'다. 자, 공연 예매하고있는 상황을 상상해보자. 좌석은 차고 있는데 꺼짐과 동시에 페이지가 Refresh되면 난감해지겠지. 이럴 때 데이터만 받아서 끼우게 된다.
탐험 준비 ✅
1주차는 HTML, CSS, JavaScript를 중점으로 배우게 되었다. 즉 4주차에 내려줄 HTML 파일을 미리 준비해둔다. 또, 2주차에 자바스크립트를 능숙하게 다루기 위해서 문법을 익혀둬야했다. 이어 웹개발 공부에 사용될 'PyCharm Professional'을 설치하고 'JetBrains'에 회원가입했다.
(🍯꿀팁! 스파르타코딩클럽을 통해, 웹개발 수강자는 연 $89 상당의 PyCharm Professional version을 4개월 간 무료로 사용할 수 있다! 1주차 강의에서 활성화 프로모션 코드가 포함된 가이드 문서를 제공해준다!)
파이참을 깔고 젯브레인스를 회원가입 및 기타 설정. 애머쟌(Amazon)으로 인증. 아마 혼자서는 오래 걸렸을 것이다. 튜터님 강의를 보면 아래에 '코드스니펫'으로 과정에 맞춰 링크 및 코드 같은 걸 헤매지말라고 메모해놨기 때문이다. 그렇기에 보는 사람 입장에서는 편리하게 '클릭, 복붙'해서 따라가면 된다.
HTML, CSS : 뼈와 살 🙊
HTML은 뼈대, CSS는 꾸미기! HTML은 구역과 텍스트를 나타내는 코드다. CSS는 영역을 꾸며주는 것. HTML 내 <style> 속성으로 꾸미기를 할 수 있지만, 긴 세월에 거쳐 모아서 볼 수 있는 CSS 파일이 탄생하게 되었다고. 원리는 'HTML 코드 내에 CSS 파일을 불러와서 적용하는 것. 또한 CSS를 잘 사용하는 것과, '예쁘게' 만드는 것은 다른 영역이지 않은가(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이). 보통 웹 디자이너나 퍼블리셔에게 의존하게 된다.
HTML은 크게 <head>와 <body>로 구성되는데 머리에는 페이지의 정보를, 몸에는 페이지의 내용이 담긴다. 머리에 들어가는 대표적인 요소들은 다음과 같다. <meta>, <script>, <link>, <title> 등.
몸에 들어가는 대표적인 요소들은 아래사진 참고.
아래에 있는 예재는 영상을 보며 실습한 '로그인 페이지'의 프로토타입이다. 보면 알겠지만 아직 휑하다.
<!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 부모-자식 구조도 살펴보자. <html> 태그는, 누가 누구 안에 있느냐를 이해하는 것이 가장 중요하다. 감싼 태그가 바뀌면, 그 내용도 영향을 받는다. 빨간색 <div> 안에, 초록색/파란색 <div>가 들어있다. 아래와 같은 상황에서 빨div를 가운데로 옮기면, 내용물인 초/파div도 모두 함께 이동된다고 보면 된다. 박스를 옮기면 안의 내용물 또한 함께 옮겨지듯. 같은 원리로 초div의 글씨색을 바꾸면 나는버튼1의 글씨색도 바뀐다.
CSS는 <head> ~ </head> 안에 <style> ~ </style>로 공간을 만들어 작성한다. 아래 코드를 통해 사용 방법을 알게되었다. mytitle이라는 클래스를 가리킬 때, .mytitle {...} 라고 써줘야하는 것을 까먹으면 아니아니아니되오. 모든 CSS를 다 알 수 없지만 나머지는 검색해서 쓰자.
배경 : background-color/-image/-size
크기 : width, height
폰트 : font-size/-weight/-family/ color
간격 : margin, padding
이어서, 자주 쓰이는 CSS에 대해 알아보자. h1, h5, background-image, background-size, background-position, color, width, height, border-radius, margin, padding 이 있다.
<!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;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text"/>
</p>
<p>
PW: <input type="password"/>
</p>
</div>
<button>로그인하기</button>
</body>
</body>
</html>
로그인 화면을 가운데로 가져오려면 width를 주고, margin: auto를 사용. 안되면 display:block 추가.
실습을 통해 자바 기초문법과 부트스트랩 등을 다루며 흥미진진했고 배움의 재미를 느꼈다. 곧 불어닥칠 숙제를 맞닥뜨리기 전까지는 말이다... 머잖아 그 시간이 오고야 말았다.
1주차 숙제 : 팬명록 만들기!
맙소사, 놀랍게도 난이도는 쉬운 편이었다. 하지만 머릿 속이 하얘졌다. 사실 본인이 하나도 기억이 안 난다해도 걱정 붙들어매시라. 우리에겐 튜터님 강의노트와 전 영상이 있다.
필자가 만든 팬명록은 아래에서 볼 수 있다.
필자는 밤을 하얗게 불 태웠다고 한다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>미친 과학자의 실험실 | 팬명록</title>
<link href="https://fonts.googleapis.com/css2?family=Single+Day&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Single Day', cursive;
}
.mytitle {
width: 100%;
height: 300px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://post-phinf.pstatic.net/MjAyMDAyMTBfMzAg/MDAxNTgxMzIzNjMzMDI5.ZRbMK6RxFqNYYs-p3XsuAlImXX5ZPgF4y1RAdaf8xmQg._notdo3_HYXd_yPN11RDzYx-MWpvfK8bgWjOJBKyrNMg.JPEG/%EC%9D%B8%EC%95%84_24.jpg?type=w1200);
background-position: center 50%;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 15px;
}
.mycards {
width: 95%;
max-width: 500px;
margin: auto;
}
.mycards > .card {
margin-top: 15px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>설인아 팬명록</h1>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="id" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-outline-dark">응원남기기💕</button>
</div>
</div>
<div class="mycards" id="comment-list">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>후속 작품도 기대중</p>
<footer class="blockquote-footer">장첸</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>연기 완전 실감나요!</p>
<footer class="blockquote-footer">하정우</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>항상 응원합니다~~</p>
<footer class="blockquote-footer">변기태</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>
요런식으로 한 땀, 한 땀 스위스 장인처럼 필요한 것들을 튜터님 커리큘럼이나 영상을 보고 정성스럽게 수 놓으시면 된다...
1주차를 마치며💫
웹/앱개발을 둘 다 함께 수강 중인 비전공자로서 나의 소감은. 서두르지마라. 다만 본인이 더디다고 느껴질 땐 일단 하고있던걸 내려두고 이해가 안 가는 부분부터 다시 보자. 보고 또 보고 실패해도 좋으니 일단 건드려보자. 우리에게는 아직 즉문즉답 서비스도 있다. 언제나 더디겠지만 게으르지 않는 게 중요하다.
멘탈적인 측면에서 힘들어할 수도 있겠다. 필자의 경우 끝날 무렵 차차 내가 만들어낼 성과를 생각하면 힘이 된다. 그럼 이만 다음 포스트에서 뵙겠다. 긴 글 읽어주셔 감사하다.
'Coding' 카테고리의 다른 글
| [스파르타코딩클럽] APP 개발 종합반 - 4주차 개발일지 (2) | 2022.11.30 |
|---|---|
| [스파르타코딩클럽] APP 개발 종합반 - 3주차 개발일지 (0) | 2022.11.23 |
| [스파르타코딩클럽] WEB 개발 종합반 - 2주차 개발일지 (1) | 2022.11.22 |
| [스파르타코딩클럽] APP 개발 종합반 - 2주차 개발일지 (1) | 2022.11.18 |
| [스파르타코딩클럽] APP 개발 종합반 - 1주차 개발일지 (0) | 2022.11.15 |
