Hyun's Wonderwall

[웹 공부] 생활코딩 WEB1 - HTML & Internet 강의 메모 (완강) 본문

Study/Web

[웹 공부] 생활코딩 WEB1 - HTML & Internet 강의 메모 (완강)

Hyun_! 2023. 1. 4. 15:02

생활코딩 WEB1 - HTML & Internet 

 

WEB1 - HTML & Internet - 생활코딩

--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여

opentutorials.org

1일차 : 수업소개 ~ 실습환경 준비

VS Code 설치, HTML 파일 생성법 배움

2일차 : ~통계에 기반한 학습

태그(TAG)를 배웠다. 쉽지만 매우 중요한 기본 문법.

  • 글자 굵게: <strong>...</strong>
  • 글자 밑줄: <u>...</u>
  • 제목 포맷: h1부터 h6까지 있음 (<h1>...</h1>)

+) 통계에 기반해 학습하는 법 알기 (빈도수가 중요하다)

3일차 : ~최후의 문법 속성과 img

[9. 줄바꿈]

  • 줄바꿈 태그: <br> (열기만 하고, 닫는 것이 없다.)
    *무엇인가를 설명하는 용도가 아닌 태그는, 감싸야 하는 컨텐츠가 없기 때문에 닫는 태그가 없다.
  • 단락 태그: <p>...</p> (하나의 단락을 그룹핑 할 수 있도록 열고 닫는 태그.)

*단락을 표현할 때는 p 태그를 사용하는 것이 더 좋다.

html만 사용할 경우, p 태그는 단락 간 간격이 고정되어 있으므로 br태그가 더 편하게 느껴질 수 있다.

그러나 CSS를 함께 사용하면, p태그의 디자인을 자유롭게 변경할 수 있게 되어, 단락간 간격을 원하는 대로 조정할 수 있게 되므로

p태그를 사용하는 것이 좋은 선택이다.

 

----

[10. format의 중요성]

<h3>...</h3>과

그저 CSS로 굵기, 폰트크기를 정해준 코드(<strong><span style="font-size:22px;">coding</span></strong>)

를 비교했다.

이때 heading 태그를 사용하는 것이 더 좋다. 제목임을 바로 알 수 있기 때문. (->검색엔진 노출, 접근성 좋음)

+) html은 휴머니즘적 측면에서도 중요한 기술이다.

 

----

[11. 최후의 문법 속성과 img]

  • <img>: 이미지를 넣는 태그
  • 속성(attribute): 태그의 동작을 좀 더 구체적으로 제어하기 위해 사용된다.
    ex. <img src="주소"> 여기서의 src 같은 것들이 속성이다
    프로젝트 폴더 내에 저장한 coding.jpg라는 이미지를 불러오는 코드: <img src="coding.jpg">
  • src 속성(source의 약자) : 속성값으로 이미지의 저장 경로를 요구한다.(링크, 파일명 등)
  • width 속성 : 이미지 크기 조정에 사용, 숫자나 %를 사용하여 원하는 크기로 조정할 수 있다.
    ex. <img src=" " width="100%">

4일차 : ~태그의 제왕

[12. 부모 자식과 목록]

<parent>

  <child></child>

</parent>

위와 같이 하나의 태그 안에 다른 태그가 존재하면 상대적 상위/하위 관계가 발생한다.

  • 부모 요소(parent element) 밖을 감싸고 있는 요소
  • 자식 요소(child element): 내부에 있는 요소 (*강의에서는 부모 태그, 자식 태그라 수업)

부모/자식 관계가 정해지는 건 필요에 따라서이다. 근데 몇몇 태그들은 실제 부모 자식 관계처럼 상하관계가 고정되어 세트처럼 함께 다니며 사용된다. li과 ul, li와 ol가 그 예시.

  • li 태그 <li>....</li> : 각 항목 만들기
  • ul, ol 태그 <ul>...</ul>, <ol>...</ol> : 목록(항목 묶음들) 구분 위해 분리

