본문 바로가기
Education

[생활코딩] HTML 배우기

all.silver__ 2020. 9. 12. 16:32
반응형

기획

이러한 형태의 웹 사이트를 만들 것이다.

  • 수업의 전체 제목
  • 왼쪽: 수업의 목차. 목차에는 링크가 걸려 있고, 이 링크를 클릭하면 해당하는 콘텐츠가 오른쪽에 표시된다.
  • 오른쪽: 상단에 제목이 표시되고, 본문에는 제목에 대한 자세한 설명이 표시된다.

 

1. 코딩과 HTML

왼쪽 오른쪽
결과 원인
기계가 하는 일 사람이 하는 일

사람이 하는 일 (원인)

  • 코드 (부호, 신호의 의미)
  • 소스 (원천이라는 뜻)
  • 컴퓨터 언어 (약속이라는 의미에서 언어)

기계가 하는 일 (결과)

  • 애플리케이션 (앱)
  • 응용 프로그램
  • 프로그램

웹에서 결과를 웹페이지, 웹페이지가 모인 것을 웹사이트, 기능이 많으면 웹애플리케이션(웹앱)이라고 한다. 즉, 원인인 코드를 통해 결과를 만든다는 것이 코딩을 이해하는 핵심이다.

코드를 작성하는 언어도 다양한 종류가 있다. C, C++, Java, JavaScript, Python, PHP, SQL, ... 코드마다 각 역할이 다르므로, 하는 일에 따라서 코드를 적절하게 선택해야 한다.

그 중에서 웹페이지를 만드는 언어는 HTML이다.

  • 쉽다: 문법을 다 배우는데 10분도 걸리지 않음
  • 중요하다

 

Public Domain (퍼블릭 도메인)

  • 저작권이 없는 것들
  • 웹은 저작권이 존재하지 않는 퍼블릭 도메인이다.
  • 현재까지도 오랫동안 발전하고 사용되는 중이다!

 

2. HTML 코딩 실습 환경 준비

Editor

코딩을 하기 위해선 에디터 프로그램이 필요하다. 각 운영체제에는 이미 에디터가 준비되어 있다.

  • 윈도 - 메모장
  • 맥 - 텍스트 편집기
  • 리눅스 - gedit, nano, vim

그 외에 Visual studio, github에서 만든 Atom 등이 있다.

 

3. HTML 기본 문법

태그

자신들이 만든 문법을 사람들이 쉽게 이해하기를 위해 사용하는 것. 즉, 비유, 은유

 

특징

  • 태그 중첩 사용 가능
  • 닫히는 태그는 태그명 앞에 /를 붙임

 

종류1 - 닫는 태그

  • <strong> :  강조
  • <u> : underline 밑줄
  • <h1> ~ <h6> : HTML headings(제목). 글자가 커지고 두꺼워진다. 숫자가 커질수록 글씨가 작아진다. 제목을 표현할 때 사용.
  • <p> : paragraph. 단락을 표현할 때 사용.
  • <a> : 링크를 나타내는 태그. 정보의 바다에 정박한다는 의미의 anchor의 a이다. 
    • href : HypterText Reference. 이동할 웹페이지 주소
    • target="_blank" : 링크를 클릭했을 때 새창에서 페이지가 열리게 하는 속성
    • title : 링크가 어떤 내용을 담고 있는지 툴팁으로 보여주는 기능

 

종류2 - 닫지 않는 태그

  • <br> : 줄바꿈
  • <img> : 이미지 띄우기
    • src : source. 이미지의 주소를 작성하여 이미지를 불러옴
    • width/height : 이미지의 크기를 조정. 단위는 % 혹은 px.
  • <ol> : ordered list.
  • <ul> : unordered list.
  • <li> : <ol>와 <ul>에 작성하는 목록
  • <input>
  • <hr>

 

문서의 구조

본문이 아닌 본문을 설명하는 태그들

  • <!doctype html> : 해당 웹페이지가 HTML로 만들어졌다는 것을 표현함. 문서의 시작에 추가하는 태그.
  • <html> : <head>와 <body>를 감싸는 태그
    • <head> : 본문을 설명하는 태그
      • <title> : 제목 지정. 검색엔진이 웹페이지를 분석할 때 가장 중요한 태그이다.
      • <meta> : 웹브라우저에게 웹페이지가 저장된 문자표현 방식을 알려주어 웹브라우저가 웹페이지를 해석하는 방식을 알려준다. (charset="utf-8")
    • <body> : 본문을 작성하는 태그

 

속성

  • 태그만으로 부족한 정보를 추가하여 작성함.
  • ex) img 태그 - src, width, height

 

4. 통계에 기반한 학습

