일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- position
- es6
- 이벤트핸들러
- 한큐에자바
- for문
- java
- math
- JDK
- 유튜브 올리버쌤
- break문
- 한큐
- web
- Event
- javascript
- hanq
- continue문
- 자바스크립트
- 전자정부프레임워크
- array
- 자바
- Step2
- 유뷰브 올리버쌤
- 이클립스
- 취업반
- 이벤트
- Youtube 올리버쌤
- egov
- spread operator
- 삼항연산자
- 올리버쌤
- Today
- Total
호다닥
생활코딩 - WEB1 본문
HTML
WEB은 Internet 상에서 구현되는 일종의 서비스로 WEB 외에도 FTP, email 등의 다양한 서비스들이 존재한다.
서로 다른 두 컴퓨터가 있다.
한 컴퓨터에는 Web Browser가 설치되어 있고, 다른 한 컴퓨터에는 Web Server 가 설치되어있다.
WebServer가 설치된 컴퓨터는 info.cern.ch라는 주소를 가지고 있고, 이 컴퓨터에는 하드디스크도 있다. 하드디스크의 어느 디렉토리 안에 index.html이라는 파일이 저장되어 있다.
Web Browser 가 설치된 컴퓨터에서 info.cern.ch/index.html 라는 주소를 호출하면 Internet을 통해 전기적 신호를 info/cern.ch 에 해당되는 컴퓨터에 보낸다. 그러면 Web Server라는 프로그램이 index.html 이라는 정보(코드)를 보내준다.
이러한 과정은 내 컴퓨터에 Web Server를 설치하여 직접 수행할 수 도 있고, 업체를 통해 Web Hosting 서비스를 이용할 수 도 있다.
WEB SERVER
웹서버 설치방법
웹서버 제품군에는 Apache, IIS, Nginx 등이 있다.
웹서버를 직접 컴퓨터에 설치하는 것을 어려운 일이다. 따라서 이를 보조해주는 다양한 프로그램이 존재한다.
아파치 공식홈페이지에는 ApacheHaus, Apache Lounge, Bitnami WAMP Stack 등이 있다.
Bitnami에서 내 운영체제에 맞는 최신파일을 다운로드 한다.
설치시에 설치 위치를 잘 기억해두자. ( 나중에 중요한 정보가 될 수 있다. )
Bitnami를 설치한 후에는 Go to Application을 클릭하면 정상 설치 되었는지 확인할 수 있다.
여기까지 완료했다면 Bitnami라는 프로그램을 사용하여 Aapache라는 웹서버를 컴퓨터에 설치한 것이다.
Bitnami를 통해 Aapache 웹서버를 Manage할 수 있다.
웹서버가 정상 작동한다면
http://127.0.0.1/index.html 주소를 입력해도 Go to Application 을 클릭했을 때와 동일한 창이 떠야한다.
그렇다면 index.html은 어디에 저장되어있을까?
Bitnami 설치위치를 확인해보면 apache 하위폴더에 htdocs (hyper text documents의 약자) 폴더가 있다.
htdocs 폴더에 보면 index.html 파일이 존재함을 확인할 수 있다. 이 파일을 편집해보면 과연 해당 파일이 index.html 파일과 동등한지 확인할 수 있다.
127.0.0.1 은 웹브라우저가 설치되어 있는 컴퓨터를 가리키는 특수한 주소이다.
(127.0.0.1 은 전세계에서 모든 컴퓨터가 자기자신을 가리키는거로 암묵적으로 규약되어있다.)
따라서 두 대의 컴퓨터라면 동일한 공유기에 접속하거나 하나의 컴퓨터 속에서 이루어져야한다.
Bitnami가 설치된 폴더의 htdocs 폴더에 그동안 작업했던 파일들을 옮기고 reload를 해보면 비트나미를 사용하여 설치된 웹서버에 작업한 파일을 배포할 수 있게 된다.
내 웹사이트에 기능을 추가하는 툴
1. 댓글기능 Disqus
2. 채팅기능 tawk
3. 웹사이트 방문자 분석기 google analytics
'HTML & CSS' 카테고리의 다른 글
SCSS : variable, nesting, mixins, extends (0) | 2020.07.26 |
---|---|
CSS : flex 와 Grid (0) | 2020.07.26 |
주의사항 (0) | 2018.09.11 |
CSS - Font (0) | 2018.09.11 |
CSS - Parcel (0) | 2018.09.03 |