[생활코딩] WEB 1 HTML & Internet 12강 ~ 22강

Namung's Sea·2021년 11월 1일
TILhtml생활코딩
1

생활코딩

목록 보기
3/5
post-thumbnail

12강. 부모 자식과 목록

  • 부모(parent), 자식(child): 태그 간의 관계를 나타내는 표현
<parent>
    <child></child>
</parent>

위 태그는 없는 태그이다. 부모자식 태그를 배우기 위해 임시로 적어 본 태그.

parent 태그에 대해서 child 태그를 자식 태그라고 한다.
child 태그에 대해서 parent 태그를 부모 태그라고 한다.

<p>
    <a href="https://opentutorials.org">opentutorials</a>
</p>

위 태그에서,
p 태그가 a 태그의 부모
a 태그가 p 태그의 자식이다.


위 태그는 서로의 관계가 고정이지 않지만, 부모 자식 태그로 고정된 관계를 가지는 태그가 있다.
지금부턴 그 태그를 알아볼 것이다.

<li> : list의 약자로 목차/목록을 표현할 때 사용
<ul> : 여러개의 목차/목록을 서로 구분할 때 사용

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

위 코드를 h1.html 파일 제일 위에 붙이고 저장한 후 확인해보면 아래와 같이 나타난다.

여기서 위 두 태그와의 관계를 살펴보자.
ul 태그는 li 태그의 부모, li태그는 ul 태그의 자식 역할을 한다.

목록 목차가 수가 엄청 많아지는 경우에 쓰이는 태그에는 뭐가 있을까?
그 태그는 <ul> 대신 사용되며, 바로 아래 태그를 사용한다.

<ol> : 목록이 수백개 수천개일 때 유용한 태그

ul은 unordered list의 약자이고,
ol은 ordered list의 약자이다.

<ol> 태그를 활용한 예는 다음과 같다.

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

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

앞선 수업을 책으로 비유하자면 우리는 현재 문장을 만드는 법을 배웠다.
책은 이런 문장들이 이루어진 페이지가 존재하고 표지가 있고 이것이 하나로 엮이어 책이라는 기능을 해낸다. 이번시간엔 이런 구조에 대해 공부할 것이다.

<title> : 제목을 지정하는 태그 

<title>WEB1 - html</title>

위 코드를 h1.html 파일 제일 위에 넣고 웹 페이지를 확인해보자.
그럼 웹페이지 이름이 WEB1 - html 으로 바뀐 것을 확인할 수 있다.

<title> 태그는 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그이기 때문에
꼭!! 붙여주어야 한다.

UTF-8 : 웹 페이지에 한글 문자가 깨지는 경우 제대로 표시해주기 위해 사용하는 것. 아래와 같이 써서 사용한다.

<meta charset="utf-8">

위의 두 코드는 내용을 작성하는 코드와 다르다. 웹페이지의 정보를 보여주는 코드이다.
이런 코드들과 내용을 표현하는 코드들은 명확히 구분해주어야 한다.
우리는 이걸 다음과 같이 구분하기로 약속하였다.

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

그리고 추가로 아래 코드가 함께 사용된다.
<html> : <head>와 <body>를 감싸는 태그
<!doctype html> : 웹페이지가 HTML로서 만들어졌다는 것을 표현하기 위해서 문서의 시작부분에 넣는 태그

<!doctype html>
<head>
  <title>WEB1 - html</title>
  <meta charset="utf-8">
<html>
</head>
<body>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
  <h1>HTML</h1>
  <p>Hypertext Markup Language (HTML) is the standard markup language for
  <strong>creating <u>web</u> pages</strong> and web applications.
  Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
  <img src="coding.jpg" width="600">
  <p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
  </p>
</body>
</html>

요약하면, html의 구조는 다음과 같다.

<!doctype html>
<html>
<meta charset="utf-8">
<head>
본문 설명
</head>
<body>
본문
</body>
</html>