오늘날 HTML에는 약 150개가 넘는 태그들이 존재한다. 이 많은 태그들을 모두 볼 알아야 할 필요 없이, 통계를 보면서 공부방향을 스스로 결정해야 한다. 구글에는 전 세계의 수 많은 웹페이지를 분석한 결과를 보기 좋게 잘 정리한 사이트가 있다.

 

The average web page from top twenty Google results

Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency:

www.advancedwebranking.com

위 사이트를 통해 웹사이트에서 얼마나 많은 태그들을 사용하고 있는지 그래프로 볼 수 있다.최근 웹사이트에서 약 25~30개의 태그들이 사용된다는 것을 알 수 있다.

아래 그래프는 태그별 인기도이다.  통계에 따르면 1위는 html, 2위는 head, 3위는 body이다.

통계 그래프에서 순위권에 있는 태그들을 보면 앞으로 어떻게 공부해야 할지 스스로 파악할 수 있다. 따라서 공부할 때 통계에 기반하여 공부 방향을 스스로 결정하는 습관을 들여보자 ! 

 

5. 웹호스팅 (github pages)

직접 웹서버를 운영하려면 컴퓨터를 하루종일 켜놓아야 하며, 웹서버라는 프로그램을 배워서 설치해야 한다. 또한 인터넷을 통해 외부로 정보를 전송할 수 있게 설정도 해야한다. 이는 쉽지 않은 일이다.

따라서 이런 일을 대행해주는 회사들이 있다. 인터넷에 연결된 컴퓨터 하나 하나를 호스트라고 하고, 이런 컴퓨터를 빌려주는 사업을 호스팅이라고 한다. 웹서버를 전문적으로 빌려주는 비즈니스를 웹호스팅 업체라 한다. 

많은 웹호스팅 업체가 있지만, 그 중에서 무료이며 유명한 서비스인 github의 pages 기능을 알아보자.

 

github - pages로 웹페이지 만들기

저장소(repository)는 소스코드를 보관하는 곳이라 생각하면 된다.

위 버튼을 클릭하면 아래와 같이 저장소를 생성하는 화면이 나온다.

  1. Repository name : 프로젝트의 이름 작성
  2. public(공개), private(비공개) : 저장소의 공개여부를 정한다. public을 하면 누구나 우리의 소스코드를 볼 수 있다.
  3. Initalize this repository with a README 체크박스에 꼭 체크한다.

다했으면 저장소 생성하기(Create repository) 버튼을 클릭한다.

"Upload files"를 누르면 아래 페이지가 뜬다.

  1. choose your files을 눌러 프로젝트 폴더에 있는 파일을 다중선택한다.
  2. 변경된 내용을 적는다. 파일이 변경될 때마다 업로드를 해야 하기 때문에 변경된 내용을 적어준다.
  3. Commit changes 버튼을 눌러 업로드를 시작한다.

업로드가 끝나면 파일의 목록이 추가된다. 이제 업로드한 웹페이지를 인터넷을 통해 서비스해보자. Settings 버튼을 선택한다.

Github Pages에서 master branch를 선택하고 Select branch 중에서 master branch를 선택한다. 그리고 Save 버튼을 누른다.

그러면 아래와 같이 주소가 표시된다 (주소는 각자 다르다)

생성된 주소를 방문해보면 우리가 만든 웹페이지가 보인다.

 

어떻게 가능할까?

현재 우리 컴퓨터는 my이다. visitor는 우리의 웹페이지를 보고 싶어하는 사람이다. 우리의 컴퓨터는 현재 컨텐츠를 서비스할 수 없다. 그래서 github의 pages기능을 이용했다. github에 파일을 업로드하고 pages기능을 활성화하면 github의 서버 컴퓨터에 웹서버가 켜지게되고, 우리에게 웹서버의 주소를 알려준다. 이제 웹서버의 주소를 방문자에게 알려주게 되면 방문자는 우리 컴퓨터가 아닌 github의 컴퓨터에 설치된 웹서버에 접속하게 된다.

이처럼 웹서버를 직접 운영하는 것에 비해 웹호스팅을 이용하면 쉬워진다.

 

우리는 HTML만으로 웹페이지를 만들었다. HTML은 웹브라우저가 해석하므로 서버쪽에서 특별히 해 줄 일이 없다. 이런 특성을 정적(static)이라고 한다. 반면 동적(dynamic)인 것도 있다. php, python, ruby, java와 같은 기술을 이용하려면 대체로 비용을 내야 한다.

 

6. 웹서버 운영하기

웹서버

가장 먼저 해야할 일은 우리의 컴퓨터에 웹서버라는 프로그램을 설치하는 것이다. 웹브라우저가 제품명이 아닌 제품군이었던 것처럼, 웹서버도 마찬가지로 웹서버라는 제품군에 여러 제품들이 있다. 

  • Apache
  • IIS
  • Nginx

