-
생활코딩 web1 - HTML&Internet카테고리 없음 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이 중요한 이유
<span style="font-size:24px">
coding
</span>
vs
<h3>coding</h3>
접근성accessibility
11강. 최후의 문법 속성 & img
<img src="coding.jpg" width="100%">
unsplash.com -> 이미지 다운로드(저작권x)
Attribute 속성
12강. 부모자식과 목록
<parent>
<child></child>
</parent>
<ul> Unordered List
<li></li>
</ul>
<ol> Orderd List
<li></li>
</ol>
13강. 문서의 구조와 슈퍼스타들
<title></title> ->웹페이지 제목
<meta charset="utf-8">
본문 <body></body>
본문설명 <head></head>
최고위층 태그 <html></html>
<html>태그 위에 <!doctype html>
14강. HTML 태그의 제왕
achor <a></a> 링크
html 공식사용설명서 검색어 추천: html specification
html을 만든 w3c 공식설명서
<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 specification">HTML</a>
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
[추천업체:
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
<input type="checkbox">
코드의 힘: 동영상 삽입.
유튜브 동영상 공유 - 퍼가기 - 소스 복사
코드의 힘: 댓글 기능 추가.
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