1강

수업 소개

나의 문제를 코딩으로 해결하려고 하는 엔지니어라 상상하자.

이 강의에선 강사님이 과거에 해결하고자 했던 문제를 빌려 공부와 친해지고자 하는 목적을 지닌다.

2강

프로젝트의 동기

지금을 중심으로 전후 20년은 아날로그가 디지털로 오프라인이 온라인으로 전환되는 대변화의 순간이라고 생각합니다.

강사님은 HD화질이 지원됨에 따라 강의를 업로드 하기 시작하였고, 그 과정에서 동영상 서비스의 불편함을 느끼셨다. 그리고 그 불편함을 원동력삼아 직접 만들기로 이어진다.

3강

기획

만들기 전에 무엇을 만들 것인가를 그려보는 과정을 기획이라고 한다. 또 현업에서는 기술자라고 불린다.

위의 사진처럼 제목, 목차, 영상, 설명등을 포함한 웹사이트를 기획한다.

4강

코딩과 HTML (HyperText Markup Language)

왼쪽: 기계가 하는 일(결과) = Application = App = Program = Wepsite = Wep page
오른쪽: 사람이 하는 일(원인) = Code(부호, 신호) = source(원천) = Language(언어{약속})

이러한 다양한 표현들은 같은 대상을 바라보는 관점에 따라 표현이 조금씩 다름에 불구하다.

첫 번째 코딩 공부의 대상으로 이보다 더 좋은 언어가 또 있을까요

HTML은 웹페이지를 만드는 코드이다.

HTML의 장점
1. 쉽다: 그 어떤 언어보다도 압도적으로 쉽다.
2. 중요하다: 웹페이지는 방대한 양의 디지털 정보가 담긴 거대한 그릇이므로 중요한 언어이다.

HTML은 완전한 자유를 의미하는 퍼블릭 도메인(public domain) 이다. 따라서 HTML은 어떠한 저작권도 존재하지 않는다.
웹은 특정 기업이 독점하지 않았기에 1990년 이후로 지금까지 살아남았으며 장래에도 살아남을 가능성이 높다.

5강

HTML코딩과 실습환경 준비

실습을 위한 준비물
1. 웹 브라우저
2. 코드 편집기 (Editor)

웹 브라우저와 코드 편집기를 모두 가지고 있으나, 보다 전문적인 코드 편집기를 사용하기 위해 수업에서는 Visual Studio Code를 사용한다.

Visual Studio Code를 설치, 실행한다.
파일 이름을 지정할 때 뒤에 '.html'의 확장자명을 사용한다

간단한 예시를 들기위해 Hello world 를 작성한다.

위의 사진은 저장을 안 했다는 뜻이기에 File -> Save (Ctrl + s)를 눌러야한다.

만들어진 html 파일을 웹브라우저에서 실행시키는 방법
1. Visual Studio Code 화면 좌측에 있는 Web 아래의 파일을 직접 드래그해 주소창에 올려 놓고 Enter를 누른다.
2. 파일찾기(Ctrl + o)를 눌러 파일을 실행한다.

이 두가지 방법으로 1.html을 실행하면 다음과 같이 Hello world가 출력된다!

6강

기본문법 태그

내가 만든 기획서이다.

김규탁의 음악취향은 참 난잡하고 잡다하다. 어린시절 빅뱅과 지드래곤, 케이팝에 빠져있던 시절을 지나 이 시점 가장 후회한다는 시기인 발라드에 빠진 잠깐의 시절이 있었고, 현재는 힙합과 밴드음악을 듣느라 많은 시간을 할애한다고 한다.

먼저 이 부분을 작업해 보겠다.

태그(Tag)는 HTML을 지배하는 가장 중요한 문법이다.
강조하고자 하는 문자열의 앞 뒤에 각각

<strong> '강조하고자 하는 문자열'</strong>

이런식으로 표기하면 글자가 두꺼워진다.
strong 태그는 이처럼 글자를 두껍게 하여 강조할 수 있다.

