생활코딩 web1 - HTML&Internet

카테고리 없음

생활코딩 web1 - HTML&Internet

SOME코딩 2021. 12. 8. 22:33

3강. 기획

4강. 코딩과 HTML: code=source=language(사람이 하는 일)

Application=App=Program=Webpage=Website(기계가 하는 일)

HTML(: HyperText Markup Language)

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

준비물2: 웹브라우저, 에디터(editor) - 아톰(atom)

에디터 검색시 추천 검색어: HTML Editor / best HTML Editor 2021

https://atom.io -> download 클릭 -> 설치 -> 바탕화면에 web폴더 만들기

-> 아톰에서 file-open folder-만든 web폴더선택 -> web폴더 오른쪽 클릭해서 new file

-> 1.html 입력 -> 브라우저에서 파일열기(윈도우 ctrl+o) -> 아톰에 hello web 작성 - 저장 -브라우저 새로고침

6강. 기본문법 태그

<strong></strong> - 글자 진하게, <u></u> - 밑줄

7강. 혁명적인 변화

w3c: 웹을 만드는 곳

오른쪽 클릭-페이지 소스 : 웹페이지가 어떤 html소스로 만들었는지 알 수 있다.

구글에 html h1 tag 검색 -> 예제 에디터에 복사후, 실행결과로 무슨 태그인지 추론 -> 검색결과에서 정의확인

https://www.w3schools.com/tags/tag_hn.asp

<h1>~<h6> headings 제목

8강. 통계에 기반한 학습

웹에 대한 통계 사이트 https://www.advancedwebranking.com/html/

한 페이지는 30개의 태그로 구성.

9강. 줄바꿈: br vs p

줄바꿈 태그 검색 추천어: html new line tag

<br>

단락 태그 검색 추천어: html paragraph tag

<p>

21.12.9

10강. html이 중요한 이유

coding

</span>

<h3>coding</h3>

접근성accessibility

11강. 최후의 문법 속성 & img

unsplash.com -> 이미지 다운로드(저작권x)

Attribute 속성

12강. 부모자식과 목록

</parent>

<ul> Unordered List

</ul>

<ol> Orderd List

</ol>

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

<title></title> ->웹페이지 제목

본문 <body></body>

본문설명 <head></head>

최고위층 태그 <html></html>

14강. HTML 태그의 제왕

achor <a></a> 링크

html 공식사용설명서 검색어 추천: html specification

html을 만든 w3c 공식설명서

title설정시 마우스를 링크에 갖다대면 툴팁이 표시됨.

15강. 웹사이트 완성

목표: WEB 클릭시 index.html , 1. HTML 클릭시 1.html, 2. CSS 클릭시 2.html, 3. JavaScript클릭시 3.html 표시

1.html 오른쪽 클릭 duplicate

16강. 원시웹

Internet VS WEB = 도시 VS 도시 위 건물 하나

1960 인터넷 등장, 1990 웹 등장

Internet: 통신장치 중 하나가 사라져도 나머지 통신장치가 그 역할을 수행할 수 있는 통신시스템.

WEB: 팀 버너스 리

웹서버 info.cern.ch

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

인터넷이 동작하기 위해선 최소 2대의 컴퓨터가 필요.

Web Browser(client) : http://info.cern.ch/index.html의 의 정보요청request

Web Server(server)(http://info.cern.ch): 하드디스크의 어느 디렉토리 index.html 파일저장, 정보를 응답reponse

웹서버 사용방법(2) 1. web server 자신의 컴퓨터에 웹 서버를 직접 깔아서(어려움) 2. web hosting 자신의 컴퓨터에 직접 까는 것이 아니라, 이런 일을 대행해 주는 업체한테 맡기는 것.(쉬움)

18강. 웹호스팅: github page

우리가 직접 웹 서버를 운영: 어려움, 컴퓨터가 있어야 한다, 컴퓨터가 항상 켜져 있어야 한다.(언제 접속이 들어올지 모르기 때문) 웹서버라는 프로그램을 배워서 깔아야 한다. + 집밖에서 인터넷을 통해 웹서버에 연결할 수 있게 여러가지 조치

대신 해주는 회사 이용!

호스트(host): 인터넷이 연결되어 있는 컴퓨터 한 대 한대. 웹서버를 운영하기 위한 컴퓨터

웹호스팅(web hosting) 업체: host를 빌려준 회사

웹호스팅 업체 찾는 검색어: web hosting

깃허브(Github): 무료이며 굉장히 유명한 웹호스팅 서비스, 웹서버 제공

깃허브 - 회원가입 - New repository(저장소) - repository name: web1 - Add a README file - create

upload files - choose files - web1폴더 내 전체 파일 선택 - commit changes: first version(보관할 때 어떤 내용을 담고 있는지 쓰는 것) - commit changes

settings - GitHub Pages - source 밑 none을 master branch로 변경 - save

github회사에 index.html 파일을 업로드 - web server활성화 - 주소생성

static web hosting: html파일만을 서비스. 무료도 많고 가격이 저렴.

static 웹 호스팅 이용시 검색 방법: web hosting 검색 - free static web hosting

[추천업체:

https://www.bitballoon.com/

http://neocities.org/

Amazon S3, Google cloud Storeage, Azure Blob]

19강. 웹서버 운영하기

웹브라우저에 여러 제품이 있듯이, 웹서버에도 여러가지 제품이 있다.

ex) Apache, IIS, Nginx

