경일게임아카데미 멀티 디바이스 메타버스 플랫폼 개발자 양성과정 20220909 ~ 12 개인 공부 2022/04/04~2022/12/14

Jinho Lee·2022년 9월 9일
수업일기
0

수업 일기 - 경일게임아카데미 멀티디바이스 메타버스 플랫폼 개발자 양성과정

목록 보기
86/112

2022.09.09 ~ 12 개인 공부 생활 코딩 - WEB - HTML & Internet

자료

WEB1 - HTML

  • 웹페이지를 만드는 코드, 컴퓨터 언어

  • Hypertext Markup Language (HTML)

  • 장점

    1. 쉽다.
      문법을 다 배우는 데 10분도 걸리지 않으리라 예상

    2. 중요하다.
      하루에 가장 자주 사용하는, 정보를 담는 그릇인 웹페이지를 다루는 언어

    3. Public Domain
      완전한 자유를 의미. 저작권이 없다.

  • HTML 파일 열기

    • 웹 브라우저에서 Ctrl + O

      → 텍스트 에디터로 만든 html 파일을 고르고 열기

      → 수정이 있을 때마다 저장하면 바로 반영

기본 문법 - 태그 (Tag)

  • 어떤 방식으로 표시할지 설명한다.
    정보를 알려준다.

  • 예시

creating web pages
 -> creating web pages

<strong>creating web pages</strong>
 -> **creating web pages**

<strong>creating <u>web</u> pages</strong>
 -> **creating web pages**

  • 위 예시에서 문장 혹은 단어를 감싸는
    <>와 수식어가 태그(TAG)이다.

    • 여는 태그는 <> 속에 단어만

    • 닫는 태그는 <> 속 단어 앞에 / (슬래시)를 붙인다.

어려운 것과 중요한 것, 쉬운 것과 중요하지 않은 것은 동치가 아니다.

통계 기반 학습

  • HTML에는 태그가 약 150개 이상 존재

  • 추가 통계 자료 :
    https://www.advancedwebranking.com/seo/html-study/

  • 빈도수가 높은 것을 우선 익혀, 기본을 익히는 것이 중요

    • 통계를 기반으로 방향을 정하자

  • 기본의 조합과 합성, 응용에서 어려운 것이 가능한 것

태그 리스트

  1. <strong>

    • 굵은 글씨로 강조

  2. <u>

    • 밑줄로 강조

  3. <h1> ~ <h6>

    • HTML 헤딩 설정.

      • 헤딩이란, 제목에 적절한 크기, 굵기의 설정으로, h 뒤 숫자가 작을수록 크기가 크고 숫자가 클수록 작다. 1부터 6까지만 있다.

  4. <br>

    • 줄바꿈.

    • 닫는 태그가 없다.

      • 감싸야하는 컨텐츠가 없기 때문.

    • 원하는 만큼 간격을 줄 수 있다.

  5. <p>

    • 단락 그룹핑.

      • 하나의 단락을 감싸 구분되는 단락을 표현한다.

    • 단락 간의 간격이 고정되어 있다.

      • 단, CSS를 통해 단락의 디자인을 자유롭게 변경할 수 있다.

      • CSS : 웹페이지 정보의 디자인을 꾸며준다.

    • → 단락을 나눠 문서로써 더 의미있고 CSS로 디자인의 단점도 극복할 수 있기에 br 태그보다 p 태그가 더 좋다

  6. <img>

    • 이미지를 올릴 때 사용.

    • 속성 src을 사용해 어떤 이미지를 올릴지 추가적인 정보를 제공해야 한다.

  7. <li>

    • 목록을 만들 때 사용.

    • 어느 범위가 서로 연관된 항목인지를 경계짓기 위해 <ul>나 <ol>태그를 부모로 갖는다.

      • <ul> :
        <li>태그의 부모 태그.
        Unordered List

      • <ol> :
        <li>태그의 부모 태그. 자동으로 리스트업(번호가 붙는다).
        Ordered List

    • 예시

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

  8. <table>

    • 표를 만들 때 사용.

    • <tr> :
      표의 행 영역을 표시

    • <td> :
      표의 칸을 표시

    • 예시

    <table>
	<tr>
		<td>head</td>
		<td>98.1%</td>
	</tr>
	<tr>
		<td>body</td>
		<td>97.9%</td>
	</tr>
	<tr>
		<td>html</td>
		<td>97.9%</td>
	</tr>
