WEB1 - HTML & Internet

이슬비·2023년 4월 6일

html web

생활코딩

목록 보기

1/3

생활코딩 WEB1 - HTML & Internet

1. 수업소개

남의 문제를 통해서 코딩을 배우는 것이 아닌 나의 문제를 코딩으로 해결하려는 역량이 필요하다.

지식을 알려주는 수업이기 보다는 공부와 친해지는 수업이 되는 것이 목표이다.

2~3. 프로젝트의 동기 & 기획

코딩수업과 내용을 잘 정리정돈할 수 있는 웹페이지를 기획하면 다음과 같다.

이제부터 코딩을 통해 웹페이지를 구현해보자.

4. 코딩과 HTML

"어떤 쪽이 사람이 하는 일이고 어떤 쪽이 기계가 하는 일인가, 그리고 어떤 것이 원인이고 어떤 것이 결과인가"
이를 이해하는 것은 아주 중요한 일이다.

사람이 하는 일 = 원인 = Code = Source = Language
기계가 하는 일 = 결과 = Application = App = Program = Webpage = Website
원인인 코딩을 통해서 결과를 만든다.

웹페이지를 만드는 코딩 언어는 HTML(HyperText Markup Language)이다.
HTML의 장점은 1. 쉽다. 2. 중요하다.

웹은 어떠한 저작권도 존재하지 않는 Public Domain이다. 그렇기에 앞으로도 존재하고 발전할 수 있는 기술이다.

5. HTML 코딩과 실습환경 준비

준비물 : 웹브라우저, 코드 편집기(Editor)
Editor로 Visual Studio Code를 사용한다.

웹페이지를 위한 파일의 확장자는 .html이다.

파일을 웹페이지에서 실행 시키는 방법은 다음과 같다.

command+O를 입력하고 파일을 safari 주소창에 드래그하면 열린다.
~~command+O를 입력하고 파일을 열면 웹페이지가 열린다.~~
직접 폴더로 접근하여 파일을 연다.
VS Code의 확장팩 open in browser를 설치하고 option+B를 입력한다.

VS Code에서 작성한 파일을 저장하고 웹페이지를 새로고침 하여야, 수정사항이 적용된다.

6. 기본문법 태그

태그(Tag)란 설명의 의미를 담고 있다.
HTML에서는 <>를 사용하여 태그를 적용한다. 이는 HTML을 지배하는 가장 중요한 문법이다.

태그를 열 때는 <>, 태그를 닫을 때는 </>.
굵게 : 
밑줄 : 

문법은 비유를 기반으로 한다. 해당 비유를 모를 경우 검색을 적극적으로 활용한다.

7. 혁명적인 변화

웹페이지에서 [우클릭]-[페이지 소스 보기] 또는 option+command+U를 입력하면, 보고 있는 웹페이지의 HTML 코드를 볼 수 있다.

웹페이지의 HTML 코드 중 태그의 의미는 모르지만, 태그라는 사실은 이제 안다. 다시말해 무엇을 모르는지 아는 상태가 된 것이고, 검색을 활용할 수 있게 된 것이다. 얼마나 혁명적인가.

<h#></h#>은 제목을 나타내는 태그로, 숫자는 구획 단계를 의미한다. 실습을 통해 <h#>의 의미를 추론하는 과정이 중요하다.

8. 통계에 기반한 학습

HTML에는 약 150개 이상의 태그가 존재한다. 이런 태그를 다 알기 보다는 몇 개만 알고 있는 것이 현명하다.

구글에서 수많은 웹페이지를 분석하고 이에 대한 통계를 낸 적이 있다. 평균적으로 웹페이지에서 32개의 태그를 사용하고 있다.

랭킹이 높은 태그들을 활용하면 무수히 많은 것들을 만들어낼 수 있다. 즉, 통계에 기반하여 공부의 방향성을 잡는 것이 중요하다.

9. 줄바꿈 : br vs p