14강. HTML 태그의 제왕

  • <a> 태그
    : anchor의 약자. 정보의 바다에 닻을 내린다는 시적인 표현을 담는다. 검색엔진에서 가장 중요한 역할을 하는 태그이다.

  • html 공식 사용 설명서 페이지 : https://www.w3.org/TR/html5/

위 페이지를 링크를 거는 법을 찾아보자.
추천 검색어) html link

자 우리는 아래와 같이 사용한다.

<a href="주소" target="_blank" title="툴팁설명내용">링크 할 단어</a>

a : anchor의 약자
href : HyperText Reference의 약자
target="_blank" : 링크를 클릭했을 때 새창에서 페이지가 열리게 하는 속성
title : 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여줌

코드를 작성하고 웹페이지를 열면 아래와 같이 링크가 걸리고 링크에 마우스를 가져다 대면 툴팁을 통한 설명이, 클릭하면 새 탭으로 html 공식 사용 설명서 페이지 창이 열린다.

15강. 웹사이트 완성

웹사이트(web site) : 링크를 통해서 서로 결합되어 있는 웹페이지들의 그룹

만들려는 웹사이트의 구조를 그림으로 그려보면 다음과 같다.

우선 완성된 결과물은 다음과 같다.
https://web-n.github.io/web1_html_internet/

h1.html 파일을 1.html 파일로 파일명을 바꾸자. 본문 내용에서 목차를 누르면 해당 글로 가는 링크를 건다. 그리고 목차에 제목을 붙이고 목차 아래 내용 부분에서는 위키피디아에서 그 내용을 가져온다. 그리고 1.html을 총 3개 복제하자. 그리고 제목을 2.html, 3.html, index.html으로 바꾼다. 이후 각각의 내용을 수정하고 추가로 index.html title은 WEB1 - Welcome으로 바꾼다.

수정된 1.html 파일 코드는 다음과 같다.

<!doctype html>
<head>
  <title>WEB1 - HTML</title>
  <meta charset="utf-8">
<html>
</head>
<body>
  <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>
  <h2>HTML</h1>
  <p><a href="https://www.w3.org/TR/html5/" target="_blank" title= "html5 specification"> Hypertext Markup Language (HTML)</a> is the standard markup language for
  <strong>creating <u>web</u> pages</strong> and web applications.
  Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
  <img src="coding.jpg" width="600">
  <p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
  </p>
</body>
</html>

직접 만들어 보자!
참고할 유튜브 링크는 아래로.
https://www.youtube.com/watch?v=w5S0GACgL3U&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=15