또 다른 방식으로 문자열을 강조하는 방법에는 underline 태그가 있다.
underline 태그는 말 그대로 문자열에 밑줄을 긋는 태그이다.

<u> '강조하고자 하는 문자열'</u>

이런식으로 표기하면 글자에 밑줄을 칠 수 있다.

내 문자열을

<strong>김규탁의 음악취향은 참 난잡하고 잡다하다.</strong> 어린시절 <u>빅뱅과 지드래곤, 케이팝</u>에 빠져있던 시절을 지나 이 시점 가장 후회한다는 시기인 발라드에 빠진 잠깐의 시절이 있었고, 현재는 힙합과 밴드음악을 듣느라 많은 시간을 할애한다고 한다.

로 바꾸고 저장 (Ctrl + s)하여 새 창에 끌어다 출력하면

위 사진과 같이 밑줄과 두꺼운 글씨로 출력되는 것을 확인할 수 있다.

7강

혁명적인 변화

웹페이지를 우클릭하여 페이지의 소스를 확인하면 HTML로 작성된 코드를 확인 할 수 있다.
만약 모르는 h1이라는 태그가 있다하면 구글에

HTML h1 tag

와 같이 검색하면 된다.
허나, 이 태그가 무엇일까를 직접 추론하는 과정은 매우 가치있다.
먼저

<h1>제목 수준 1</h1>
<h2>제목 수준 2</h2>
<h3>제목 수준 3</h3>
<h4>제목 수준 4</h4>
<h5>제목 수준 5</h5>
<h6>제목 수준 6</h6>	

이 예제를 에디터에 붙여넣고 출력하면

위처럼 출력된다.
h에 숫자 1부터 6까지를 붙인 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그는
해당 영역의 제목(heading)을 나타낸다.

나의 텍스트에 이를 활용해보았다.

<h1>김규탁의 음악 취향</h1>
<strong>김규탁의 음악취향은 참 난잡하고 잡다하다.</strong> 어린시절 <u>빅뱅과 지드래곤, 케이팝</u>에 빠져있던 시절을 지나 이 시점 가장 후회한다는 시기인 발라드에 빠진 잠깐의 시절이 있었고, 현재는 힙합과 밴드음악을 듣느라 많은 시간을 할애한다고 한다.

를 출력하면

이처럼 제목답게 표현할 수 있다.

8강

통계에 기반한 학습

HTML에는 150개가 넘는 태그가 있다. 그 중 밑천으로 가지고 있을만한 태그가 무엇인가를 판단하기 위한 수업이다.

https://www.advancedwebranking.com/seo/html-study
이 페이지에선 웹페이지가 평균적으로 사용하는 태그의 수를 그래프로 보여준다.

현재 기준으로 약 30개 정도의 태그를 가지고 있는 웹페이지가 가장 많다는 뜻이다.

또한 이 순위표는 가장 빈버하게 사용하는 태그를 순서대로 보여준다.
7강에서 배운 <h1> 함수도 확인할 수 있다.

9강

줄바꿈 : br vs p

내 웹페이지에 더 자세한 내용들을 추가해 보았다.

<h1>김규탁의 음악 취향</h1>
<strong>김규탁의 음악취향은 참 난잡하고 잡다하다.</strong> 어린시절 <u>빅뱅과 지드래곤, 케이팝</u>에 빠져있던 시절을 지나 이 시점 가장 후회한다는 시기인 발라드에 빠진 잠깐의 시절이 있었고, 현재는 힙합과 밴드음악을 듣느라 많은 시간을 할애한다고 한다. 
작년에 멜론을 360일 출석할 정도로 음악 없이는 살 수 없다는 가치관을 지니고 있다.또한 집에 있는 스피커에 CD를 넣어 침대에 누워 음악 감상하는 것을 즐긴다. 그의 세번째 수능이 끝난 저번 겨울엔 노엘 갤러거, 카더가든, 브로콜리 너마저, 언에듀케이티드 키드 등의 공연을 직접 보러 갔다고 한다. 현재 밴드부에 속해있는 그는 최근앤 노래를 외우느라 듣고싶은 노래를 못 들어 슬프다고 전해진다.