ul은 unordered list의 약자, li가 글머리기호 되도록 한다.
ol은 ordered list의 약자, li가 번호매기기 기호 되도록 한다.
(li 태그와 ul/ol 태그는 꼭 함께 쓰여야 한다.)
<ol>

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ol>

 

----

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

웹사이트 구조를 만드는 방법 배우자

  • title 태그: 탭 이름 정하기
    <title>WEB1 - html</title>

이렇게 해주면 탭 이름이 그전에는 내가 저장한 파일명인 '2.html'로 보였는데 'WEB1 - html'로 표시된다

(title 태그는 검색엔진이 웹페이지 분석 시 가장 중요하게 생각하는 태그이므로 쓰지 않으면 큰 손해)

 

+) 영어가 아닌 문자로 웹페이지 만들었을 때 문자 깨짐 해결 방법:
코드쓸 때 UTF-8방식으로 저장했으므로 UTF-8방식으로 열라고 알려줘야함

<meta charset="utf-8"> 써주자

 

이때, 위에서 쓴 두 코드는 웹사이트 본문이 아니고 본문을 설명하는 정보. 구조를 분리해줘야함.

  • head 태그: 내부에 본문을 설명하는 정보 <head>...</head>
  • body 태그: 내부에 본문 <body>...</body>

또
(1) body 태그와 head 태그를 감싸는 하나의 태그

html 태그를 두기로 약속. <html>...</html>

(2) 이 웹페이지가 HTML로 만들어졌다는 것을 표현하기 위해 문서의 시작에 아래와 같은 코드를 추가.

<!doctype html>

 

-구조 완성!-

<!doctype html>

<html>

<head>

<title>WEB1 - html</title>

<meta charset="utf-8">

 ...

</head>

<body>

 ...

</body>

</html>

 

----

[14. 태그의 제왕]

  • a 태그: 링크 건다. <a>...</a> (가장 많이 쓰이는 태그. 닿anchor의 a.)

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

  • href 속성: Hypertext Reference, 이를 사용해 링크 주소를 넣어준다.
  • target 속성: 링크 클릭 시, 새창에서 페이지가 열리게 하는 속성.  target="_blank" 형태.
  • title 속성: 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여준다 (커서 가까이 갖다 댔을 때 설명 뜨는 것)

+) 웹서핑 좋아한다면 공부 좋아하고 잘하고 있는 것!

5일차 : ~웹사이트 완성

[15. 웹사이트 완성]

(1) 우선 웹페이지 전체를 대표하는 페이지를 만들고

(2) 각 부분에 링크를 걸어서 다른 페이지와 연결을 시키자

 

WEB 제목은 Day5_index.html로

1. HTML 목차 항목은 Day5_1.html로

2. CSS 목차 항목은 Day5_2.html로

3. JavaScript 목차 항목은 Day5_3.html로 했다

 

*링크 거는 법?

<h1>WEB</h1>에서 클릭시 index.html로 연결되도록 하려면 a 태그와 href 속성을 사용하자

<h1><a href="index.html">WEB</a></h1>

<a href="">글자</a>

<!doctype html>
<html>
<head>
  <title>WEB1 - html</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="Day5_index.html">WEB</a></h1>
  <ol>
    <li><a href="Day5_1.html">HTML</a></li>
    <li><a href="Day5_2.html">CSS</a></li>
    <li><a href="Day5_3.html">JavaScript</a></li>
  </ol>
  <h2>WEB</h2>
  <p>The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in August 1991.
  </p>
</body>
</html>

6일차 : ~서버와 클라이언트

[16. 원시웹]

필자는 웹의 본질을 최초의 웹사이트에서 찾았다. 인터넷/=웹.

인터넷이 도시라면 웹은 도시 위에 있는 건물 하나.

인터넷이 운영체제라면 웹은 운영체제 위에서 동작하는 하나의 앱.

웹은 인터넷의 부분집합.

 

*인터넷: 1960년 도입. 분산된 형태의 통신시스템

수많은 통신장치들이 각자 일종의 전화국 역할을 하는 상호부조 시스템. 탈중앙 형태.