</table>
    head98.1%
    body97.9%
    html97.9%

  9. <title>

    • 제목을 지정할 때 사용.

    • 웹브라우저의 탭이나 창 제목으로 위 태그로 지정한 제목이 표시됨을 알 수 있다.

  10. <meta>

    • 어떤 유니코드로 인코딩할지 지정.

    • 속성으로 유니코드를 정한다.

    • 예시

      <meta charset="utf-8"> // UTF-8로 페이지의 문자를 인코딩한다.

  11. <head>

    • 문서의 서문을 묶는다.

      • 서문 : 본문을 설명하는 내용

  12. <body>

    • 문서의 본문을 묶는다.

  13. <html>

    • 웹 문서의 HTML 코드 전체를 묶는다.

    • 태그의 위에 관용적으로 <!doctype html>를 붙인다.

      • ‘이 문서는 HTML로 작성된 문서이다’라는 의미

  14. <a>

    • 링크를 넣는다.

      • a는 anchor의 첫 글자로, ‘정보의 바다에 정박한다’는 의미이다.

      • href 속성에 링크 주소를 넣어 완성한다.

        • href는 Hyper Reference의 약자이다.

      • target 속성에 “_blank” 값을 주면 링크된 페이지가 새 창에서 열리게 할 수 있다.

      • title 속성은 주어진 값(해당 링크의 설명)을 툴팁 형태로 보여준다.

    • 예시

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

  15. <input>

    • 입력 요소를 추가한다.

    • type 속성

      1. text : 텍스트 입력 창 생성

      2. password : 비밀번호 입력 창 생성

      3. button : 버튼 생성

      4. radio : 라디오 버튼 생성

      5. checkbox : 체크박스 생성

      6. file : 파일 이름 입력 창 생성

      7. image : 이미지를 전송 버튼으로 전환

      8. hidden : 사용자에게는 보이지 않지만 서버로 전송

      9. submit : 서버로 제출 / 전송하는 버튼 생성

      10. pattern : 허용하는 입력의 형태를 정규식으로 지정

      11. required : 입력 양식이 제출 전에 반드시 채워져야하도록 표현

      12. readonly : 읽기 전용 필드

      13. placeholder : 입력 힌트를 희미하게 보여 줌

      14. autofocus : 페이지 로드 시 자동으로 입력 포커스를 갖춘다

      15. autocomplete : 자동 입력 완성

    • value 속성

    • name 속성

HTML이 중요한 이유

1. 직관적인 코드

  • 코드 상에서 그 코드의 뜻을 직관적으로 전달한다.

    • 검색 엔진

2. 접근성

  • 접근성 (Accessibility) :
    누구나 차별없이 정보에 접근할 수 있어야 한다

    • 모든 운영체제에서 동작하고 누구나 볼 수 있고 저작권 없는 공공재이다.

    • 신체적 장애가 있는 사람도 웹을 통해서 정보에 접근할 수 있어야 한다.

      • 스크린리더(Screen Reader)
        → HTML을 사용, 의미를 전달

속성 (Attribute)

  • 태그에 추가로 정보를 주는 문법.

  • 위치는 상관 없다.

  • 태그가 태그의 이름만으로는 정보가 부족할 때 이용해 더 많은 의미를 부가할 수 있다.

  • 예시

    <img src="strange-tiger.jpg" width="100%">

부모 자식 태그와 목록

  • 몇몇 태그들은 부모 자식 관계처럼 관계가 고정되어 있다.

  • <li>태그의 부모 태그 <ul>, <ol>

    • <li>로 만든 목록이 어디까지 연관된 항목인지를 표현하기 위해 <ul> 태그를 붙인다.

    • <li>로 만든 목록을 그룹핑하고 또한 항목에 번호를 붙이기 위해 <ol> 태그를 붙인다.

  • 테이블 태그

    • <table>의 자식으로 <tr>, <tr>의 자식으로 <td>가 온다.

문서의 구조

  • 웹문서의 구조는 다음과 같다고 할 수 있다.

    • <html>

      • <head>

        • <title>

        • <meta>

      • <body>

  1. 웹 문서 전체를 <html> 태그로 묶어야 한다.

    • <html> 태그 위에 관용적으로 <!doctype html> 태그를 붙인다.

      • ‘이 문서는 HTML로 작성된 문서이다’라는 의미이다.

  2. 문서의 서문

    • <head> 태그를 사용해 웹페이지 내용의 서문을 묶기로 약속하였다.

    • 서문은 본문을 설명하는 내용이다.

    2-1. 문서의 제목

    • **<title>** 태그를 사용하면 웹페이지의 제목을 정하여 표시할 수 있다.

    2-2. 인코딩

    • 어떤 유니코드로 인코딩할지 <meta> 태그로 정할 수 있다.

  3. 문서의 본문

    • <body> 태그를 사용해 웹페이지 내용의 본문을 묶기로 약속하였다.