16강. 원시웹

  • 인터넷과 웹의 관계

  • 웹의 고향, 세계 최초의 웹페이지 : http://info.cern.ch

  • 필자가 말하는 원시 웹

    • 처음으로 창조한 웹의 최초의 모습
    • 웹이기 위해서 필요한 것을 모두 가지고 있으면서 그렇지 않은 것은 배제한 순수한 상태
    • WEB1은 바로 이 원시웹을 다루는 수업

  • 이제부터 해야할 것
    : 내가 만든 웹 페이지를 인터넷을 통해서 전세계의 누구나 볼 수 있도록 해야 함!

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

  • 인터넷이 동작하기 위해 필요한 최소 컴퓨터 개수: 2개 (정보를 주고받기 위함)

  • 인터넷을 통해 웹 만들기

    • 인터넷으로 연결된 2개의 컴퓨터 필요함. 그리고 각자의 컴퓨터에 하나는 웹서버, 하나는 웹 브라우저라는 이름을 붙임.
    • 웹 서버가 설치된 컴퓨터에는 info.cern.ch라는 주소를 부여함. 또 이 컴퓨터의 어떤 디렉토리에 index.html이라는 파일을 저장함.
    • 웹 브라우저가 설치된 컴퓨터의 주소창에 http://info.cern.ch/index.html이라는 주소 입력, 엔터를 침
      1. 웹 브라우저가 설치된 컴퓨터는 인터넷을 통해 전기적 신호를 info.cern.ch라는 주소의 컴퓨터에 보냄.
      2. 전기적 신호에 포함된 내용: 나는 index.html 이라는 파일의 코드를 원합니다.
      3. info.cern.ch에 설치된 웹서버라는 프로그램이 어떤 디렉토리에서 index.html이라는 파일을 찾음. 그리고 그 내용을 읽어서 전기적인 신호를 바꾼 후에 웹브라우저가 설치된 컴퓨터에 신호를 보냄.
      4. 웹브라우저가 설치된 컴퓨터에 index.html 파일의 내용 즉 코드가 도착함. 웹브라우저는 그 코드를 읽어서 웹페이지를 화면에 출력함.

  • 요청하는 컴퓨터: 클라이언트 컴퓨터, 웹 브라우저 = 웹 클라이언트
    응답하는 컴퓨터: 서버 컴퓨터, 웹 서버

    • ex) 게임이 있으면, 사용자의 컴퓨터에 설치된 프로그램: 게임 클라이언트
      게임회사의 서버 컴퓨터에 설치된 프로그램: 게임 서버

  • 웹서버에 익숙해지면 내가 만든 컨텐츠를 인터넷을 사용할 수 있는 전 세계의 누구나 사용하도록 있도록 할 수 있음.

    • 웹 서버를 이용하는 2가지 방법.
      1. 내 컴퓨터에 직접 웹서버 설치하는 것. -> 어렵지만 많은 것을 알 수 있음.
      2. 웹서버를 제공하는 업체(웹 호스팅 업체) 이용하는 것. -> 쉽지만 많은 것이 감춰짐.
    • 필자가 권유하는 방법: 웹 호스팅으로 쉽게 목표를 달성한 후, 웹 서버를 직접 설치하며 배우는 것.

18강. 웹호스팅 (github pages)

  • 직접 웹 서버 운영하는 것 쉽지 않음. 컴퓨터가 냉장고처럼 항상 켜져 있어야 하고 웹서버라는 프로그램을 배워서 설치해야 함. 또 인터넷을 통해서 외부로 정보를 전송할 수 있게 설정을 해야 함.

  • 이런 일을 해주는 업체: 웹 호스팅 업체

    • 호스트: 인터넷에 연결된 컴퓨터 하나하나를 의미함.
    • 웹서버를 전문적으로 빌려주는 비즈니스.

  • 수많은 호스팅 업체 중 우리는 무료이며 유명한 github(https://github.com)의 pages 기능을 사용할 것.

    • 따라해보기
      1. 회원가입(sign up) 후 로그인(sign in)
      2. 저장소(repository) 생성하기 : new repository 버튼 클릭하기
      3. Repository name: 프로젝트의 이름 적기. ex) web1
      4. public(공개), private(비공개)는 저장소의 공개여부를 정하는 것.
        public으로 해 주세요. (누구나 여러분의 소스코드를 볼 수 있습니다)
      5. Initialize this repository with a README의 체크박스를 꼭 체크해 주세요.
        (Add a README file 체크박스 체크!)
      6. 저장소 생성하기(Create repository) 버튼을 누르기.
      7. Add file > Upload files 클릭.
      8. choose your files(파일을 선택하세요)을 누르고 프로젝트 폴더에 있는 파일을 다중선택함.
      9. Commit changes : 변경된 내용을 적음. 버전변경 같은 것! ex) first version
        10.Commit changes 버튼을 누르기.
      10. Settings 클릭
      11. 마우스 스크롤을 쭉 내리면 Github Pages 항목이 나옴. Check it out here!을 누르고 Source - Select branch 중 main을 선택한 후 옆에 폴더를 클릭해 Select folder 중 /docs를 클릭한 후 Save 버튼 누름.
      12. 아래와 같이 창 뜨는지 확인하고 링크 클릭함.
      13. 다음과 같이 우리가 작성한 창이 뜨는 걸 확인할 수 있음.
    • 정리
      • github에 파일들을 업로드하고, pages 기능을 활성화하면 github의 서버 컴퓨터에 웹서버가 켜짐. 그리고 우리에게 웹서버의 주소를 알려줌. 이제 웹서버의 주소를 방문자에게 알려주면 방문자는 나의 컴퓨터가 아닌 github의 컴퓨터에 설치된 웹서버에 접속하게 됨.

  • 우리는 HTML만으로 웹페이지를 만들었음. HTML은 웹브라우저가 해석하기 때문에 서버쪽에서 특별히 해 줄 일이 없음 -> 이런 특성을 정적(static)이라고 합니다.
    동적(dynamic)인 것: 나중에 배울 php나 python, ruby, java와 같은 것들.

  • 검색어) free static web hosting -> 우리에게 알맞는 무료 웹 호스팅 업체를 찾을 수 있음.
    추천 사이트
    https://bitballoon.com
    http://neocities.org
    Azure Blob
    Google Cloud Storage
    Amazon S3

  • 위 사이트는 미래에 없어질 수 있기 때문에 스스로 찾아내는 능력 기르기!