이를 바로 에디터에 넣으면 중간에 줄 바꿈이 있지만, 출력되는 값에는 줄 바꿈이 표현되어 있지 않다.

구글에

html new line tag

를 검색하여 줄 바꿈 태그를 찾아보았다.
html에서 새로운 줄을 표현하는 태그는 <br>로 표현한다.
앞서 배웠던 strong 이나 underline과 달리 br 태그는 앞뒤로 태그를 표시하지 않고 줄 바꿀 문자열 뒤에만 <br>를 붙인다

구글에

html paragraph tag

을 검색하여 단락 태그를 찾아보았다
html에서 단락을 표현하는 태그는 <p>로 표현한다.
<br>과 다르게<p>는 어디서부터 어디까지가 한 단락인지를 표현할 수 있다. 그래서 p 태그는 열리는 태그와 닫히는 태그가 존재한다.

<h1>김규탁의 음악 취향</h1>
<p><strong>김규탁의 음악취향은 참 난잡하고 잡다하다.</strong>어린시절 <u>빅뱅과 지드래곤, 케이팝</u>에 빠져있던 시절을 지나 이 시점 가장 후회한다는 시기인 발라드에 빠진 잠깐의 시절이 있었고, 현재는 힙합과 밴드음악을 듣느라 많은 시간을 할애한다고 한다.</p>
작년에 멜론을 360일 출석할 정도로 음악 없이는 살 수 없다는 가치관을 지니고 있다.또한 집에 있는 스피커에 CD를 넣어 침대에 누워 음악 감상하는 것을 즐긴다. 그의 세번째 수능이 끝난 저번 겨울엔 노엘 갤러거, 카더가든, 브로콜리 너마저, 언에듀케이티드 키드 등의 공연을 직접 보러 갔다고 한다.<p>현재 밴드부에 속해있는 그는 최근앤 노래를 외우느라 듣고싶은 노래를 못 들어 슬프다고 전해진다.</p>

이렇개 두 개의 나뉘어진 출력하면

이와 같이 표현된다.(결과는 같다)
이 맥락에서는 <p> 태그를 쓰는게 낫다.
이 웹페이를 좀 더 정보로서 가치있게 만든다.(단락을 의미론적으로 표현 가능)

<p>태그의 단점은 단락과 단락의 간격이 고정되어 있기에 시각적 자유도가 떨어진다.

시각적으로 부족한 부분은 CSS로 보완 가능하다.

<br>,<p>태그는 각각 70%, 81%나 차지하는 유용한 태그이다.

10강

Html이 중요한 이유

일반인들이 만든 제목을 표현하는 코드와 지식인들의 제목을 표현하는 코드에는 차이가 있다.
일반인들은 폰트나 글자의 크기를 바꾸지만, 이는 다른 문자들과 다를 바 없다.
그에 반해 지식인들은 <h3>와 같이 분류체계를 지니는 코드를 사용할 수 있다.

예를들어 저런 제목을 가진 어떤 것을 구글에 검색한다 치면 전자는 다 같은 문자라 후자의 문자보다 아래에 입력된다.

11강

최후의 문법 속성 & img

'속성'은 태그의 심화된 분법이다.
이미지를 웹페이지에 포함시킬 때 사용되는 태그의 이름은<img>이다.(image의 줄임말)
그냥 <img>라고만 작성하면 어떤 이미지를 출력할지 모르기에 아무것도 출력되지 않는다.
따라서 어떤 이미지인지를 알려주기로 약속된 속성을 <img src="">로 표현한다/ ""의 안에는 원하는 이미지의 주소를 적어주면 웹 브라우저는 저 위치에 이미지를 표현하게 된다
링크텍스트
이 사이트는 저작권 없는 사진의 페이지이다.
만들어둔 Web 파일에 이미지를 저장하고
<img src="rockstar_photo.jpg">
를 입력하여 저장 후

