"2018/10/06"에 해당되는 글 - 2건

Bitnabi로 서버 접속, 댓글 달기, 채팅기능 추가

[ 이전게시판/HTML CSS Javascript ] 2018. 10. 6. 22:40

Bitnami로 서버 접속 ( Windows )

아파치를 설치하기 위해 Bitnami( https://bitnami.com/ )를 다운받는다. MySql, PHP는 사용X
설치 확인을 위해 Go to Aplication 버튼을 클릭한다. Bitnabi 웹페이지가 잘 나온다면 성공한 것이다.
Manage Servers 메뉴를 선택해 Apache Web Server를 Stop 시키면 Apache 서버가 꺼진 것이다.(웹페이지를 다시불러오면 페이지를 찾지 못했다는 창이 뜬다)D F
Bitnami가 설치된 폴더로 가면( C:\Bitnami\wampstack-7.1.21-0\apache2\htdocs ) index.html 파일을 찾을 수 있다.
index.html이 있는 폴더 내용을 전부 삭제 하고, 자신이 만든 html 파일을 넣으면 새로 고침 후 홈페이지가 반영된 것을 알 수 있다.
기존엔 내 컴퓨터에 html 파일을 연거지만, 5번은 웹 클라이언트가 웹 서버에 페이지를 요청을 하고, 클라이언트가 응답을 받아서 웹페이지가 나온 것이다.

댓글 달기 기능

https://disqus.com/ 사이트 접속
회원가입, 로그인 후 나오는 페이지에서 Get Started - I want to install Disqus on my site 클릭
Website Name을 적고 Create Site 클릭. 그 후 무엇으로 홈페이지를 만들었는지 선택하는 화면이 나오는데 맨 밑에 'I don't see my platform...' 클릭
어떤 코드가 나옴. 그 코드를 소스코드에 넣으면 댓글 추가 완료. ( File이 아니라 웹서버에 요청해서 페이지를 열어야 한다! 파일로는 댓글이 안보인다. )

채팅 기능 추가

https://www.tawk.to/ 사이트 접속
가입, 로그인 후 Dashboard 화면이 뜬다. ( https://dashboard.tawk.to/#/dashboard )
여기서 왼쪽 맨 아래에 수레바퀴 모양(설정 모양) 버튼을 클릭한다.
자신의 홈페이지 이름, 주소를 적고 완료.
Widget Code를 복사해서 웹 사이트에 추가한다. 채팅창이 추가된 것을 확인할 수 있다.(http로 열어야 한다. 파일x)
방문자가 채팅을 치면 알람소리가 들리고 Dashboard에서 알람이 뜬 것을 확인할 수 있다. 알람 뜬 아이콘을 선택 후 Join을 누르면 사용자와 채팅을 할 수 있다.

저작자표시 비영리 변경금지

'이전게시판 > HTML CSS Javascript' 카테고리의 다른 글

크롤링 하려고 하는데 ModuleNotFoundError: No module named 'pandas'에서 막힘 (1)	2022.10.11
Javascript 정리 (0)	2018.10.14

HTML 문법 기초 및 Git 호스팅 예제

[ 이전게시판/etc ] 2018. 10. 6. 20:22

HTML 기본태그

내용 : 중요한 단어라고 설정하고, 글자를 진하게 한다. 는 그냥 글자만 진하게 한다.
내용 : 밑줄 영어로 underline. 앞글자만 따서 태그는 글자에 밑줄을 긋는 태그이다.
<h1> ~ <h6> : 제목을 나타내는 태그. 1이 제일 글자 크기가 크고 6이 제일 작다.
: 줄바꿈 태그. 닫는 태그가 없다.
내용 : 단락을 가르는 태그. 웹페이지에서 단락이라는 의미를 가지기 때문에 태그와 비슷하지만 태그를 쓰면 더 좋다.그리고 태그는 정해진 여백크기가 있지만 style을 사용하면 여백 크기를 다르게 만들 수 있다.

ex.

<img>태그 : 이미지를 나타내는 태그. 사용 방법은 <img src = "이미지 위치" width = "100"> 이 때 src, width은 속성이다.

태그의 이름만으로는 부족할 때 태그의 속성에 정보를 준다.

<li>목록</li> 태그 : 목록 태그. 목록의 영어이름 list에 앞 두글자를 땄다. <ul>태그는 <li>태그로 이루어진 목록을

그룹짓는 역활을 한다. 숫자목록을 하고 싶으면 <ul>대신 <ol>태그를 사용한다.

<ul>태그는 Unordered List의 약자
<ol>태그는 OrderedList 의 약자
<title>타이틀</title> : 웹페이지의 제목을 명시적으로 알려줌. 검색엔진이 검색할 때 유용하게 사용된다.
<a> : 링크. ancher 약자. <a href = 주소></a>

GIT으로 정적 웹 호스팅하기

로그인 후 새로운 저장소를 만든 후 Upload files 버튼을 클릭해서 웹파일을 git에 올린다.
Settings 클릭 후 GitHub Pages 에서 source 를 master branch로 바꾼 후 저장.
Source 위에 웹 주소가 생긴다. git에서 정적웹 호스팅이 생성된 것이다.

이제 누구나 내가 만든 웹페이지에 접근할 수 있다.

( git은 static web만 호스팅 된다고 한다. static web이란 화면 변화 없이 그대로 보여주는 웹이고, dynamic web이란 클라이언트에서 보내주는 값에 의해 화면이 바뀔 수 있는 web이다. html로만 만든 웹 클라이언트는 서버가 없어서 동적인 변화를 못주기 때문에 static web이다.)

그 외 추천 웹호스팅 https://www.bitballoon.com/ , http://neocities.org , Google Cloud Storage , Azure Blob