19.1.1강. 웹서버 운영하기

내 컴퓨터에 직접 웹서버를 설치해보자!

  • 문제를 해결해야할 때 우리가 명심해야 할 것.
    • 우리가 하나의 문제를 해결하는데 며칠이 걸릴 수도 있음.
    • 하지만 우리는 하나의 문제만 해결한 것이 아니라, 그 과정에서 수많은 지식과 경험을 얻게 됨!

  • 웹 서버의 유명한 제품: Apache, IIS, Nginx -> 우리는 오픈소스이고 무료인 아파치 사용할 것!

  • 운영체제에 따라 알맞은 서버 설치하기

    • 검색어: how to install apache http server (운영체제 이름)

내 계획 : 우선 익숙한 윈도우로 시행해 본 다음, 리눅스로 한 번 더 해보기!

웹서버 설치(윈도우)

아파치를 윈도위에 직접 설치하는 일은 꽤나 까다로운 일임. 쉽게 설치하기 위해 다음과 같이 검색해보자.

검색어) how to easy install apache on window

다양한 방법 중 우리는 Bitnami WAMP Stack을 사용할 것!
WAMP의 풀네임: Window Apache MySQL PHP -> 우리는 이 중 아파치를 사용할 것!

  1. https://bitnami.com/stack/wamp/installer -> 여기 들어가서 최신 버전 다운로드 후 설치하기

  2. 설치 후 비트나미 매니저라는 프로그램이 시행됨. 이 프로그램을 이용해 웹서버 제어할 것.

  3. Go to Application 버튼 누름. 아래와 같은 페이지가 나오면 비트나미를 이용해 성공적으로 웹서버를 설치한 것!

  4. 비트나미 매니저를 쓰면 매니저를 통해 웹서버를 껐다 켰다 할 수 있음.
    비트나미 매니저 프로그램 > Manage Server > Apache Web Server
    stop 누르고 3번의 웹페이지를 새로고침하면 연결이 안 됨.
    start 누르고 3번의 웹페이지를 새로고침하면 연결이 됨.