이 중에서 아파치 소프트웨어를 사용해보자. 아파치는 오픈소스이며 무료인 공공재이다. 

윈도우에 웹서버 프로그램 설치하기

how to easy install apache on window 를 검색해보자. 검색 결과 아래 페이지를 찾을 수 있다. 

 

Download - The Apache HTTP Server Project

Downloading the Apache HTTP Server Use the links below to download the Apache HTTP Server from one of our mirrors. You must verify the integrity of the downloaded files using signatures downloaded from our main distribution directory. The signatures can be

httpd.apache.org

링크를 참조하여 bitnami WAMP stack 을 검색해보자. 검색 결과 아래 페이지를 찾을 수 있다. Bitnami WAMP Stack 프로그램을 다운받을 수 있는 페이지이다.

 

WAMP

Bitnami WAMP Stack provides a complete, fully-integrated and ready to run WAMP development environment. In addition to PHP, MySQL and Apache, it includes FastCGI, OpenSSL, phpMyAdmin, ModSecurity, SQLite, ImageMagick, xDebug, Xcache, OpenLDAP, ModSecurity,

bitnami.com

  • Windows
  • Apache
  • MySQL
  • PHP

우리는 이 중에서 Apache 웹서버를 설치하려고 Bitnami를 설치하는 것이다. 다운로드를 한 후 다운로드한 파일을 실행하여 설치를 진행한다. 

Bitnami의 설치 경로를 잘 살펴봐야 한다. 나중에 필요하다.

Next를 누르면 MySQL이라는 데이터베이스의 비밀번호를 설정하는 화면이 나타난다. 입력한 비밀번호를 잘 기억해둔다. Next를 눌러 설치한다.

설치가 완료되면 Launch Bitnami Wamp Stack에 체크하고 완료 버튼을 누른다.

비트나미 매니저라는 프로그램이 실행된다. 이 프로그램을 이용하여 웹서버를 제어할 수 있다.

Go to Application을 눌렀을 때 아래 페이지가 나오면, Bitnami를 이용하여 아파치 웹서버를 성공적으로 설치한 것이다.

매니저를 이용하여 웹서버를 켜고 끌 수 있다.

Manager Server 탭을 선택하고, Apache Web Server를 선택한 후 Start, Stop을 눌러 웹서버를 켜고 끌 수 있다.  Apache앞에 초록색은 웹서버가 현재 켜져있다는 의미이고, 붉은색이라면 웹서버가 꺼져있다는 것이다. 

이렇게 웹서버 설치를 완료했다!

 

7. 동영상 삽입 (iframe)

삽입할 동영상에 공유버튼을 누른다.

누르면 아래 화면이 뜨고 퍼가기 버튼을 누른다.

그럼 다음과 같이 HTML source 코드 화면이 뜬다. 코드를 복사하고 웹페이지 코드에 추가해보자.

아래와 같이 동영상이 웹페이지에 추가되는 것을 확인할 수 있다.

이처럼 이런 서비스를 이용하여 돈을 들이지 않고 동영상 서비스를 사용할 수 있다. 이런 거대한 기능을 <iframe> 태그를 이용하여 사용할 수 있다!

 

8. 댓글 기능 추가

방문자와 교류할 수 있는 댓글 기능을 구현해보자.

직접 구현하는 것은 HTML로는 힘들고, Back-end를 이용하고 데이터베이스를 활용하여 구현할 수 있다. 댓글 기능은 상당한 기술이 필요하다. 수정, 삭제 기능도 있어야 하고, 또한 스팸 댓글도 있기 때문에 스팸 댓글을 차단하는 기능도 있어야 할 것이다. 이처럼 생각보다 댓글 기능은 아주 어렵다.

개발하기 이전에, 남들이 만든 댓글을 우리의 웹사이트에 포함시키면 우리가 직접 구현하지 않고도 댓글 기능을 사용할 수 있게 된다. 이를 위해 disqus 서비스를 사용하여 댓글 기능 추가해보자. disqus 이외에 library라는 서비스도 있으니 알아두자.

 

Disqus

15 articles in this collection Written by Ryan, Daniel Matteson, and Disqus

help.disqus.com

먼저 로그인을 한 후, GET STARTED 버튼을 누른다.

I want to install Disqus on my site를 누른다.

웹사이트 이름을 입력하고 Create Site를 누른다.

Install Disqus를 눌러 자신에게 필요한 기능에 맞춰 선택하여 사용하면 된다.

각 메뉴를 클릭하면 적용 방법 영상과 함께 사용 방법이 설명되어 있어 이를 참고하면 된다.

위 메뉴에서 사용할 기능이 없다면 목록 아래 Universal Code를 누르면 된다.

이를 이용하면 스크립트 코드를 이용해 직접 댓글기능을 커스텀할 수 있다.

