[생활코딩] WEB1 마무리 + 코드의 힘 + 웹사이트 파비콘 추가하기

 

• 프론트엔드 엔지니어
• [HTML / CSS / JavaScript]

웹페이지를 꾸미는 CSS는 HTML이 만들어지고 4년 후 등장.

사용자와 상호작용하는 JavaScript는 HTML이 만들어지고 5년 후 등장.

 

 

• 백엔드 엔지니어

PHP
JSP
Nodejs Express
Python Django
Ruby on Rails
ASP.net

이 기술들은 서로 경쟁관계에 있고,
이 중에 하나를 공부하면 된다.

 

---

코드의 힘

---

• <p><iframe 태그 ></p> : 동영상 첨부

<iframe></iframe>

 

 

• DISQUS 서비스 / LiveRe 서비스

: 웹페이지 하단에 댓글 추가

- GET STARTED > I want to install Disqus on my site > 무료 Basic 버전 클릭 >

 > 나오는 코드 복사해서 웹사이트 코드 내부 원하는 위치에에 붙여넣기.

 

disqus가 이메일 인증으로 not found 에러가 뜰 때가 많아서,

차라리 구글이나 페이스북으로 가입하는 게 나을 것 같다.

 

 

 

혹은 

이렇게 삽입하기.

 

 

 

• 방문자와 채팅 서비스 제작

tawk 로그인.

https://www.tawk.to/

 

100% FREE Live Chat Software, Ticketing & Knowledge Base! - www.tawk.to

setting 들어가서 chat widget 들어간 뒤 위젯 코드를 복사해서 붙여넣어준다.

edit content를 눌러서 채팅 화면 내용을 바꿀 수도 있다.

 

참고로 관리자가 tawk을 켜고 있어야 대화가 진행되고

아니면 방문자가 이메일이랑 용건을 남기고 가는 식으로 진행된다.

 

 

• 방문자분석기 (웹페이지 분석기)

구글 analytics 가입하고 웹페이지 추가해주기.

버전이 바뀌어서 찾기가 어려웠는데 댓글로 알려주셨다.

 

전체사이트 태그에 있는 태그를 각 페이지 head 태그 안에 붙여줌.

그리고 github에 upload해주면 된다.

 

그리고 reload해주면 따란!~!

방문자 수를 실시간에서 확인할 수 있다.

 

인구통계 세부 정보에서 해당 방문자의 세부 정보들도 확인 가능.

 

 

 

• 파비콘 추가하기

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico">

 

favicon.ico 파일로 변환한 뒤 집어넣어주고,

head 태그 안에 해당 태그를 넣어주어야 한다.

https://www.favicon-generator.org/

Favicon & App Icon Generator