728x90

 

web1-19.웹서버 운영하기

하나의 문제해결을 위해 몇일이 걸릴 있지만 이를 통해 수많은 지식과 경험을 쌓을 있음

 

웹브라우저는 제품명이 아니라 제품군

웹서버도 동일

 

웹서버 프로그램 : Apach, IIS, Nginx

Apach 무료, 점유율1

 

 

 

 

web1-19.1. 웹서버 설치(windows)

(추천검색어 : how to install apache http server os)

 

bitnami wamp : 통합설치 프로그램

 

WAMP

W : Windows

A : Apach

M: MySQL (데이타베이스 프로그램)

P : php (middleware 미들웨어)

 

 

 

web1-19.2. 웹서버 http

 

Internet Protocol Address (IP address)

127.0.0.1/index.html

 

127.0.0.1  : 웹브라이저가 설치되어 있는 컴퓨터를 가리키는 약속되어있는 특수한 주소

 - 주소를 치는 것은 웹브라우저가 설치 되어있는 각자의 컴퓨터의 웹서버를 가리키는

 

127.0.0.1 주소에 /index.html이라는 경로를 입력하면,

웹브라우저가 자신이 설치되어잇는 웹서버에 접속해서 index.html 파일을 원해라고 얘기하는 것이며, 웹서버는 htdocs라는 디렉토리에서 파일을 찾도록 설정이 기본적으로 되어있는 상태임(변경가능).

그럼 웹서버는 설정대로 htdocs디렉토리에서 index.html파일을 읽어와서 파일을 웹브라우저로 보내주고 웹브라이저는 파일을 읽고 해석해서 화면으로 출력해주는

 

htdocs html파일을 넣으면 파일이 웹페이지가 되는

 

127.0.0.1 file:///c:/Bitnami/wampstack-7.1.10-1/apache2/htdocs/1.html 차이

 

file html파일에 있는걸 직접 오픈하는 것이고

http 웹브라이저와 웹서버가 서로 통신할 사용하는 통신규약(http : Hyper Text Transfer Protocol) 이용해서 데이터를 가져옴.

한대의 컴퓨터에 웹브라우져와 웹서버가 같이 설치 되어있어 결과로 출력된 웹페이지만 보면 차이가 없지만,

 서로 다른 컴퓨터에 있는 웹브라우저와 웹서버가 통신하기 위해서는 반드시 http 사용해야함

 

 *http?

웹페이지를 웹브라우저와 웹서버가 서로 주고 받기 위한 약속

 

 

 

 

web1-19.3. 웹서버와 웹브라우저의 통신

두대의 컴퓨터에서 서로 웹페이지를 주고 받는 방식을 알아보자        

한대의 컴에는 웹서버가 설치되어 있고 하드디스크에 index.html 파일이 있는 상황

우리는 웹브라우저를 통해서 웹서버에 접속하해서 index.html파일을 전송 받아서 화면에 띄우고 싶은 상태

친구한테 전화해서 받을려면 친구 전화번호를 알아야하는 것처럼 인터넷에서는 전화번호가 IP address

 

컴이 두대 있어야 하는데 스마트폰으로 메인컴 웹서버에 접속가능

파일이 있는 웹서버의 IP 확인방법

 - 제어판-네트워크 공유센터-인터넷상태-자세히-IPv4 address 확인

 

접속할 웹서버 IP address 입력하면 접속가능하게

127.0.0.1을 입력한다면…?

(전세계적으로 자기자신의 주소를 127.0.0.1 하기로 약속됨)

 

 

주소창에 127.0.0.1 입력한다면 자기 자신을 의미하는

 

 

두대의 컴퓨터(or스마트폰1대와 메인컴)

같은 무선인터넷이나 공유기에 접속해 있어야 연결가능(같은 네트워크 안에 있어야함)

 

728x90
반응형

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 부록.동영상 삽입  (0) 2021.12.17
생활코딩 WEB1 : 20  (0) 2021.12.17
생활코딩 WEB1 : 17-18  (0) 2021.12.12
생활코딩 WEB1 : 14-16  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
728x90

 

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

