2022. 5. 26. 03:28ㆍ22-1학기/WINS_모의해킹
WEB1 - 12 ~ 19.1.3
12. 부모자식과 목록
-태그가 서로 포함 관계로 연관되어 있을 때 포함하고 있는 태그를 부모태그 , 포함된 태그를 자식 태그라고 부름
<parent>
<child></child>
</parent>
-목록을 만드는 태그 : <li> </li> = 자식태그
-목록을 서로 구분해주는(띄어쓰기) 태그 : <li>태그의 부모 태그 = <ul> </ul>
-목록의 리스트를 자동으로 숫자화해주는(numbering) 태그 : <ol> </ol> (ol 역시 부모 태그임)
*ol = ordered list, ul = unordered list
13. 문서의구조와 슈퍼스타들
-정보를 잘 정리 정돈하기 위한 체계, 구조라는 것이 필요함 -> 구조 만드는 법 배울 것임
-제목을 사용자에게 명시적으로 알려주고 , 검색 엔진과 같은 기계들이 인식할 수 있도록 만들어주는 태그
: <title> </title>
-한글을 입력했을 때 한글 그대로 웹페이지에 출력되도록 하는 태그 (utf-8 형식으로 웹페이지를 만들도록 하는 태그)
: <meta charset="utf-8">
*위에 있는 코드들(두 줄) : 본문을 설명하는 코드들 -> <title>은 본문의 제목이 무엇인지 설명하는 태그이고, <meta~> 는 이 본문이 'utf-8'이라는 방식으로 저장되어 있다는 것을 설명한다.
아래에 있는 코드들 : 본문
-> 본문을 <body> </body>라는 태그를 이용해서 꼭 본문을 묶어줘야 함
본문을 설명하는 태그는 <head> </head>라는 태그로 꼭 묶어줘야 함
-<body> <head>태그는 고위직 태그임
-> 이 고위직 태그들을 감싸는 단 하나의 최고위층 태그가 있는데 그게 <html> 태그임
14. HTML 태그의 제왕
<a> </a> : 링크를 의미하는 태그
15. 웹사이트 완성
Website
책처럼 엮기 위해 각각의 링크들을 생성해야 한다.
맨 위에 WEB이라는 버튼을 클릭하면 index.html 파일로 가도록 만들 거임. 그리고 거기에는 홈페이지, 웰컴 페이지가 나올 거임.
1.HTML
2. CSS
3.JavaScript
WEB
16. 원시웹
-웹의 역사
인터넷과 웹은 다르다. 인터넷이 도시라면 웹은 그 도시에 있는 건물 하나이다. 즉, 인터넷이라는 전체 안에 웹이라는 부분이 존재하고 웹과 동급인 여러가지 서비스들이(FTP, email...) 있다.
1960년에 인터넷이 등장하고, 1990년에 웹이 등장한다. 핵공격에도 견딜 수 있는 강인한 통신 시스템을 위해 탄생한 것이 인터넷이다. 각각의 통신 장치들이 분산해서 수많은 전화국과 같은 역할을 한다. 30년 동안 인터넷은 거대한 기관에서(기업, 연구소, 군대, 대학..) 사용하던 통신 시스템이다가, 1990년에 웹이 출현하면서 새로운 길을 걷게 된다.
웹은 스위스에서 생겨났다. 팀 버너스 리가 웹에 인터넷을 합성해서 사건을 일으키기 시작한다.
1990년 10월에 세계 최초로 웹페이지를 만드는 편집기를 만든다. 1990년 11월에 세계 최초의 웹 브라우저인 World Wide Web이라는 프로그램을 만든다. 1990년 12월 24일 웹서버라는 프로그램을 만들고 그 프로그램이 설치되어 있는 컴퓨터에 info.cern.ch라고 하는 주소를 부여한다. 이게 바로 웹의 메소포타미아이다.
->1990년 12월 24일에 팀 버너스 리가 완성한 웹 = 원시웹: Primitive Web
17. 인터넷을 여는 열쇠 : 서버와 클라이언트
두 대의 컴퓨터가 정보를 주고 받음
*팀 버너서 리가 두 개의 컴퓨터 각각에 개발한 두 개의 프로그램 ( 이 두 대의 컴퓨터는 인터넷으로 연결되어 있음)
-(컴퓨터A에 있음) Web Browser :
인터넷을 통해서 전기 신호를 컴퓨터 B에 보낸다
-(컴퓨터B에 있음) Web Server :
http://info.cern.ch주소를 갖고 있음
하드디스크를 갖음
컴퓨터A로부터 전기적 신호를 받으면 다시 전기적 신호를 보낸다(코드) -> 웹사이트가 A에 도착하게 됨
-> 웹브라우저가 설치되어 있는 컴퓨터는 정보를 요청함(Request) = Client(클라이언트)
웹서버가 설치되어 있는 컴퓨터는 정보에 응답함(Response) = Server(서버)
'웹서버를 사용할 수 있게 된다'의 의미 : '내 컴퓨터에 있는 문서를 전세계에 있는 누구나 인터넷이 연결되어 있는 컴퓨터에 웹브라우저는 깔면 가져다가 볼 수 있도록 할 수 있다'라는 의미이다.
18. 웹호스팅 : github page
인터넷에 연결된 컴퓨터 하나하나를 host(호스트)라고 하고, 이런 컴퓨터를 빌려주는 사업을 hosting(호스팅), cloud(클라우드)라고 한다.
호스팅 중에서 컴퓨터의 웹 서버와 같이 웹을 동작하기 위해서 필요한 소프트웨어들까지 설치해서 빌려주는 비즈니스를 Web Hosting(웹 호스팅)이라고 부른다. -> 그 중에서 무료이고 유명한 웹 호스팅 업체 = GitHub
+버튼에서 New Repository를 클릭하면 저장소를 만드는 화면이 뜬다. 그러면 새로운 저장소를 만들 수 있게 된다.
my-first-web-site라는 저장소를 새로 만든다.
-> 이제 우리의 소스코드를 깃허브 닷컴의 저장소에 업로드를 해야 한다.
빨간 줄이 그어져있는 부분인 'uploading an existing file'이라는 링크를 클릭하고, 'choose your file'버튼을 클릭해서 파일을 업로드 하면 된다.
업로드를 완료한 후에는 어떤 작업을 했는지 'Add files via upload'칸에 작성한 후 'Commit changes'버튼을 클릭한다.
그러면 내가 작업한 것에 대한 첫 번째 버전이 인터넷에 안전하게 저장된다.
업로드가 완료된 파일을 클릭하면 그 파일의 내용(소스코드)를 볼 수 있고, 이 주소를 다른 사람에게 공유하면 그 소스 코드 자체를 다른 사람과 공유하고 토론도 할 수 있는 기능을 제공한다.
-깃허브는 우리가 보관하고 있는 소스코드를 이용해서 웹사이트를 운영할 수 있는 기능인 '깃허브 페이지'를 제공한다.
'Settings'를 클릭하면 현재 저장소에 설정을 할 수 있는 화면이 나온다. 그러면 사이드바에 'Pages'라고 하는 메뉴가 나오는데, 그 메뉴를 클릭한다. 그러면 웹 호스팅 기능을 활성화 시킬 수 있는 메뉴가 나온다.
작업이 완료된 후, 깃허브 페이지의 웹 주소를 클릭하면 내가 만든 웹 사이트에 전 세계 모든 사람들이 방문할 수 있게 된다.
-만약에 파일의 내용을 바꾸면, '<>code' 버튼을 눌러서 저장소의 홈 화면으로 가서 'Add file'을 클릭하고 'Upload files'를 클릭해서 수정한 파일들을 다시 드래그해서 떨어뜨리고 마찬가지로 어떤 작업을 했는지 적고 'Commit changes'버튼을 누른다. 그러면 새로 수정한 버전이 반영이 되고, 깃허브가 자동으로 내가 만든 웹사이트를 갱신해준다. 만약 그 진행상황을 보고 싶다면 'Actions'버튼을 클릭해서 'pages build and deployment'를 들어가보면 진행상황을 볼 수 있다.
-my : 내가 만든 웹페이지가 있음
-visitors : 내가 만든 웹페이지를 보고싶어하는 방문자들이 있음
-hosting : 서비스를 대신해서 제공할 호스팅 업체들이 있음 (깃허브 닷컴)
->과정 :
내가 파일을 업로드하면 소스코드가(index.html) 웹호스팅으로 업로드가 된다. 웹호스팅 업체에서는 웹호스팅에 설치되어 있는 웹서버를 활성화한다. 그리고 컴퓨터에 도메인의 이름을 부여한다. 그리고 방문자가 도메인 주소로 접속하면 웹서버가 index.html을 읽는다. 그러면 웹서버는 방문자에게 index.html의 소스코드를 전송한다. 방문자의 웹브라우저에 웹페이지가 표시되면 작업이 완료된다.
19. 웹서버 운영하기 (2022년 수정본) ~ 19.1.3. 웹서버와 웹브라우저의 통신 (윈도우)
웹서버 : Apache, IIS, Nginx, Web server for Chrome
이 중에서 Web server for Chrome 다운받기
-웹서버를 통해서 웹페이지를 가져오는 방법 : choose folder 선택하기 -> 만든 웹 폴더를 선택하기 -> 웹서버 버튼 다시 눌러서 껐다 키기 -> 그러고나서 그 아래에 뜨는 web server URL을 복사하고 그 뒤에다가 '/index.html'을 쓰고 엔터치기
1. 웹브라우저가 파일 열기를 하는 방법 : 웹서버를 통하지 않고 웹브라우저가 페이지를 직접 연 방법임
ex) file:///Desktop/web/index.html
2. 웹서버로 파일 여는 방법 : 같은 컴퓨터에 설치되어 있는 웹서버에 접속해서 웹서버가 index.htnl을 읽어서 웹브라우저에게 돌려지는 방법
ex) http://127.0.0.1:8887/index.html
http://127.0.0.1:8887/index.html
-> http : Hyper Text Transfer Protocol
127.0.0.1 : Internet Protocol Address (웹브라우저가 설치되어 있는 컴퓨터를 가리키는 아주 특수한 주소)
8887 : Port
*핸드폰에 설치된 웹브라우저와 컴퓨터에 설치된 웹서버를 통신하는 방법
1. 휴대폰과 컴퓨터를 같은 네트워크에 연결시키기 (웹서버의 설정을 바꾸기)
2. 그러고나서 다시 웹서버를 키면 설정이 바뀜 (ip address)
3. 휴대폰으로 그 ip address와 뒤에 있는 포트번호를 입력해서 방문하면 됨
*아파치(APACHE)를 깔 수 있도록 도와주는 프로그램 : Bitnami WAMP Stack