19.1.2강. 웹서버와 http

  • 비트나미 매니저에서 go application을 눌렀을 때 나오는 웹페이지 주소: http://localhost/
    이 주소를 다음과 같이 바꿔보자: http://127.0.0.1/index.html
    주소를 바꿨음에도 똑같은 페이지가 우리 앞에 나타나는 걸 확인할 수 있다.

  • index.html은 내 컴퓨터의 index.html 파일을 읽었다는 걸 뜻하는데 이 파일을 어디서 찾을 수 있을까?

    • Bitnami wampstack이 설치된 디렉토리 > apache2 > htdocs(hypertext documents) → index.html
    • 이 파일이 맞는지 확인하기 위해 메모장으로 열어서 <body> 아래에 WEB1이라고 적어보고 웹페이지를 새로고침 해보자. 웹 페이지 제일 위에 WEB1이라고 적혀있는 걸 확인할 수 있다.

  • localhost라는 도메인 이름: 내컴퓨터를 의미하는 특수한 주소임.

  • 120.0.0.1 -> IP(Internet Protocol) address

    • 웹브라우저가 설치되어 있는 각자의 컴퓨터의 웹서버를 가리킴.

  • 127.0.0.1/index.html

    • 웹 브라우저가 자신의 컴퓨터에 설치되어 있는 웹서버에 접속해 index.html 파일을 원한다! 고 알리는 것.
    • 그러면 웹 서버는 htdocs 폴더에서 index.html을 찾음(default 설정임).
    • 웹 서버가 찾은 걸 웹 브라우저에 전송해주면 웹 브라우저는 전송 받은 걸 화면에 표시해줌.

  • 이제 htdocs에 있는 파일 내용을 과감히 삭제하고 우리가 여태까지 만들었던 파일로 다 덮어쓰자. 그럼 htdocs폴더에 파일이 이렇게 남아있을 것이다.

  • 이제 웹페이지를 새로고침 해보자! 내가 직접 만들었던 페이지가 뜨는 걸 확인할 수 있다.

  • 주소창이 file://로 시작되면 웹브라우저는 내 컴퓨터에 있는 html 파일 직접 열어서 보여주는 것.
    주소창이 http://로 시작하면 웹브라우저는 http(hyper text transfer protocol) 통신규약에 따라서 웹서버에 접속하게 되는 것.

  • 내 컴퓨터에 있는 파일을 웹서버를 통해서 가져오는 것은 실제로는 의미 없음.
    다른 컴퓨터에 있는 웹페이지를 http를 이용해서 열람하는 것이 웹서버의 진짜 기능을 활용하는 것임.

19.1.3강. 웹브라우저와 웹서버의 통신

  • 웹 서버가 있는 컴퓨터의 IP 주소를 알아야 웹 브라우저가 해당 컴퓨터 안에 있는 파일을 요청하여 내용을 확인할 수 있음. 그런 다음 우리가 이제 할 일은 IP 주소를 확인해 이 주소로 웹 브라우저가 웹서버에게 request하여 response하는 과정을 관찰하는 것.

IP 주소 확인하기

  1. 작업표시줄 창에 네트워크 아이콘 우클릭 > 네트워크 및 인터넷 설정창 열기 클릭

  2. 이더넷 클릭 > 이더넷 이름 클릭(내 경우엔 401 클릭).

  3. 스크롤을 조금 내리면 IPv4 주소가 나옴. 이게 내 IP 주소임.

  • 웹브라우저와 웹서버의 통신을 알아보기에 앞서 아래 두 주소를 비교해 보자.

    127.0.0.1
    192.168.0.13

    둘 다 내 컴퓨터를 가리킴.
    하지만 전자(127.0.0.1)는 자기 자신을 의미하는 일종의 대명사 같은 것이고,
    후자(192.168.0.13)는 저 주소에 해당하는 컴퓨터를 가리키는 고유 명사임.

다른 컴퓨터의 웹 브라우저로 내 컴퓨터에 설치된 웹서버에 통신하기

  • 컴퓨터 2대가 있으면 됨. 컴퓨터 하나는 웹 서버가 설치된 것, 나머지는 스마트폰.
  • 컴퓨터 2대는 서로 같은 네트워크에 연결되어 있어야함. 즉 같은 와이파이에 접속해 있어야함.
  • 이제 스마트폰 웹 브라우저에 내 아이피 주소를 입력해보자. 어떤 결과가 나오는가?









    짜잔! 내가 직접 만들 웹 페이지가 모바일 웹 창에 뜨는 것을 확인할 수 있다.

아쉽게도 WEB1은 도메인 이름을 사용해서 접속하는 방법, 같은 네트워크에 있지 않은 사람들도
웹서버에 접속하게 하는 방법 같은 부분은 다루지 않았다. 해당 부분은 추후 학습을 통해 배우게 된다.

수업 내용 요약