HTML은 코드에서 줄바꿈을 하더라도 웹페이지에서 줄바꿈이 반영되지는 않는다.
따라서 줄바꿈을 위해   태그를 사용한다.   태그는 단순히 줄바꿈이라는 시각적인 의미를 지니고 있기 때문에 닫는 태그가 존재하지 않는다.   태그를 여러 번 사용하면 줄바꿈도 여러 번 적용된다.

  태그는 단순히 줄바꿈 기능을 하기 때문에 단락을 나누기 위해서는  태그를 사용한다.  태그는 단락의 범위를 지정해야 하기 때문에 닫는 태그 가 존재한다.

단락을 나누었다는 의미를 지니고 있기 위해서는  태그를 사용하는 것이 좋다. 이는 정보로써 좀 더 가치있는 HTML을 만들어준다.

CSS

 태그는   태그와는 달리 정해져 있는 여백이 존재하기 때문에 자유도가 떨어진다는 단점이 있다. 정해져 있는 여백을 조정하기 위해서는 CSS 기술을 사용한다.
CSS에서는 태그와 태그 사이의 여백을 나타내는 코드가 있다. 바로 margin이다.

위와 같은 HTML과는 완전히 다른 컴퓨터 언어의 문법인 CSS 기술을 사용하면, 위로 45픽셀만큼의 여백이 만들어진다.

10. HTML이 중요한 이유

흔히 편집기를 이용해서 글을 쓰는 것은 결국 내부적으로 HTML 코드를 생산하는 행위이다.

'coding'이라는 문구를 제목으로 정하는 방법은 두 가지가 있다.

coding
<h3>coding</h3>

두 가지 방법의 시각적인 표현은 비슷하지만 내부적으로는 엄연히 다르다.

2번의 방법이 1번보다 구획 단계가 상위이기 때문에, 정보의 관점에 있어서 후자가 좀 더 본질적으로 접근한다고 볼 수 있다. 이는 접근성의 차이에서도 크다.

웹페이지를 이쁘게 만들기 위해 제목을 이미지로 만들기 보다는, HTML의 태그를 정확히 알고 의미에 맞게 사용하는 것이 중요하다. 즉, HTML을 의미에 맞게 정확하게 사용하는 것이 굉장히 중요하다.

11. 최후의 문법 속성 & img

이미지를 삽입하는 태그는 <img>이다.
당연히 <img> 태그만 입력할 경우, 이미지가 삽입되지 않는다. 다시 말해서 태그의 이름만으로는 정보가 부족할 수 있다. 따라서 src로 이미지의 경로를 지정한다. 또한 이미지의 크기를 지정하기 위해 width를 사용한다.

<img src="coding.jpg" width="80%">

<img> 태그처럼 태그의 이름만으로는 정보가 부족할 때, src나 width와 같은 속성(Attribute)을 통해서 더 많은 의미를 부가할 수 있다. 속성의 순서는 상관없다.

이미지 삽입 사이트로 Unsplash을 추천한다. 저작권으로부터 자유롭다.

12. 부모자식과 목록

태그는 다음과 같이 포함 관계로 연관될 수 있다.

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

포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라고 한다.
HTML의 여러 태그는 포함 관계의 순서가 뒤죽박죽이지만, 특정 태그는 포함 관계의 순서가 고정이다.

목차를 만들기 위해서   태그를 사용할 수도 있지만, 이는 그 의미에 어긋나기 때문에 목차를 위한 태그 <li></li>를 사용한다.

<li> 태그의 경우 항목이 어디서부터 어디까지 서로 연관된 항목인지 그룹화가 필요하기 때문에 부모 태그 <ul></ul>가 필요하다. 즉, <li> 태그는 반드시 부모 태그 <ul></ul>를 갖는다.

<ul>
    <li>1. HTML</li>
    <li>2. CSS</li>
    <li>3. JavaScript</li>
</ul>