인터넷이 동작하기 위해서는 최소 2대가 필요

최초 웹사이트를 개발한  버너스리는 웹브라우저와 웹서버를 개발함

 두대는 인터넷에 연결되어있음.

 

Web Browser : 웹브라우저 주소창에 http://info.cern.ch/index.html 입력하고 엔터누르면, 인터넷을 통해 전기신호를 웹서버 http://info.cern.ch 보냄. 그리고 신호 안에는 index.html 파일을 원한다는 정보가 담겨있음.

Web Server : 인터넷연결상태 하드디스크에 index.html파일 저장된상태

 

<절차 설명>

Web Browser : 웹브라우저 주소창에 http://info.cern.ch/index.html 입력하고 엔터누르면, 인터넷을 통해 전기신호를 웹서버 http://info.cern.ch 보냄. 그리고 신호 안에는 index.html 파일을 원한다는 정보가 담겨있음.

그럼 웹서버는 하드디스크에서 index.html파일을 찾아서 웹브라우저가 설치된 컴퓨터에 전기적 신호로 바꿔서 정보를 쏴준다.  신호 안에는 index.html파일에 있는 코드가 담겨있음.

웹브라우저에는 웹서버에서 보낸 index.html 정보(코드) 도착하고  코드를 웹브라우저가 읽어서 해석한 다음 화면에 표시해줌.  일련의 과정이 우리가 아는 웹사이트가 동작하게 되는 과정

 

*웹브라우저와 웹서버가 서로 정보를 주고 받음

웹브라우저의 역할 : 정보 요청(request) //  클라이언트라고 부를 수도 있음

웹서버의 역할 : 정보 응답(response)

 

게임으로 치면 게임 클라이언트와 게임서버

 

 

 

 

웹서버 두가지방법

자신의 컴퓨터에 웹서버를 직접 깔아서 사용

이런 일을 대행해주는 업체에 맡기는 

 

생활코딩 추천 배움방법

웹호스팅으로 가볍고 쉽게 시작해서 해보고, 웹서버를 통해서 원리를 파악하는 방향을 추천

 어렵게 느껴지거나 시간이 없다면 웹호스팅만 보고갈 

 

 

 

web1-18.웹호스팅 : github page

 

host : 인터넷이 연결되어 있는 컴퓨터 한대 한대를 호스트라 부름.

 - 웹서버를 운영하기 위한 컴퓨터

 - 웹을 목표로 host 빌려주는 사업을 한다면 웹호스팅 업체(대표적 회사 : github)

 - 대부분 전문적인 웹호스팅 업체에 맡김

 

 

웹호스팅 종류

static web hosting : 일정사용량이 넘으면 유료전환 되는 서비스

free static web hosting : 무료

추천 웹호스팅 업체

 - bitballoon.com

 - neocities.org

 - amazon s3

 - google cloud strage

 - azure blob

(시간이 지남에 따라 성장&도태되는 업체가 생기니 검색으로 알아볼 )

 

깃에 업로드한 파일들을 계속 재업하면서 버전관리를   있음☆

 

깃허브를 통해 싸이트 오픈. 만약 안될경우 주소 뒤에 파일명 붙여볼 (ex : index.html)

(아무리 많은 사람들이 들어와서 무료)

 

 

728x90
반응형

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 20  (0) 2021.12.17
생활코딩 WEB1 : 19-19.3  (0) 2021.12.17
생활코딩 WEB1 : 14-16  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
생활코딩 WEB1 : 08-10  (0) 2021.11.08
728x90

 

 

web1-14. HTML 태그의 제왕

<a></a> : anchor 약자

  • 정보의 바다에 정박한다는 의미
  • HTML(Hyper Text Markup Language)에서 Hyper Text 가리
  • 링크를 의미

 

 

 

web1-15.웹사이트의 완성

연관된 웹페이지들을 연결하는 ,본드 같은 역할을 웹사이트

 

수업목표 : Web html css js 각각 다른 html 링크걸기

<a></a>링크걸기

1.html     2.htm    3.html

 

 

 

 

