항해99를 시작하기 전 사전 강의 <웹 개발 종합 기초>를 수강하게 되었다 순서대로 차근차근 기록하며 공부하려 한다.
우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 받아서 그려주는 것 즉 브라우저가 하는 일은
1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일을 한다. 이때 요청은 서버가 만들어 놓은 API라는 창구에 미리 정해진 약속대로 요청을 보낸다.
그러나 항상 HTML만 내려주는 것이 아닌 데이터만 따로 내려줄 때도 많은데 예를 들면
티켓팅을 할 때 실시간으로 남은 자리가 없어지는 것을 볼 수 있는데 이처럼 페이지를 리프레시시키지 않고
실시간으로 데이터만 받아 끼울 수 있다.
데이터만 내려올 경우에는 이런 형식으로 내려오게 되는데 이를 JSON 형식이라고 한다
웹을 구성할 땐 HTML을 기본으로 CSS나 JavaScript로 페이지를 꾸며줄 수 있다.
즉 HTML은 뼈대 CSS는 꾸미기 라 할 수 있다.
HTML 기초
HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.
<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 태그는 누가 누구 안에 있느냐를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면 그 안에 있는 모든 내용물이 바뀌기 때문이다.
위 그림에선 빨간색 구역 안에 초록/파란색 구역이 들어있다. 이럴 경우 빨간색 div의 색을 바꾸거나 하는 등 무언가를 적용시키면
안에 있는 초록/파란색 구역 모두가 같이 적용된다.
그다음 기초적인 CSS를 이용하여 다음과 같은 화면을 만들어 봤다.
<!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>h1, background-image, background-size, background-position, color, width, height, border-radius, amrgin, padding 등 기초적인 CSS태그를 이용하여 만들었다.
위 코드와 같이 간단한 CSS의 경우 HTML 한 파일에서 <style>~</style>안에 전부 넣어도 문제가 없지만 저 부분이 길어지면
CSS만 따로 파일을 분리할 수 있다.
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">CSS를 이용하여 처음부터 끝까지 전부 코드를 입력하여 디자인을 하기엔 어려움이 많기 때문에 CSS양식을 미리 모아둔 부트스트랩이란 것을 이용하여 나의 웹을 꾸밀 수 있다.
https://github.com/dss1222/web_01week
GitHub - dss1222/web_01week
Contribute to dss1222/web_01week development by creating an account on GitHub.
github.com
여기서부턴 코드가 길어져 따로 첨부하지 않고 깃으로 흔적을 남긴다.
위 페이지는 부트스트랩을 응용하여 만든 html이다
JavaScript란 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어다. 이번에는 기초적인 문법만 배워보기로 한다.
javascript에선 <script>~</script>안에 function이라는 내가 원하는 함수를 만들어 사용할 수 있다.
function hey(){
alert('안녕!');
}
<button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>hey()라는 함수를 만들고 이 함수에는 안녕이라는 창이 뜨게 설정해 두었다.
아래 문단에서 button을 누를 때 실행되는 onclik에 hey()를 적용하여 결과적으론 버튼을 눌렀을 때 안녕이라는 창이 뜨게 된다.
javascript의 기초 (함수, 조건문, 반복문 등)는 대학생 때 배웠던 C, C#, C++과 유사하여 익히는데 크게 어렵지 않았는데
그중 가장 중요한 부분은 리스트와 딕셔너리의 조합이라 생각된다.
강의에선 서울시 미세먼지 값을 리스트와 딕셔너리 배열을 이용하여 데이터를 다루는 연습을 하였는데
function show_gus(index) {
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
if (mise["IDEX_MVL"] < index) {
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(index + "보다 작은 구: " + gu_name + ", " + gu_mise);
}
}
}
다음과 그림과 같이 javascript를 이용하여 데이터를 정제하면 보기에 쉬울뿐더러 데이터를 다룰 때 보다 용이하게 다룰 수 있다. 만약 리스트, 딕셔너리, for문 등이 없었다면 저 데이터를 하나하나 찾아야 했을 뿐만 아니라 다른 곳에 가져다 쓰기에 매우 힘들었을 것이다.
앞으로도 이런 데이터를 정제하여 이용할 일이 많을 거라 생각하니 더더욱 중요하게 느껴졌다.
다음 강의에선 javascript 복습과 jQuery와 Ajax를 이용하여 데이터를 다루는 법을 공부할 예정이다.
'공부기록 > 웹개발' 카테고리의 다른 글
| 웹개발 복습 (jQuery) (Ajax) (Api) (0) | 2022.01.13 |
|---|---|
| 서버 사용해보기 (0) | 2022.01.03 |
| Flask, 미니프로젝트 해보기 (0) | 2022.01.03 |
| python 기초, 웹크롤링, DB (0) | 2021.12.31 |
| JavaScript기초, jQuery기초, Ajax(API)기초 (0) | 2021.12.29 |