<h1>김규탁의 음악 취향</h1>
<img src = "rockstar_photo.jpg">
<p><strong>김규탁의 음악취향은 참 난잡하고 잡다하다.</strong>어린시절 <u>빅뱅과 지드래곤, 케이팝</u>에 빠져있던 시절을 지나 이 시점 가장 후회한다는 시기인 발라드에 빠진 잠깐의 시절이 있었고, 현재는 힙합과 밴드음악을 듣느라 많은 시간을 할애한다고 한다.</p>
작년에 멜론을 360일 출석할 정도로 음악 없이는 살 수 없다는 가치관을 지니고 있다.또한 집에 있는 스피커에 CD를 넣어 침대에 누워 음악 감상하는 것을 즐긴다. 그의 세번째 수능이 끝난 저번 겨울엔 노엘 갤러거, 카더가든, 브로콜리 너마저, 언에듀케이티드 키드 등의 공연을 직접 보러 갔다고 한다.<p>현재 밴드부에 속해있는 그는 최근앤 노래를 외우느라 듣고싶은 노래를 못 들어 슬프다고 전해진다.</p>

를 출력하면

이렇게 된다...
이는 너무 이미지의 크기가 커서 그런 것 이므로
<img src = "rockstar_photo.jpg" width="400">
혹은
<img src = "rockstar_photo.jpg" width="100%">
로 출력하면

이렇게 웹페이지가 사이즈에 맞게 출력된다 100%는 자동으로 이미지의 사이즈가 바뀌는 것이다.

<img src = "rockstar_photo.jpg" width="100%">
에서 src = "rockstar_photo.jpg", width="100%" 이 부분들이 속성(Attribute)이며 속성은 위치가 상관이 없다.

12강

부모자식과 목록

<parent>
    <child></child>
</parent>

이처럼 태그가 서로 포함 관계로 연관되어 있을 때 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라고 한다.

내 홈페이지의 좌측에 있는 목차를 표현하기 위해 <li>태그를 사용한다.

<li>1. 밴드</li>
<li>2. 힙합</li>
<li>3. 기타</li>

이를 출력하면

이렇게 출력된다.

만약 저 1.밴드 2.힙합 3.기타 외에 다른 분류를 하고싶다 치자.
그를 Oasis, Cjamm, Chet Baker로 가수에 대한 분류를 하려 하면,
<ul>이란 태그를 사용할 수 있다. ul 은 Unordered List 이다.

<ul>
  <li>1. 밴드</li>
  <li>2. 힙합</li>
  <li>3. 기타</li>
</ul>
<ul>
  <li>Oasis</li>
  <li>Cjamm</li>
  <li>Chet Baker</li>
</ul>

를 출력하면 똑같이

로 출력된다.

이 코드에서 <li> 태그는 항목이 어디서부터 어디까지가 서로 연관된 항목인지를 경계짓는 부모 태그를 갖고 있어야하고, 그 부모태그인 <ul>태그는 반드시 자식 태그를 갖고 있어야 한다.

<ul>
  <li>1. 밴드</li>
  <li>2. 힙합</li>
  <li>3. 기타</li>
</ul>  

여기서 만약 1. 2. 와 같은 넘버링을 코딩을 통하여 해결하고자 하면, <ul>대신<ol>을 사용하면 된다. ol은 Ordered List의 약자이다.

표 작성 태그로는 </table> 이 있다

<table>
  <tr>
    <td>밴드</td>
    <td>22%</td>
  </tr>
  <tr>
    <td>힙합</td>
    <td>24%</td>
  </tr>
    <tr>
    <td>44%</td>
    <td>3. 기타</td>
  </tr>
</table>

를 출력하면

밴드	22%
힙합	24%
44%	3. 기타

이런 표가 나타난다.

13강

문서의구조와 슈퍼스타들

사용되는 빈도의 태그 순위중 상위 5개에 속하는 이 태그들에 대해 알아보자.

1. title

<title>음악 취향 - 김규탁</title>
이와 같이 나타내며, 웹페이지의 제목을 사용자에게 명시적으로 알려줄 수 있을 뿐 아니라 검색 엔진과 같은 기계들은 <title>을 책표지 와 같이 사용한다.

