본문 바로가기
Programming/HTML

HTML - 생활코딩

by DONGKU 2020. 6. 9.

출처: 생활코딩 HTML

HTML(Hyper Text Markup Language)

웹 페이지를 만드는 컴퓨터 언어

 

HTML코딩과 실습환경 준비

  • Atom에서 파일 생성
    File -> Open Folder -> Folder select -> new file -> .html 생성

  • web에서 .html 파일 열기
    단축키: ctrl+o

 

기본문법 태그 </>

-텍스트 강조
...

...

// h1~6, 1순위부터 6순위까지 글자순 (h태그는 제목에 주로 사용)

-텍스트 밑줄
...

 

통계에 기반한 학습

Web 관련 통계 사이트
keyword: frequency of [ ]

 

줄바꿈 br vs p

html new line tag: <br> </br>
// 여러번 줄바꿈 o
html paragraph tag: <p> </p>

...

// 같은 '단락' 표시, 정해져있는 여백만큼만 벌어짐

 

HTML이 중요한 이유

비즈니스 AND 휴머니즘

HTML의 구성으로 작성된 게시물은 단순히 글만 나열하는 게시물이 아니라
글에 의미를 부여한 하나의 정보문으로써 게시물의 접근성을 높이는 효과를 준다.

 

최후의 문법 속성 & IMG

저작권없는 이미지 사이트
진행하고 있는 프로젝트 폴더에 이미지 저장

 

부모자식과 목록

<parent>
    <child></child>
</parent>

-목록

태그는 반드시 부모 태그를 가짐

태그는 반드시 자식 태그를 가짐

<ul>  //목록에 번호 수동으로 부여(Unorderd List)
  <li> </li>  //　·　찍힘
</ul>
<ol>  //목록에 번호 자동으로 부여 (Ordered List)
  <li> </li>
</ol>

 

 

문서구조와 슈퍼스타들

<파일>

<!doctype html>  // 관용적으로 html 문서를 나타내는 표시
<html>  // head와 body를 묶는 최고위층 태그
<head>  // 본문을 설명하는 head 태그 묶기
    <title>WEB1 - html</title>  // 브라우저 tap에 제목 표시
    <meta charset="utf-8"> // 글씨 깨질경우 UTF-8 규약 따르도록 함
</head>  
# 
<body>  // 본문 body 태그 묶기
...
</body>
</html>

 

HTML 태그의 제왕

 

    • // anchor 닻을 내린다는의미, Link를 나타냄

      <a href="링크">링크 걸리는 문장</a>  // href: higertext reference
<a href="링크" target="_blank">링크 걸리는 문장</a>  
// target="_blank" 추가시 새탭에서 링크 열림
<a href="링크" title="html5 specification">링크 걸리는 문장</a>
 // title="html5 specification" 추가시 마우스 올려놓았을 때  툴팁 표시

      구선생: html spectification(설명서)

       

       


      원시 웹

      Internet VS WEB
      Internet은 도시, 도로, 운영체제라면
      WEB은 건물 하나, 자동차 한대, 프로그램 히나

      WEB의 고향은?

      1960
      Internet 세상에 나오다..

      1990.12
      info.cern.ch
      // web의 메소포타미아..web은 여기서 시작되었다.. 인터넷과의 폭발적 성장의 시작..

우리는 이제 원시웹처럼 전자문서를 만들 수 있게 되었다!

 

    • 인터넷을 여는 열쇠 : 서버와 클라이언트

       

      웹호스팅 (github pages)

      저장소(Github)를 서버로 사용: Github Settings -> Github Pages -> Source [master] -> Link 복사
      // 링크 오류 날 시에 주소에 /index.html 추가
      https://dev-dongkyu.github.io/web1/

       

      구선생: free static web hosting

       


      웹서버 운영하기

Apach IIS Nginx

    • 웹 호스팅에 비해 어려움

      윈도우에 웹서버 설치

      구선생: how to install apache http server os

            1. bitnami wamp stack 설치 // wamp: Window Apache Mysql Php
            2. 설치 폴더에서 manager windows 실행
            3. Manage Server 에서 실행 확인
            4. 브라우저에서 localhost 접속 // http://127.0.0.1/index.html 와 동일

      웹서버와 http

      브라우저에서 http://127.0.0.1/index.html
      // C:\Bitnami\wampstack-7.3.18-0\apache2\htdocs/index.html 파일 존재
      // htdocs: HyperTextDocuments
      // htdocs안에 있는 파일 모두 지운 후 우리가 만든 웹 파일 넣으면 변경 가능

      file:///C:/Bitnami/wampstack-7.3.18-0/apache2/htdocs/index.html
      // WEB에서 ctrl+o 눌러 index.html 파일 추가 시 주소

      http:// ->Hyper Text Transfer Protocol 을 이용하여 웹 브라우저와 서버가 통신하여 불러옴(서로 다른 컴퓨터)
      file:// -> 파일에 있는 것을 직접 불러옴(같은 컴퓨터)

       

      웹서버와 웹브라우저의 통신

      현재 컴퓨터 IP Address 확인: 컴퓨터 네트워크 속성보기 -> 이더넷 -> IPv4 Address

      127.0.0.1 // 전세계적으로 모든 컴퓨터가 자기 자신을 표현하는 ip

      스마트폰(클라이언트)과 데스크탑(서버)을 통해 IP입력으로 서버 접속 가능

    •  

      동영상 삽입

      유튜브 링크 '퍼가기'

          <iframe width="560" height="315"
    src="https://www.youtube.com/embed/29ycT6fA-Rs"
    frameborder="0" 
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>

       

      댓글 기능 추가

      댓글 api 제공 사이트
      DISQUS
      LiveRE

      댓글 기능 원하는 부분에 사이트에서 제공하는 코드 붙여넣기

      서버를 통해 댓글 기능 이용하므로 127.0.0.1/index.html 로 접속

       


      채팅 기능 추가

      tawk
      설정 -> chat widget 코드 복사

      이 또한 서버를 통해 댓글 기능 이용하므로 127.0.0.1/index.html 로 접속

       


      웹사이트 방문자 분석기

      Google Analytics

댓글

티스토리툴바