web1-16.원시웹(최초 웹사이트)

웹이 처음 시작한 부분을 알아보자

웹이 어떻게 등장하게 되었는지 이유를 알아볼

 

internet web 차이?

 - internet : 도로 // 운영체제

 - web : 도로 자동차 // 운영체제에 있는 파일

인터넷 안에 여러 동급 서비스들이 있음(FTP, web, email)

1960 : 인터넷 등장

1990 : 등장

 

 

※웹의 역사※

1960,

당시 핵공격 공포심각. 핵공격 당하면 중앙집권적 통신시설 때문에 통신이 마비되는 심각한 상황. 때문에 중앙이 없는 인터넷이 탄생하게됨.

 

각각의 통신장치들이 분산되서 전화국과 같은 역할을 해서 큰점들이 사라져도 각각의 역할을 있는

연구소,대학,군대,기업과 같은 곳에만 인터넷이 사용되어었고, 일반인들은 이때 인터넷 존재를 몰랐음

 

인터넷의 발생지는 스위스

스위스에는 CERN(유럽입자물리연구소)이라는 물리학연구소에서 LHC(반입자가속기)라는 기계가 있음

 

1980

버너스리 enquire라는 프로그램을 발명. 프로그램이 웹의 전신

10 동안 계발시킴

 

1990

연구소에 인터넷이 들어옴.

1990.10

웹페이지 편집기 개발

1990.11

world wide web 개발

1990.12

web server 개발 // 주소 info.cern.ch 최초 웹사이트

 

 

 

 

 

 

 

728x90
반응형

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 19-19.3  (0) 2021.12.17
생활코딩 WEB1 : 17-18  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
생활코딩 WEB1 : 08-10  (0) 2021.11.08
생활코딩 WEB1 : 01-07  (0) 2021.11.06
728x90

 

web1-11. 최후의 문법 속성 & img

태그름만으로는 정보가족할 있다

<img src=“이미지파일.jpg” width=“100%>

Attribute

Src = source

 

*Unslash 작권 상관없이 이미지 있는 싸이트!

 

 

web1-12. 부모자식과 목록

부모(parent) : 다 태그함하는 태그

(child) : 다 태그에 속하는 태그

<parent>

<child></child>

</parent>

 

 

<br> 줄바 태그

<li><li> : List, 목차태그

<ul></ul>  : 순서x, Unordered List

<ol></ol> : 순서있는 리스트, Ordered List

 

li : 자 태그로써 반드시 부모태그가 필요

  • 어디서부터 어디까지 연관된 항목인지 짓는다(grouping)

ul : 부모태그로써 반드시 태그가 필요

<ul>

<li>egoing</li>

<li>youbin</li>

</ui>

(위 배울과 아래 참여자. 이렇게 li,ul사)

 

 

*콘트롤+클릭(윈도우즈) : 다중으로 클로즈태그성가능

 

 

 

 

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

사용빈도수가 높은

 

<!doctype html> 관용적으로 서두에 html문서를 나타내 의미로

<html></html> 최고 태그

<head></head>

<body></body>

<title></title> : 웹페이지. 인터넷창의 탭에 보이. 본문

<meta></meta> : 본문

 

<meta charset=“utf-8”>

  • uft-8 열어라는 의미
  • uft-8 만들었으면 uft-8 열어야 안깨짐
  • 컴퓨터가 01 인식가능하고 데이터종적으로 01로저장함
  •  01 어떻게장할지 여러가지 약속들이 존재하는데 하나가 uft-8 
  • Cha : character 문자라 의미
  • Set : 칙이라는 의미

 

위에 코드들은 본문을

아래있는 코드들은 본문

 

Html 코드들은 <head> <body> 하나에 반드시 놓이게된다

태그 위에 <html> 쓴다

 

 

728x90
반응형

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 19-19.3  (0) 2021.12.17
생활코딩 WEB1 : 17-18  (0) 2021.12.12
생활코딩 WEB1 : 14-16  (0) 2021.12.12
생활코딩 WEB1 : 08-10  (0) 2021.11.08
생활코딩 WEB1 : 01-07  (0) 2021.11.06
728x90

 