위의 코드에서 목차가 무수히 많을 경우, 숫자를 모두 치는 것은 불필요한 노동에 가깝다. 따라서 자동으로 목차 넘버링을 위해 <ul>를 <ol>로 바꾼다.

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

<ul> 태그와 <ol> 태그의 의미

<ul> : Unordered List
<ol> : Ordered List

표

표를 만들 경우 포함 관계가 목차보다 하나 더 늘어나게 된다.
<table>
	<tr>
 	<td></td>
 </tr>
</table>

13. 문서의 구조와 슈퍼스타들

대부분의 웹사이트에서 사용되는 압도적인 비율을 자랑하는 태그를 살펴보자.

`<title>`

웹페이지의 제목을 나타내는 태그로는 <title></title>을 사용한다. 이는 시각적으로 웹페이지의 제목을 나타내면서 검색 엔진과 같은 기계들은 <title> 태그를 인지한다.

`<meta>`

만약 제목을 'HTML이란 무엇인가?'와 같이 한국어로 수정한다면 다음과 같아진다.

이러한 이유는 HTML 파일에서는 utf-8 형식으로 저장하지만 웹브라우저에서는 다른 형식을 사용하기 때문이다.
웹브라우저에게 utf-8 형식을 사용하라고 지정할 때는 <meta> 태그를 사용한다.

<meta charset="utf-8">

`<head>`

<title> 태그나 <meta> 태그와 같이 본문을 설명하는 태그를 묶는 태그는 <head></head>이다.

`<body>`

<body></body> 태그는 본문을 묶는 역할을 한다.

`<html>`

HTML에 있는 모든 태그는 <head> 태그와 <body> 태그에 놓이게 된다. 이 두 태그를 묶는 최고위층 태그가 바로 <html></html>이다.
<html> 태그 위에는 관용적으로 <!DOCTYPE html>이라고 적는다.

14. HTML 태그의 제왕

태그가 웹의 왕국이라면 '이 태그'는 왕국의 제왕이다.
현대 HTML은 150여 개 태그로 이루어져 있지만, 이들 모두 '이 태그' 아래에 있다.
검색 엔진들은 '이 태그' 덕분에 웹페이지를 발견할 수 있었고 최고의 검색 결과를 만들 수 있었다.
'이 태그'는 도시의 길과 인체의 혈관과 같은 존재이다. '이 태그'가 없다면 모든 웹페이지는 고립될 것이며 정보 혁명이 일어나지도 않았을 것이다.
'이 태그'는 우리가 매일 100번도 넘게 사용하는 태그이다.
HTML의 첫 글자 H(Hypertext)가 바로 '이 태그'를 의미한다.

'이 태그'는 무엇일까?

바로 'Anchor'의 'A'를 의미하는 <a> 태그이다.
<a> 태그는 링크의 기능을 담당한다.

예를 들어 HTML 태그들 설명하는 사이트를 링크로 걸고 싶을 때 다음과 같이 작성한다.

<a href="https://www.w3.org/TR/2011/WD-html5-20110405/">Hypertext Markup Language (HTML)</a>

새 탭으로 열리게 하기 위해서는 target 속성을 이용한다.

<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank">Hypertext Markup Language (HTML)</a>

클릭하기 전에 툴팁을 보고 싶다면 title 속성을 이용한다.

<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a>

15. 웹사이트 완성

이전까지 만들었던 웹페이지를 완성해보자.

'WEB'이라는 제목을 만들고 그에 해당하는 목차로 'HTML', 'CSS', 'JavaScript'가 존재한다.
제목 'WEB'을 클릭하면 index.html 파일을 링크로 걸고 Welcome 페이지가 나온다.
목차 'HTML'을 클릭하면 1.html 파일을 링크로 건다.
목차 'CSS'을 클릭하면 2.html 파일을 링크로 건다.
목차 'JavaScript'을 클릭하면 3.html 파일을 링크로 건다.