*웹: 1990년, 유럽 입자물리 연구소 CERN에서 소프트웨어 엔지니어 팀 버너스 리에 의해 개발됨

    1990년 10월 - 웹페이지 편집하는 프로그램 만듬

    1990년 11월 - 세계 최초의 웹브라우저, 월드와이드웹 만듬

    1990년 12월 24일 - 웹서버 완성. 도메인 네임: info.cern.ch

➡ 웹의 탄생으로 인터넷이 대중화의 길을 걷기 시작

 

(생활코딩) 이 최초의 모습의 웹을 원시웹이라 호칭

웹이기 위해 필요한 것을 모두 가지고 있으면서, 그렇지 않은 것은 배제한 순수한 상태.

web1은 이 원시웹을 다루는 수업.

 

----

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

인터넷 동작하려면 최소 2대 컴퓨터가 필요.

2개 프로그램 개발해 컴퓨터 1개씩에 설치: '웹브라우저(클라이언트)'와 '웹서버(서버)'

'웹브라우저'가 설치된 컴퓨터와 '웹서버'가 설치된 컴퓨터는 서로 정보를 주고 받는다.

 

[웹서버 설치된 컴퓨터]

* 컴퓨터에 info.cern.ch라는 '주소'를 부여

* 또 이 컴퓨터의 어떤 디렉토리에 index.html이라는 파일을 저장해놓음

[웹브라우저 설치된 컴퓨터]

* 주소창에 http://info.cern.ch/index.html이라는 주소를 입력하고 엔터 친다

 

➡[웹브라우저 설치된 컴퓨터]는 인터넷을 통해 '나는 index.html 이라는 파일의 코드를 원합니다.' 라는 내용의 전기적인 신호를 [info.cern.ch라는 주소의 컴퓨터]에게 보낸다.

➡➡ [info.cern.ch 컴퓨터]에 설치된 '웹서버'라는 프로그램이 어떤 디렉토리에서 index.html이라는 파일을 찾는다. 파일의 내용을 읽어서 전기적인 신호로 바꾸고 [웹브라우저 설치된 컴퓨터]에 신호를 보낸다.

➡➡➡ [웹브라우저 설치된 컴퓨터]에는 index.html 파일의 내용, 즉 코드가 도착한다. '웹브라우저'는 그 코드를 읽어서 웹페이지를 화면에 출력한다.

 

<정리>

  • 클라이언트 컴퓨터: 웹브라우저(=웹 클라이언트) 설치되어 동작, 정보 요청request보내는 컴퓨터. 고객.
  • 서버 컴퓨터: 웹서버 설치되어 동작, 정보 응답response 하는 컴퓨터. 사업자.

서버와 클라이언트는 인터넷을 이용하는 모든 정보 시스템에 적용되는 문법

(게임을 만든다면) 사용자의 컴퓨터에 설치된 프로그램=게임 클라이언트, 게임회사의 서버 컴퓨터에 설치된 프로그램=게임 서버

(채팅의 경우) 채팅 클라이언트와 채팅 서버

 

지금까지 웹브라우저 제어방법 배움(html사용법이 이것). 이제부터는 웹서버 배울 것

웹서버 사용법

(1) 내 컴퓨터에 직접 웹서버 설치

(2) 웹서버 제공해주는 업체(웹호스팅 업체) 이용

웹호스팅으로 쉽게 목표를 달성한 후에 웹서버를 직접 설치하는 방법 공부해보기

7일차 : ~웹호스팅

[18. 웹호스팅]

(직접 웹서버를 운영하는 일은 쉽지 않은 일. 우선 컴퓨터가 있어야 하고 컴퓨터가 냉장고처럼 항상 켜져 있어야 함.

웹서버라는 프로그램을 배워서 설치해야 하고 또 인터넷을 통해서 외부로 정보를 전송할 수 있게 설정을 해야 하는데 그것들이 쉽지 않음.) 그러니 웹서버 운영을 대행해 주는 회사들을 이용하자.