우리는 지금까지 인터넷이 동작하는 기본 원리에 대해 공부함.

  • 서버와 클라이언트가 무엇인지
  • IP 주소가 무엇인지
  • 어떻게 내 컴퓨터의 IP 주소를 알아내는지
  • 두 대의 컴퓨터가 서로 통신하는 방법

우리는 지금 인터넷을 지배하는 가장 중요한 토대를 닦았다.
시간과 경험이 쌓이며 인터넷에 대한 지식은 자연스럽게 성장하기 시작할 것이다.

✅ 추가 공부! 웹서버 운영: 리눅스

생활코딩 - 웹서버 운영: 리눅스

리눅스 배포반 우분투를 기준으로 공부함.
아파치 설치전 추천 검색어: apache install ubuntu

이제 아파치를 설치하자.
리눅스 터미널 창을 열고,
$ sudo apt-get update
$ sudo apt-get install apache2

이제 IP 주소를 알아내자.
$ hostname -I

이제 웹 브라우저를 열고 http://10.0.2.15/index.html 을 검색하면 아래의 화면이 뜨는 것을 볼 수 있다.

위 사진에서 위쪽에 굵은 글씨로 'replace this file'이라고 적혀있는 것을 볼 수 있는데, 그 옆에 주소가 index.html 파일이 있는 주소이다. 이 파일을 수정해보자.

터미널 창을 열고 입력해보자.
$ cd /var/www/html
$ ls -al -> 현재 디렉토리의 파일 목록을 확인하는 명령어

index.html 파일이 존재한다. 그럼 이 파일이 웹 브라우저에 표시된 파일과 같은 것인지 확인하기 위해 파일명을 바꿔보자

$ sudo mv index.html index2.html

이제 웹 브라우저를 새로고침했을 때 페이지가 로드되지 않으면 같은 파일이 맞다는 게 설명 됨.
이제 새로고침을 해보자.

파일명이 바뀌어 리로드가 되지 않는 걸 확인함.

주소를 index2.html로 수정해서 새로고침하면 정상적으로 웹 페이지가 잘 뜨는 것을 볼 수 있음.

이제 우리가 작성한 프로젝트를 웹 화면에 띄워보자.
나는 깃허브에 내가 올려놓은 파일을 zip 파일로 받은 후 그 파일을 풀고, 해당 폴더에 들어가 모든 파일을 복사하여 /var/www/html 로 붙여넣었다.

$ unzip web1-main.zip
$ cd web1-main
$ sudo cp * /var/www/html

이제 웹 브라우저에서 http://10.0.2.15/index.html로 접속해보자.

접속 성공!

20~22강. 수업을 마치며

이제 무엇을 공부해야할까?

CSS

  • 웹사이트를 아름답게 하고 싶다면 CSS!
  • CSS : HTML이 태어난지 약 4년 후에 만들어지기 시작함.
    이 기술이 나타난 후에 웹 퍼블리셔, 웹 디자이너와 같은 직업이 발전하기 시작함.
    CSS를 공부하고 싶은 분은 WEB2 CSS 공부하기.

JavaScript

  • 사용자와 상호작용하는 웹페이지를 만들고 싶다면 JavaScript!
  • JavaScript : HTML이 태어난지 약 5년 후에 만들어짐.
    이 기술이 나타난 후에 웹 프론트 앤드 엔지니어, 웹 인터렉티브 디자이너와 같은 직업이
    발전하기 시작함.
    JavScript가 공부하고 싶다면 WEB2 JavaScript를 공부하기.

Back-end

  • 백엔드 기술을 이용하면 파일 하나를 변경하면 1억 개의 웹페이지가 한번에 변경됨.
  • PHP, JSP, Nodejs, Express, Python, Django, Ruby on Rails, ASP.net 등의 기술이 여기에 쓰임. 이 기술들은 서로 경쟁관계에 있고, 이 중에 하나를 공부하시면 됨.
    하나를 공부하면 나머지를 공부하는 게 어렵지 않음.
    이 기술을 위해서 종사하는 엔지니어들을 백엔드 엔지니어라고도 부름.