<h1><a href="index.html">WEB</a></h1>
<ol>
	<li><a href="1.html">HTML</a></li>
	<li><a href="2.html">CSS</a></li>
	<li><a href="3.html">JavaScript</a></li>
</ol>

16. 원시웹

이번 수업은 두 개의 목표를 지닌다.

웹페이지를 만드는 것.
만든 웹페이지를 인터넷을 통해 누구나 가져갈 수 있게 하는 것.

인터넷과 웹이 어떻게 세상에 등장하게 되었을까?
인터넷과 웹은 종속 관계를 갖는다. 인터넷에는 웹 뿐만 아니라 FTP, email 등 다양한 서비스를 갖는다. 1960년에 인터넷이 등장하였고 1990년에 웹이 등장하였다.

1960년 핵 전쟁 시절에 중앙집중적이었던 통신 시스템의 단점이 대두되면서 인터넷이 탄생하였다. 인터넷은 중앙집중적이지 않기 때문에 공격을 받더라도 치명적인 피해로 이어지지 않았다.

1990년 스위스 제네바에서 웹이 탄생하였다. 이곳에는 유럽 입자 물리 연구소가 있는데 여기에는 강입자 가속기가 있다. '팀 버너스 리'는 'Enquire'이라는 프로그램을 만들었는데 이는 웹의 전신 중 하나이다. 'Enquire' 프로그램이 발전을 거듭하던 때에 인터넷이 들어오게 되면서 웹이 탄생하였다. 이 최초의 웹서버는 info.cern으로 접근할 수 있다. 이로써 특정 집단에서만 사용되던 인터넷이 대중화되었다.

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

인터넷이 동작하는 가장 기본적인 원리를 살펴보고자 한다. 인터넷이 동작하기 위해서는 최소 두 대의 컴퓨터가 필요하다.

두 대의 컴퓨터에는 각각 'Web Browser'와 'Web Server'라는 프로그램이 있다. 이 두 대의 컴퓨터는 인터넷으로 연결되어 있다.
'Web Server' 컴퓨터는 info.cern.ch라는 주소를 갖고 있다. 또한 하드디스크의 디렉토리 안에 index.html이라는 파일이 저장되어 있다.
'Web Browser' 컴퓨터에서 info.cern.ch/index.html로 접근하고자 한다. 즉, 'Web Server' 컴퓨터로 'index.html 파일을 원한다.'는 전기 신호를 보낸다.
'Web Server' 컴퓨터에서는 index.html 파일을 'Web Browser' 컴퓨터로 전송한다.
'Web Browser' 컴퓨터에서 index.html 파일을 읽고 해석한 뒤 화면에 표시한다.

'Web Browser' 컴퓨터를 client, 'Web Server' 컴퓨터를 server라고 한다.

Web Server를 사용할 수 있다는 것은, 내 컴퓨터에 있는 파일을 누구나 인터넷에 연결되어 있는 컴퓨터에 Web Browser를 깔면 이용할 수 있다는 것이다.
1. 자신의 컴퓨터에 Web Server를 직접 설치하거나 2. Web Hosting을 이용한다면 server의 역할을 충분히 해낼 수 있다.

Web Hosting을 통해 쉽게 이용해보고, Web Server로 인터넷의 원리를 파악하는 것을 추천한다.

18. 웹호스팅 : github page

직접 Web Server를 운영하려면 컴퓨터가 항상 켜져있어야 하고 인터넷이 항시 연결되어 있어야 한다는 단점이 있다. 물론 이를 대행해주는 회사가 있다.
인터넷에 연결되어 있는 컴퓨터를 HOST라고 한다. 이를 웹 서비스와 연계하는 것을 Web Hosting이라고 한다. 이 중 가장 유명한 서비스로 GitHub를 사용한다.

우선 여태 만들었던 HTML 파일을 GitHub에 올린다.
[Settings]-[Pages]에서 GitHub Pages를 만들고 [Actions]에 들어가면, Build와 Deploy 과정을 볼 수 있다.
Deploy 과정까지 완료되면 페이지가 생성된다. 코드가 수정되었다면 수정한 코드를 GitHub에 업로드하면 된다.