Apache: 오픈소스이며 무료

설치하는 방법 검색어 추천: how to install apache http server os(window, linux, mac os) +현재연도

19.1.1강. 웹서버 설치(윈도우)

아파치를 윈도우에 직접 설치하는 것은 어려운 일. 아파치를 윈도우에 쉽게 설치하도록 도와주는 프로그램

검색어: how to easy install apache on window

Bitnami WAMP(Apache, MySQL, PHP) Stack프로그램

bitnami wamp stack 검색 - download - next3번 -MySQL 데이터베이스 비밀번호 지정

방화벽 관련 알림 - allow access - finish

Go to Application - 화면 잘 뜨면, bitnami를 이용해서 apache라는 프로그램을 설치한 것.

윈도우 탐색기에서 bitnami를 설치한 디렉토리 찾기(C:\Bitnami) - manager-windows

Manage Servers탭 - web server를 끄고 킬 수 있음.

19.1.2강. 웹서버와 http(윈도우)

브라우저 주소창에 http://127.0.0.1/index.html 입력

C:\Bitnami\wampstack-8.1.0-0\apache2\htdocs에 있는 index파일 - 오른쪽 클릭 - 열기 - 메모장

수정 후 확인하면, 웹페이지에 변화가 있다.

http://127.0.0.1/index.html : Internet Protocol Address(IP주소. 웹 브라우저가 설치된 각자의 컴퓨터의 웹 서버)

htdocs에 있는 파일들 모두 삭제 - htdocs폴더에 작업했던 파일들(web폴더에 있는 파일들) 덮어쓰기

http://(127.0.0.1주소로 연 index.html페이지) VS file://(ctrl+o로 연 index.html 페이지)

file://은 파일에 있는 걸 직접 여는 것. http는 웹 브라우저와 웹 서버가 서로 통신할 때 사용하는 통신 규약인 'HyperText(웹페이지) Transfer(전송한다) Protocol(규약,약속)'(웹 페이지를 웹 브라우저와 웹 서버가 서로 주고 받기 위한 약속)을 이용해서 데이터를 가져오는 것.

19.1.3강. 웹서버와 웹브라우저의 통신(윈도우)

웹 브라우저가 웹 서버에 요청을 할 때는 웹 서버의 주소, IP Address가 필요하다.

스마트폰의 웹 브라우저를 통해 실습용 컴퓨터에 설치된 웹 서버에 접속해보기.

윈도우 와이파이,인터넷 아이콘 오른쪽 클릭 - 네트워크 및 인터넷 설정 열기 - 네트워크 및 공유 센터

- '연결' 옆 와이파이 클릭 - 자세히 - IPv4 Address(IPv4주소)

모든 컴퓨터가 자기 자신을 127.0.0.1이라고 하기로 전세계적으로 약속되어 있다.

스마트폰으로 IPv4주소 입력해서 같은 화면 보기(같은 네트워크 상에서 가능)

21강. 수업을 마치며 2/3

코드의 힘: 동영상 삽입.

유튜브 동영상 공유 - 퍼가기 - 소스 복사

코드의 힘: 댓글 기능 추가.

DISQUS라고 하는 서비스를 사용해서 웹 페이지 하단에 댓글을 추가.

LiveRe도 훌륭한 서비스

DISQUS로그인 - 톱니바퀴 모양 - add disqus to site - get started - I want to install Disqus on my site

Website Name: web1, category: tech - create - universal code

코드 복사해서 1.html하단에 복사

웹 서버를 이용해서 localhost/index.html 주소로 열기

코드의 힘: 채팅 기능 추가.

tawk - https://www.tawk.to - 로그인

톱니바퀴모양 - chat widget - 코드복사&하단에 붙여넣기

코드의 힘: 웹사이트 방문자 분석기.

구글 analytics - https://analytics.google.com