2.meta

<meta charset ="utf-8">
이와 같이 나타내며 0과 1을 어떻게 저장할 것인지 약속이 여러가지가 있는데, 그 중 하나가 utf-8 이다. 이 문장은 즉 웹 페이지를 열 떄는 utf-8로 연다는 뜻이다.
charset은 char(character) + set(규칙)을 의미한다.

<title>음악 취향 - 김규탁</title>
<meta charset ="utf-8">

<ul>
    <li>1. 밴드</li>  
    <li>2. 힙합</li>
    <li>3. 기타</li>
</ul>
<ul>
    <li>Oasis</li>
    <li>Cjamm</li>
    <li>Chet Baker</li>
</ul>
<h1>김규탁의 음악 취향</h1>
<img src = "rockstar_photo.jpg" width = "100%">
<p><strong>김규탁의 음악취향은 참 난잡하고 잡다하다.</strong>어린시절 <u>빅뱅과 지드래곤, 케이팝</u>에 빠져있던 시절을 지나 이 시점 가장 후회한다는 시기인 발라드에 빠진 잠깐의 시절이 있었고, 현재는 힙합과 밴드음악을 듣느라 많은 시간을 할애한다고 한다.</p>
작년에 멜론을 360일 출석할 정도로 음악 없이는 살 수 없다는 가치관을 지니고 있다.또한 집에 있는 스피커에 CD를 넣어 침대에 누워 음악 감상하는 것을 즐긴다. 그의 세번째 수능이 끝난 저번 겨울엔 노엘 갤러거, 카더가든, 브로콜리 너마저, 언에듀케이티드 키드 등의 공연을 직접 보러 갔다고 한다.<p>현재 밴드부에 속해있는 그는 최근앤 노래를 외우느라 듣고싶은 노래를 못 들어 슬프다고 전해진다.</p>

이 코드에서 위에 있는 두 줄의 코드는 본문을 설명하고, 그 아래의 코드들은 본문이다.

3. body

본문은 <body>의 태그를 사용한다.
본문(body)을 설명하는 태그는 <head>를 사용한다.

4.head

즉 HDML에 있는 모든 태그는 head 혹은 body태그 중 하나 아래에 놓이게 된다.
그런점에서 이 두 태그는 고위직 태그이다.

5.html

그보다 더 최상위층의 태그에는 <html>이 있다. 이 문서는 html이라는 것이다. 또한 그 위에 관용적으로 <!dotype html>을 작성한다.

<!dotype html>
<html>

<head>
    <title>음악 취향 - 김규탁</title>
    <meta charset ="utf-8">
</head>

<body>
    <ul>
        <li>1. 밴드</li>  
        <li>2. 힙합</li>
        <li>3. 기타</li>
    </ul>
    <ul>
        <li>Oasis</li>
        <li>Cjamm</li>
        <li>Chet Baker</li>
    </ul>
    <h1>김규탁의 음악 취향</h1>
    <img src = "rockstar_photo.jpg" width = "100%">
    <p><strong>김규탁의 음악취향은 참 난잡하고 잡다하다.</strong>어린시절 <u>빅뱅과 지드래곤, 케이팝</u>에 빠져있던 시절을 지나 이 시점 가장 후회한다는 시기인 발라드에 빠진 잠깐의 시절이 있었고, 현재는 힙합과 밴드음악을 듣느라 많은 시간을 할애한다고 한다.</p>
    작년에 멜론을 360일 출석할 정도로 음악 없이는 살 수 없다는 가치관을 지니고 있다.또한 집에 있는 스피커에 CD를 넣어 침대에 누워 음악 감상하는 것을 즐긴다. 그의 세번째 수능이 끝난 저번 겨울엔 노엘 갤러거, 카더가든, 브로콜리 너마저, 언에듀케이티드 키드 등의 공연을 직접 보러 갔다고 한다.<p>현재 밴드부에 속해있는 그는 최근앤 노래를 외우느라 듣고싶은 노래를 못 들어 슬프다고 전해진다.
</p></body>