부록: 코드의 힘

1. 동영상 삽입하기 : <iframe>

유튜브 영상의 공유하기 > 퍼가기 > <iframe> 코드 가져오기!

코드 삽입 후 페이지를 열어서 확인하면,

동영상 생긴 것 확인 가능!

2. 댓글 기능 추가하기

댓글 기능을 스스로 만드는 데에는 많은 시간이 필요함.
우선 지금은 이미 만들어진 무료 서비스를 이용해보자.
Disqus, LiveRe가 유명한데 우선 Disqus를 사용해 볼 것.

  1. 회원 가입 후 로그인
  2. get started 클릭
  3. I want to install Disqus on my site 클릭
  4. Category는 적당히 아무꺼나 선택! 나는 Tech.
  5. Language에 한글이 없으므로 영어 클릭.
  6. create 클릭
  7. 무료인 Basic을 선택하자. Subscribe Now 클릭
  8. 그 다음은 사용하는 플랫폼을 선택하는 페이지가 나온다. 난 없으니 아래 universal code 클릭.
  9. 그 다음 뜨는 페이지의 스크롤을 조금 내리면 코드가 뜬다. 코드를 복사하자.
  10. 우리가 만든 html 파일의 아래부분에 위 코드를 붙여넣어 추가해주자.
  11. 그다음 웹 페이지를 리로드하자. 웹 페이지 주소가 file://로 시작하면
    We were unable to load Disqus. If you are a moderator please see our troubleshooting guide. 이와 같은 에러메세지가 뜬다.
    주소를 127.0.0.1/index.html로 바꿔주자.

    채팅 구현 완료!
    다른 곳에도 위 코드를 넣으면 채팅을 이용할 수 있다.

3. 채팅 기능 추가하기

우린 tawk 라는 무료 채팅 서비스를 이용해볼 것.
1. 회원가입 후 로그인
2. 채팅 생성을 위한 name, site 주소, 위젯 이름 설정.
3. 다음으로 넘어가면 아래와 같은 창이 뜨는데 Widget Code를 복사해서 index.html 마지막 부분에 넣어주면 된다.
4. 위 사진의 아이콘을 클릭하여 hi라고 채팅을 쳐보자. 그럼 tawk 사이트에서 알람이 울리면서 새로운 메세지가 떴다는 것을 알려줄 것이다. 그렇게 우리는 채팅 기능을 사용할 수 있다.

4. 방문자 분석하기

웹페이지를 분석해보자!

우리는 어떤 경로를 통해 이 사이트에 도착했는지, 어떤 환경에서 이 사이트를 탐색하는지를 알아볼 것이다. goolgle ananlytics를 이용해 체험해보자.

우선 로그인을 하고 애널리틱스 계정을 만들자.

  1. 계정이름 설정 > 다음
  2. 속성 설정 > 속성 이름 설정 (나는 web1으로 하였다) > 시간대에 맞는 국가 설정 > 통화 설정
  3. 비즈니스 정보 설정 (상황에 알맞게 설정하면 됨)
  4. 만들기 클릭 > 약관 동의

위 과정을 시행했다면 아래와 같은 페이지가 나온다.

  1. 이제 웹을 클릭하고 우리가 사용할 웹 사이트 URL 부분에 웹 페이지의 주소를 적자.

    난 변경된 파일 내용을 모두 github에 저장하여 github 서버를 통해 주소를 가져오겠다.

  2. 스트림 만들기 클릭

  3. 태그 설정에 대한 안내 > 새로운 온페이지 태그 추가 > 코드가 나오는데 해당 코드 복사
    복사한 코드를 <head> 안에 추가함.

  4. 이제 보고서를 검색하면 실시간으로 새로운 변화를 탐색할 수 있음!

profile
Namung's Sea
개발자로 시작| 공부한 것을 기록합니다.
이전 포스트

[생활코딩] WEB 1 HTML & Internet 06강 ~ 11강

0개의 댓글