web1-8. 통계에 기반한 학습

html 150 이상의 태그가 존재하나 외울 필요 없이, 주요 몇개와 이해만 있다면 검색으로 모두 가능

 

<strong>,<u>,<h1-6>  이미 8가지 태그를 알고있음

 

html 사용 빈도수

 

 

web1-9. 줄바꿈 : br vs p

CSS맛보기

가독성을 위한 줄바꿈 필요 - 검색해보기 : html new line tag

<br> : 줄바꿈, 시각적 효과만 존재, 닫는 태그없음

<p></p>: 단락 나누는 태그.

*위의 태그는 시각적으로 같지만, p태그를 쓰는게 좋다. 웹페이지를 정보있는 가치로 만들어줌. 단락을 표현하므로 의미 있게 만듬

 

 *둘의 차이

<p> 정해진 여백이 있어 제한이 있으나 css 정교하게 스타일링가능.

<br> 원하는 만큼 써서 공백을 만들 있음

<p style="margin-top:45px;">

margin 태그!

 

 

 

 

 

web1-10. html 중요한 이유

 

인터넷 글쓰는 것은 내부적으로 html코드성하는 행위였음

편집기에서 h3태그로 감싼 글자와 볼드,글자크기를정한각적인 효과 있는 글씨와는 검색시에 엄청난 차이 난다

 

검색에서 유리 태그들로성해라

검색엔진들은 인터넷에서천수만의 검색어 관련 자료 분석하는데 h태그 것과 것은 검색선순위에서 엄청난 차이가난다. 검색은 되지 100-200페이지 뒤에 나온다면 누가볼까?

각장애인을 배려도 태그!

 

 

 

728x90
반응형

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 19-19.3  (0) 2021.12.17
생활코딩 WEB1 : 17-18  (0) 2021.12.12
생활코딩 WEB1 : 14-16  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
생활코딩 WEB1 : 01-07  (0) 2021.11.06
728x90

 

 

web1-4. 코딩과  HTML

웹페이지

웹사이트 : 웹페이지가 모이 웹사이트

 

웹페이지 만드는 언어가 html

 

Html 장점

가장 쉽다

많이 쓴다

퍼블릭 도메인이다(저작권 없음, 무료)

 

 

 

web1-5. html딩과 습환경준비

집하는 프로그램이라는 의미로 에디터 프로그

아톰(ATOM) 사용

웹페이지 확장자 : html

 - ex) first.html

hello web 웹페이지 제작

 

 

web1-6. 기본문법 태그

웹을 지배하는 문법 : 태그

 

tag 설명하는

 

컴퓨터용어들을 지을 일상에 밀접한 용어들로 짓는 경우가 많으니 모르겠으면 사전 찾아볼 !

 

 <strong></strong> 태그 : 볼트체

 <u></u> 태그 : 언더라인, underline 약자, <strong>태그 안에 사용가능

 

 

 

 

web1-7. 혁명적인 변화

쉬운 것은 사소하다? 시험의 목적은 구별이기에 틀린만한 (어려운것) 출제되므로, 각종 시험에 익숙해져 어려운 것만 가치가 있다고 자연스럽게 생각하게 된다

but, 기초 기본이 중요!!

                                                                                                          

w3c 싸이트

우클릭 페이지소스 : 웹페이지가 어떤 코드로 구성되어 있는지 있음

 

<h1> : 제목. heading 약자

<h1-6> : 1-6까지만 존재

  - h1 tag 사용시 자동적으로 볼트와 줄바꿈, 글씨크기가 커짐. 따로 다른 코드 안써도

 

HTML h1 tag 검색해보라

태그가 무엇인지만 알아도 검색으로 금방 있기에 모두 기억할 필요x

 

 

728x90
반응형

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 19-19.3  (0) 2021.12.17
생활코딩 WEB1 : 17-18  (0) 2021.12.12
생활코딩 WEB1 : 14-16  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
생활코딩 WEB1 : 08-10  (0) 2021.11.08

+ Recent posts