14강

HTML 태그의 제왕

<a>는 'anchor'의 첫 글자를 땄으며 링크,HyperText를 의미한다.
예를들어 내 글에서 '멜론'에 멜론 홈페이지 링크를 걸어보자.

<a href="https://www.melon.com/">멜론</a>

이런식으로 하면 홈페이지에서 '멜론'을 누르면 멜론의 홈페이지로 넘어간다.

만약 클릭을 하였을 때 새로운 페이지가 뜨게 하려면

<a href="https://www.melon.com/" target = "_black">멜론</a>

처럼 target = "_black"을 뒤에 붙여주면 된다.

링크가 클릭하기 전에 무엇인지를 알려주고 싶을 땐

<a href="https://www.melon.com/" target = "_black" title="멜론 공식 홈페이지">멜론</a>

로 코드를 짜며, 홈패이지에 마우스를 올리면 title로 지정한 값이 나타난다.

15강

웹사이트 완성

1.html을 복제하여 2.html, 3.html, index.html을 만들었다.
index.html은 홈페이지의 메인이라 볼 수 있고, 나머지들을 클릭하면 그 목차로 이동하는 사이트를 만들었다.

1.html

<!doctype html>
<html>

<head>
    <title>음악 취향(밴드) - 김규탁</title>
    <meta charset ="utf-8">
</head>

<body>
    <h1><a href = "index.html">김규탁의 음악 취향</a></h1>
    <ol>
        <li><a href = "1.html">밴드</a></li>  
        <li><a href = "2.html">힙합</a></li>
        <li><a href = "3.html">기타</a></li>
    </ol>

        <h2>밴드</h2>  
    김규탁은 최근 밴드 음악을 좋아하고 있다. 밴드부에 속한 그는 동아리방에서 듣는 세션들의 소리에 매료되어 자주 밴드 음악을 듣는다고 한다. 부모님이 들려주시던 밴드 음악에 영향을 받아 이런 저런 다양한 밴드 음악을 듣고있다. 최근에는 Can't stop - RHCP에 빠져있다고 한다.   
    </p></body></html>

2.html

<!doctype html>
<html>

<head>
    <title>음악 취향(힙합) - 김규탁</title>
    <meta charset ="utf-8">
</head>

<body>
    <h1><a href = "index.html">김규탁의 음악 취향</a></h1>
    <ol>
        <li><a href = "1.html">밴드</a></li>  
        <li><a href = "2.html">힙합</a></li>
        <li><a href = "3.html">기타</a></li>
    </ol>


        <h2>힙합</h2>
    김규탁은 힙합을 즐겨 듣는다. 어렸을 적 Tv 프로그램을 통해 접한 힙합에 흥미를 느낀 그는 이런 저런 힙합음악을 들으며 장르 내의 스펙트럼을 넓혀 나갔고, 시간만 빈다면 새로 나오는 이름있는 아티스트의 정규 앨범은 챙겨 듣는다고 한다.  또한 이번 힙합 플레이야 페스티벌에 갈 예정이며, 그가 가장 사랑하는 아티스트인 씨잼이 페스티벌의 일정에 없어 슬프다고 한다.
    </p></body></html>

3.html

<!doctype html>
<html>

<head>
    <title>음악 취향(기타) - 김규탁</title>
    <meta charset ="utf-8">
</head>

<body>
    <h1><a href = "index.html">김규탁의 음악 취향</a></h1>
    <ol>
        <li><a href = "1.html">밴드</a></li>  
        <li><a href = "2.html">힙합</a></li>
        <li><a href = "3.html">기타</a></li>
    </ol>


        <h2>기타</h2> 
    김규탁은 밴드 음악과 힙합 외에도 다양한 장르를 듣는다. 접하기 쉬웠던 케이팝과 발라드부터 최근에는 Chet Baker라는 재즈 아티스트에 빠졌다고 알려져있다. Chet Baker의 음악을 들으면 마음이 편안해진다고 한다.  
    </p></body></html>

4.html

<!doctype html>
<html>