* 호스팅: 인터넷에 연결된 컴퓨터 하나 하나를 호스트라고 하는데 이런 컴퓨터를 빌려주는 사업

* 웹호스팅 업체: 서버를 전문적으로 빌려주는 비즈니스

 

github(https://github.com)의 pages : 유명한 무료 웹호스팅 서비스. 사용해보자.

  1. github에 파일들을 업로드하고, pages 기능을 활성화하면
  2. github의 서버 컴퓨터에 웹서버가 켜지고 나한테 웹서버의 주소를 알려준다.
  3. 이제 웹서버의 주소를 방문자에게 알려주면 방문자는 github의 컴퓨터에 설치된 웹서버에 접속하게 된다.

*HTML 웹페이지의 정적(static) 특성

- HTML만으로 만든 웹페이지는 웹브라우저가 해석하기 때문에 서버쪽에서 특별히 해 줄 일이 없다.

- 따라서 HTML만으로 만들어진 웹사이트를 호스팅하는 서비스 중에는 무료가 많다.

 

*동적(dynamic)인 웹페이지도 있다.

- php나 python, ruby, java와 같은 기술을 이용하려면 대체로 유료.

- 이런 기술을 활용하기 전까지는 유료 서비스를 이용할 필요가 전혀 없다.

*github pages가 만능이 아니므로, 적합한 웹호스팅을 찾아내는 것이 중요하다.

목적에 맞는 웹호스팅 찾기: "free static web hosting" 구글링

*2017년 기준 생활코딩이 추천하는 웹호스팅 서비스:

https://bitballoon.com, http://neocities.org, Azure Blob, Google Cloud Storage, Amazon S3

8일차 : ~웹서버 운영

[19. 웹서버 운영하기]
내 컴퓨터에 웹서버를 설치해서 다른 컴퓨터에서 웹페이지를 볼 수 있도록 해 보자.
* 웹서버 제품군 예시: Apache IIS Nginx...

Live Server: Visual Studio Code의 익스텐션으로서 실행되는 프로그램.
Live Server는 클라이언트의 요청이 들어왔을 때  Visual Studio Code의 프로젝트 폴더에서 파일을 찾는다.
경로에 파일명이 없으면 index.html 파일을 응답해준다. 
http://127.0.0.1:5500/1.html => 1.html 응답
http://127.0.0.1:5500/ => index.html 응답


Live server는 실시간 편집이 반영된다. 코드를 수정하면 웹페이지를 새로고침 하지 않아도 내용이 변경된다. 웹서버를 끄면 웹사이트가 열리지 않는다.


웹서버를 통해서 웹페이지를 여는 것과, 파일 찾기를 통해서 웹페이지를 여는 것 사이의 차이
(주소 비교)

파일 찾기로 열었을 때 : file///Desktop/web/index.html
ㄴ웹브라우저->웹페이지
웹서버를 통해서 열었을 때 : http://127.0.0.1:5500/index.html
ㄴ웹브라우저->웹서버->웹페이지

(웹서버로 열은 웹페이지 - 주소 자세히 살펴보기)

http://127.0.0.1:5500/index.html

  • http: HyperText Transfer Protocol, 웹페이지를 주고받기 위한 통신규약이라는 뜻.
  • (127.0.0.1) IP Address: 인터넷에서 사용하는 주소를 의미한다. IP: Internet Protocol.
    IP Address는 0.0.0.0부터 255.255.255.255까지의 주소가 존재한다. (약 43억 개) 이렇게 많은 주소 중에서 내 컴퓨터 자신을 가리키는 특별한 주소이다.
  • (5500) Port: 컴퓨터에 여러 개의 서버가 동작하고 있을 때 '서버를 구분하는 정보'이다. 위에서는 주소의 port 번호가 5500이므로, 5500에서 동작하고 있는 Web Server와 통신하게 된다.

'Study > Web' 카테고리의 다른 글

[웹 공부] 생활코딩 WEB2 - CSS 강의 메모 (완강)  (1) 2023.01.31
'Study/Web' Related Articles more