코드

<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://web-n3trfpo6py.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

코드를 입력하고 웹페이지에 들어가면 다음과 같이 댓글기능을 사용할 수 있다!

여기서 1.html을 웹브라우저로 그냥 들어가면 아래와 같이 지원되지 않는다. 그래서 나는 github의 pages기능을 이용하여 만든 웹페이지에 댓글 기능을 추가하였다.

 

 

9. 채팅 기능 추가

웹사이트에 방문자와 채팅하는 기능을 추가해보자. 서비스를 직접 만드는 것은 매우 매우 어렵다. 따라서 이전의 댓글 기능처럼 이미 구현해놓은 서비스의 코드를 이용하자 우리는 tawk 서비스를 이용하여 무료로 채팅 기능을 구현할 것이다.

 

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

tawk.to is 100% free live chat software to monitor and chat with visitors on your website or from a free customizable page.

www.tawk.to

먼저 로그인을 하고, 관리자 모드를 들어간다.

Property Name과 Property URL을 입력한다. 나의 경우 Property Name은 WEB, Property URL은 github pages기능으로 만든 웹페이지 주소를 입력했다. Chat Widget을 들어가면 Widget Code를 볼 수 있다.

이 코드를 복사하고 우리의 코드에 추가해보자. <body> 끝에 추가하고 웹페이지를 열여보면 채팅 기능이 추가된다.

채팅을 입력하면 크롬에 연결된 dashboard.tawk.to에서 알림도 울리게 된다.

다시 tawk에 들어가서 1 버튼을 클릭한 후, Join버튼을 눌러보자.

그러면 관리자 권한으로 채팅에 접속하게 된다.

hello라고 채팅을 입력해보자.

그러면 방문자의 채팅에 우리가 입력한 채팅이 뜨게 된다.

관리자가 채팅을 입력 중인 경우, 입력 중인 상태도 방문자가 알 수 있다.

 

10. 방문자 추적기

웹사이트에 몇 명이 방문했는지, 어떤 경로를 통해 이동하여 왔는지, 어떤 환경을 통해 웹사이트를 탐색하고 있는지 등 고급 정보들을 알 수 있다. 많은 사이트 중에서 우리는 Google analytics 서비스를 이용해보자.

우선 google analytics에 들어가서 로그인을 하자.

 

Redirecting...

 

analytics.google.com

설정에 들어가 관리자에 계정 만들기 버튼을 클릭한다.

계정 이름을 입력하고 다음을 누른다.

 

다음을 클릭하면 아래와 같이 속성을 설정할 수 있다.

  1. 웹사이트 이름 : 우리가 만든 web 안에서 여러 개의 프로젝트(웹사이트)를 만들 수 있는데, 그 중에 하나(web1)를 작성하는 것이다.
  2. 웹사이트 URL : 분석하고자 하는, 우리가 운영하고자 하는 웹사이트 주소를 작성한다.
  3. 업종 카테고리 : 우리의 웹사이트와 전체 업종 웹사이트와 비교 및 분석하여 통찰력을 얻을 수 있다.
  4. 보고 시간대 : 대한민국의 시간대를 적용하여 분석한다.

만들기 버튼을 누르면 아래와 같은 화면이 뜬다. 대한민국으로 입력한 후, 모두 체크하고 동의함 버튼을 누른다.

그러면 다음과 같은 화면이 뜬다. 추적 정보 > 추적 코드 > 범용 사이트 태그를 복사하여 우리의 웹사이트 코드에 입력하게 되면 이제 구글 분석기가 알아서 분석해주게 된다. 코드는 추적할 모든 웹페이지의 <HEAD>에 첫 번째 항목으로 붙여넣으면 된다. 여기서 모든 html 코드에 붙여넣기 해야 한다.

코드를 입력한 후 웹페이지에 들어가게 되면 다음과 같이 분석이 된다. 현재 1명이 방문하고 있다는 것을 알 수 있다.

메뉴의 잠재고객 기능을 이용하면 방문자를 정교하게 분석한 결과에서 원하는 데이터를 볼 수 있다. 하지만 데이터가 없다면 분석할 수 없다.

반응형

'Education' 카테고리의 다른 글

[개발스터디] week1: Next.js / ESLint / TypeScript  (0) 2021.06.09
[생활코딩] CSS 배우기  (0) 2020.09.16
[부스트 코딩 뉴비 챌린지 2020] week7_LIVE 강의  (0) 2020.08.28
[부스트 코딩 뉴비 챌린지 2020] FINAL 미션03 : 중위 표기법을 후위 표기법으로 변환하는 프로그램  (0) 2020.08.24
[제주코딩베이스캠프] 웹개발 30분 요약 - 9. Python - f string 용법  (0) 2020.08.23

'Education' Related Articles

티스토리툴바