<head>
    <title>음악 취향 - 김규탁</title>
    <meta charset ="utf-8">
</head>

<body>
    <h1><a href = "index.html">김규탁의 음악 취향</a></h1>
    <ol>
        <li><a href = "1.html">밴드</a></li>  
        <li><a href = "2.html">힙합</a></li>
        <li><a href = "3.html">기타</a></li>
    </ol>
    

    <img src = "rockstar_photo.jpg" width = "100%">
    <h2>김규탁의 음악 취향</h2>
    <p><strong>김규탁의 음악취향은 참 난잡하고 잡다하다.</strong>어린시절 <u>빅뱅과 지드래곤, 케이팝</u>에 빠져있던 시절을 지나 이 시점 가장 후회한다는 시기인 발라드에 빠진 잠깐의 시절이 있었고, 현재는 힙합과 밴드음악을 듣느라 많은 시간을 할애한다고 한다.</p>
    작년에 <a href="https://www.melon.com/" target = "_black" title="멜론 공식 홈페이지">멜론</a>을 360일 출석할 정도로 음악 없이는 살 수 없다는 가치관을 지니고 있다.또한 집에 있는 스피커에 CD를 넣어 침대에 누워 음악 감상하는 것을 즐긴다. 그의 세번째 수능이 끝난 저번 겨울엔 노엘 갤러거, 카더가든, 브로콜리 너마저, 언에듀케이티드 키드 등의 공연을 직접 보러 갔다고 한다.<p>현재 밴드부에 속해있는 그는 최근앤 노래를 외우느라 듣고싶은 노래를 못 들어 슬프다고 전해진다.
    </p></body></html>

링크텍스트

16강

원시 웹

웹과 인터넷의 차이점은 인터넷이 웹보다 더 광범위하다는 것이다. 예를 들어 인터넷이 운영체제라면 웹은 앱이다.
1960년대에 탄생한 인터넷은 1990년대에 웹을 만나 대중화되었다.
http://info.cern.ch
이곳이 웹페이지의 시작이다.

17강

인터넷을 여는 열쇠 : 서버와 클라이언트

인터넷이 동작하는 원리는 웹브라우저가 웹서버에 신호를 보내면 웹서버에서 웹브라우저에 코드를 다시 응답한다. 그 코드를 웹브라우저가 읽어서 화면에 출력한다.
웹브라우저는 클라이언트, 웹서버는 서버로 작동한다.

18강

웹호스팅 : github page

깃허브를 통해 만든 웹포스팅을 해보았다.

만든 웹페이지의 이론적 경로로는,
내가 만든 웹페이지가 있는 내 컴퓨터가 있다.
방문자가 있다.
깃허브 같은 호스팅 업체가 있다.

내가 깃허브에 파일을 업로드하면, 소스코드가 웹 포스팅으로 업로드 된다. 웹 포스팅 업체에서는 웹 포스팅에 설치돤 웹 서버를 활성화한다. 그 후 컴퓨터에 도메인의 이름을 부여한다. 방문자가 도메인주소로 접속하면 웹서버가 소스코드를 전송한다. 이를 통해 만들어진 웹페이지를 전송할 수 있다.

19강

웹서버 운영하기

live server를 설치하였다. 이를 이용하면 리로드 할 필요없이 바로바로 내용이 변경된다.
live server를 통해 연 웹사이트는 웹서버를 끈 후 리로드하면 웹사이트가 열리지 않는다.

빨간색은 브라우저가 파일을 직접 열은 경우이다
초록색은 웹서버(live server)를 통해서 접근했을 때의 주소이다.

http://127.0.0.1:5500/index.html

이 주소를 뜯어보면
http는 Hyper Text를 Transfer(전송)하는 Protocol(규약)이다.
127.0.0.1은 Internet Protocol에서 사용하는 Address(주소)이다. '127.0.0.1'은 내 컴퓨터를 가르키자고 약속된 주소이다.
5500은 Port 번호이다. 각서버는 각 포트번호를 지닌다.

20~23강

수업을 마치며

백엔드가 웹 관련이였구나...