링크

  • 링크 (Link) / 하이퍼텍스트 (HyperText)

    • 페이지와 페이지를 연결하는 길

  • 이 태그가 없었다면 웹의 정보와 정보는 연결되지 않았으며, 검색엔진 또한 존재하지 않았을 것이다.

  • 링크를 넣고 싶은 부분을 <a>로 감싸 하이퍼 링크를 만든다.

    • a는 anchor의 첫 글자로, ‘정보의 바다에 정박한다’는 의미이다.

  • href 속성에 링크 주소를 넣어 완성한다.

    • href는 Hyper Reference의 약자이다.

  • target 속성에 “_blank” 값을 주면 링크된 페이지가 새 창에서 열리게 할 수 있다.

  • title 속성은 주어진 값(해당 링크의 설명)을 툴팁 형태로 보여준다.

웹사이트 완성

WEB1 - Internet

원시웹

  • Internet과 WEB은 다르다

    • Internet은 WEB을 서비스하는 한 종류

      • Internet의 시작 - 1960년대 군용 통신

      • WEB의 시작 - 1990년대

        • WEB의 고향 - 스위스, CERN
          → 강입자가속시 LHC를 다루기 위해

        • 팀 버너스-리 (Tim Berners-Lee) - Enquire 프로그램
          → WEB의 전신 중 하나

          1. 1990년 CERN 인터넷 도입

          2. 1990년 10월 세계 최초 웹페이지 편집기 개발

          3. 1990년 11월 세계 최초의 웹 브라우저인
            1.월드 와이드 웹 (WWW) 개발

          4. 1990년 12월 24일 웹 서버라는 프로그램을 만들고 info.cern.ch라는 주소를 부여
            → 이 날은 팀 버너스 리의 첫 아이 출산 예정일이었다고

        • 이상이 원시웹의 개발이다.