이론적으로 정리해보자.

컴퓨터에서 만든 파일(index.html)을 Hosting 업체(GitHub)에 업로드한다.
Hosting 업체에서는 Web Server를 활성화하여 도메인에 이름(https://example.com)을 부여한다.
방문자가 도메인 주소에 접속하면 Web Server가 업로드 파일을 읽고 방문자에게 소스코드를 전송한다.
방문자의 웹브라우저에 웹페이지가 보인다.

19. 웹서버 운영하기

실제로는 Web Server를 운영하기 보다는 Web Hosting을 많이 사용하기 때문에 제대로 작동하지 않을 수 있다.

우선 Web Server를 설치한다. (Apache, IIS, Nginx ...)
이 중 VS Code의 확장팩 Live Server를 설치한다.

오른쪽 하단에 Go Live를 클릭하면 Live Server가 실행되면서 Port: 5500 표시가 뜨는데, 이는 Web Server가 정상적으로 작동한다는 의미이다.

그러면 http://127.0.0.1:5500 주소의 웹브라우저가 실행되는데 이는 내 Web Server를 통해 실행되는 웹페이지이다. Live Server는 코드를 편집하면 리로드할 필요 없이 자동으로 수정 사항이 반영된다.

주소를 뜯어보자.
http : Hyper Text Transfer Protocol.
127.0.0.1 : internet protocol에서 사용하는 주소(IP address).
5500 : Port(각각의 서버에 해당하는 고유의 포트번호).

이번엔 컴퓨터를 Web Server로 생각하고 핸드폰을 웹브라우저로 생각해서, 핸드폰으로 Web Server에 접속해보자. 우선 컴퓨터와 핸드폰을 같은 네트워크에 연결해야 한다. 그리고 VS Code의 확장팩 IP Address를 설치한다.

~~해당 IP 주소를 핸드폰으로 접속하면 내가 만든 HTMl 파일을 볼 수 있다.~~

이슬비

다음 포스트

WEB1 - HTML & Internet

생활코딩

1. 수업소개

2~3. 프로젝트의 동기 & 기획

4. 코딩과 HTML

5. HTML 코딩과 실습환경 준비

6. 기본문법 태그

7. 혁명적인 변화

8. 통계에 기반한 학습

9. 줄바꿈 : br vs p

CSS

10. HTML이 중요한 이유

11. 최후의 문법 속성 & img

12. 부모자식과 목록

`<ul>` 태그와 `<ol>` 태그의 의미

표

13. 문서의 구조와 슈퍼스타들

`<title>`

`<meta>`

`<head>`

`<body>`

`<html>`

14. HTML 태그의 제왕

15. 웹사이트 완성

16. 원시웹

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

18. 웹호스팅 : github page

19. 웹서버 운영하기

WEB2 - CSS

0개의 댓글

WEB1 - HTML & Internet

생활코딩

1. 수업소개

2~3. 프로젝트의 동기 & 기획

4. 코딩과 HTML

5. HTML 코딩과 실습환경 준비

6. 기본문법 태그

7. 혁명적인 변화

8. 통계에 기반한 학습

9. 줄바꿈 : br vs p

CSS

10. HTML이 중요한 이유

11. 최후의 문법 속성 & img

12. 부모자식과 목록

<ul> 태그와 <ol> 태그의 의미

표

13. 문서의 구조와 슈퍼스타들

<title>

<meta>

<head>

<body>

<html>

14. HTML 태그의 제왕

15. 웹사이트 완성

16. 원시웹

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

18. 웹호스팅 : github page

19. 웹서버 운영하기

WEB2 - CSS

0개의 댓글

`<ul>` 태그와 `<ol>` 태그의 의미

`<title>`

`<meta>`

`<head>`

`<body>`

`<html>`