인터넷 : 서버와 클라이언트

  • 인터넷이 동작하기 위해 필요한 최소 컴퓨터 수
    → 2대

  • WEB을 운영하는 두 개의 프로그램

    • Web Server

      • 주소를 갖고 (ex. info.cern.ch)

      • 하드 드라이브가 있어 HTML 파일 등을 갖고 있는다.
        (ex. index.html)

    • Web Browser

      • 입력창에 규칙에 맞게 주소를 입력한다.
        (ex. http://info.cern.ch/index.html)

    • 웹 브라우저에서 웹 서버로 신호를 보내 파일을 요청하고,

    • 웹 서버는 파일을 찾아 웹 브라우저로 내용을 보낸다.(응답한다)

    • 여기서 웹 브라우저 혹은 컴퓨터는 요청하는 고객이다하여
      → 클라이언트 (Client)

    • 웹 서버 혹은 컴퓨터는 응답하는 사업자다 하여
      → 서버 (Server)

  • 웹서버를 사용하는 방법

    1. 직접 웹서버를 설치
      → 어렵지만
      → 많은 것을 알 수 있다

    2. 웹서버를 제공하는 웹호스팅 업체 사용
      → 쉽지만
      → 많은 것이 감춰져 있다

웹호스팅 github pages

  • 웹서버 운영은

    1. 항상 컴퓨터가 켜져 있고

    2. 웹서버라는 프로그램을 배워서 설치해야 하고

    3. 인터넷을 통해 외부로 정보를 전송할 수 있게 설정해야하

  • 하기에 쉽지 않다.
    → github에서 제공하는 웹호스팅 서비스 이용

  • 구체적인 내용은 이 곳 참고

  • 결과

웹서버 운영

  • 웹서버 제품

    • Apache

    • IIS

    • Nginx

    • 등등

    • 이번에 사용할 소프트웨어
      ⇒ Web Server for Chrome

      • 크롬의 확장 기능으로서 설치되는 프로그램

      • 설치 후 운영체제에서 Web Server for Chrome을 검색하거나, 주소창에 chrome://apps 을 입력해서 앱을 찾아서 실행

  • 이후 자세한 내용은 이 곳 참고

  • 결과1

  • 결과2

    • 위 두 결과는 컴퓨터 키고 웹서버 켰을 때 사용 가능

웹서버를 통한 VS 파일 찾기를 통한 ‘웹페이지 열기’ 차이

  • 주소

    • 파일 찾기로 열었을 때 :
      file///Desktop/web/index.html

    • 웹서버를 통해서 열었을 때 : http://127.0.0.1:8887/index.html

    • 웹 주소의 의미

      • http (Hyper Text Transfer Protocol):
        웹페이지를 주고받기 위한 통신 규약

      • Internet Protocol Address :
        인터넷에서 상용하는 주소,
        IP 주소

        • 127.0.0.1 :
          현재 컴퓨터 자신을 가리키는 IP 주소

      • Port :
        통신 포트 - TCP 포트

수업을 마치며

  • 교양 ↔ 직업 == 본질 ↔ 혁신

  • 교양일수록 본질을 배우고 더 빨리 는다

    • 저 위를 보지 말고 늘고 있는 속도를 보자

  • 직업일수록 혁신을 해야하고 천천히 는다

    • 늘고 있는 속도를 보지 말고 현재 위치를 보자

  • 눈에 보이는 복잡함, 보이지 않는 복잡함

    • 체크박스를 넣을 때 필요한 테스트의 횟수
      → 2의 (체크박스 갯수) 승

    • 숨어있는 복잡함으로 인해 나오는 수많은 버그들

  • 공부가 늘어간다 == 체크박스가 늘어간다

    • 자신의 탓을 하지 말자

    • 불만족을 공부 내용을 활용하여 해결하자
      ⇒ 한계를 만나면, 불만족을 확인하면
      진도를 나갈 타이밍이다.

  • 절망감이 성숙해야 공부할 수 있다

  • 웹사이트를 더욱 아릅답게 하기 위해 ⇒ CSS

    • 관련 직업

      • Web Publisher

      • Web Designer

  • 사용자와 상호작용하는 웹사이트 ⇒ JavaScript

    • 관련 직업

      • Web Front End Engineer

      • Web Interactive Designer

  • 많은 웹페이지를 동시에 다루는 등, 생산성이 필요한 작업
    ⇒ Back End

    • 관련 기술 : PHP, JSP, Node.js의 Express, Python의 Django, Ruby의 Ruby on Rails, ASP.NET

    • 관련 직업

      • Web Back End Engineer

  • 웹페이지에 광고 달기 ⇒ WEB2 - Advertisement 수업

  • WEB2 수업은 모두 WEB1 내용을 기반으로 한다.

  • 알고 있는 것을 공고히 하는 두 가지 방법

    1. 알고 있는 지식을 이용해 프로젝트를 하는 것

    2. 알고 있는 지식을 컨텐츠로 만들어 누군가에게 알려주는 것

    • 자신이 무엇을 알고 있는지를 자신과 타인에게 확인시켜주는 중요한 방법

부록 : 코드의 힘

  • HTML을 이용해 코드로 할 수 있는 일, ‘코드의 힘’을 느껴보는 수업

동영상 삽입

  • 동영상 서비스(유튜브 등)의 동영상을 웹사이트에 포함시키는 방법

  • 자료 : https://opentutorials.org/course/3084/18453 /
    https://youtu.be/7T7r_oSp0SE

  • 유튜브 공유(Share)에서 퍼가기(Embed)를 클릭 → 나오는 HTML 코드를 카피, 추가.

  • HTML 코드의 역할 - 다양한 부품을 합성, 새로운 제품을 제공

    • <h1> 태그 같은 작고 값싼 부품부터 동영상 같은 크고 비싼 부품까지

댓글 기능 추가

  • 자료 : https://opentutorials.org/course/3084/18594 /
    https://youtu.be/LVLHprUg-PM

  • 방문자와의 교류 수단 - 댓글

    • 직접 구현은 HTML로는 불가능, 백엔드 기술과 데이터 베이스를 알아야 한다

    • 스팸 처리 - 수정 및 삭제 → 기계가 판단하는 스팸 차단 기능

    • 이미지 처리 기능, 다른 사이트와의 연동 등

    • 위와 같이 필요한 기능이 매우 많기에 힘들다

  • 남들이 만든 댓글 기능을 웹사이트에 포함시키면 직접 구현하지 않아도 가능

  • DISQUS 서비스

    • LiveRe 서비스도 추천

    • 서비스는 웹서버를 통하여야 사용할 수 있다.
      도메인이 있어야 한다.

채팅 기능 추가

방문자 분석기

  • 자료 : https://opentutorials.org/course/3084/18899 /
    https://youtu.be/K3cYoZ9AFOI

  • 웹페이지 분석기

    • 방문자의 도착 경로

    • 이동 경로 및 탐색 환경

  • Google Analytics 서비스

    • 서비스는 웹서버를 통하여야 사용할 수 있다.
      도메인이 있어야 한다.

  • 다섯 줄 정도의 코드가 어마어마한 서비스를 함축하고 있다
    ⇒ 그렇기에 코드는 중요하다

profile
Jinho Lee
이전 포스트

경일게임아카데미 멀티 디바이스 메타버스 플랫폼 개발자 양성과정 20220908 개인 공부 2022/04/04~2022/12/14

다음 포스트

경일게임아카데미 멀티 디바이스 메타버스 플랫폼 개발자 양성과정 20220913 2022/04/04~2022/12/14

0개의 댓글