• Home
  • About
    • Young's Github Pages photo

      一日不作一日不食

    • About
    • Github
  • Posts
    • All Posts
    • All Tags
  • Projects

HTML 정리 01

23 Jan 2019

Reading time ~3 minutes

HTML 정리 01 - Web, HTML, Tags

Web

  • 문자, 동영상, 이미지를 인터넷을 사용하여 검색할 수 있는 서비스
    • 검색은 URL(Uniform Resource Location), HyperLink를 사용
  • 인터넷(누리망)
    • Hyper Text를 사용하여 비순차적으로 문서를 연결하는 프로그램
    • 1973년 Vinton Cerf(빈튼서프), 밥 칸(Bob Kahn)이 TCP/IP를 기반으로 한 네트워크끼리 연결하도록 설정한 네트워크
  • Web 고안, URL, HTTP, HTML 만드신 웹의 아버지 Tim Berners-Lee
    • HTML문서는 Web Browser에서 동작
      • Web Browser는 HTML을 분석, 그리는 일을 한다.
        • 브라우저마다 다르게 그렸기 때문에 웹표준 등장
      • Web Browser 제작사는 다양
        • IE, Chrome, FireFox, Opera, Safari, …
      • URL을 사용하여 web 서비스 이용
        • Web Server
          • Web Service를 제공하는 프로그램
          • Web Server는 HW가 아니라 SW
          • 유명한 Web Server는 ApacheHttpServer
          • Web에서 URL로 요청을 받아 HTML을 응답
        • Web Container(Tomcat)
          • URL요청을 받았을 때 Servlet/JSP를 HTML로 변환하여 응답하는 프로그램
          • 유명한 Web Container는 Apache Tomcat
      • 기반 프로토콜은 TCP/IP, HTTP 사용

URL의 구성

Protocol://ServerIP:PORT/ContextRoot/Service받을파일명
예) http://sist.co.kr:80/main/a.html
  • 웹 서버 포트번호는 80(생략가능)
  • 웹 클라이언트의 포트번호는 몇번이 열리는지 모른다.(랜덤하게 열린다)

Tomcat 설치

00

  • 톰캣 링크
    • 다운로드에 있는 Windows Service Installer는 웹 서비스를 가용할 때 사용
    • 보통 zip을 사용해서 개발
  • 이클립스 Servers에 등록해서 HTML파일을 실행할 때 서버를 구동한다.

HTML(HyperText Markup Language)

  • Markup - 본문에서 특정 부분을 강조하여 보여주기 위한 것
  • Tim Berners Lee가 고안
  • HTML5가 현재 최종 버전
    • W3C(World Wide Web Consortium) 에서 표준안 제정, 공표
  • Web Browser에서만 동작하는 언어
    • 연산의 기능이 없다.
    • compile을 하지 않고 Tag를 그려서 보여주는 언어
      • Error가 발생하지 않는다.
        • 문제가 발생한 코드를 찾기 어려움

01

  • HTML은 SGML언어에서 파생된 언어
    • SGML(Standard Generalized Markup Language)
      • (위키)문서용 마크업 언어를 정의하기 위한 메타 언어
      • Markup 언어를 작성할 수 있는 언어
    • SGML에서 HTML과 XML이 파생됨
      • XML(eXtensible Markup Language)
        • Tag를 개발자가 마음대로 정의하고 만드는 언어
        • DTD(Document Type Definition, 문서 형식 정의)가 없다.
        • 프로그램의 환경설정용 또는 이기종 언어간의 데이터 전달용
  • HTML5
    • 4.01과는 다르게 구조와 디자인을 분리했다.
      • HTML - 구조
        • 사용자에게 보여주는 화면 구성용
      • CSS - 디자인
      • JS - 연산, 화면을 동적으로 변경(DOM), 유효성 검증
  • 저장시 .html 의 확장자를 가진다.
  • MarkUp Language는 Tag언어
    • Element - 시작 태그(열림태그)와 끝 태그(닫힘태그)로 구성
    • DTD가 존재
      • 지정된 Tag만 사용가능
      • 태그의 종류와 속성, 정의 순서등이 선언된 문서
<태그명>내용</태그명>
  • 태그 사이값이 없을 때 아래처럼 닫힘태그를 안쓸 수 있다.
<태그명/>
  • 작성법
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> <!-- 웹에서 EUC-KR은 잘 안쓴다 -->
        <title>탭에 들어갈 내용</title>
    </head>
    <body>
        사용자에게 보여줄 내용
    </body>
</html>
  • HTML 특징
    • 태그 대소문자 구분안함
    • Tag는 중첩정의가 된다.
    • 줄변경이 안된다.
    • 열림태그와 닫힘태그는 짝으로 정의
<body>
안녕하세요?
오늘은 수요일 입니다.
내일은 금요일 입니다.
</body>

02

HTML Tags

  • 주석
    • 마크업 언어의 주석은 모두 동일
<!-- 주석내용 -->
  • 줄변경 태그 : <br>
문자열A<br/>문자열

03

  • 문단 태그 : <p>
<p>문단1</p>
<p>문단2</p>
<p>문단3</p>

04

  • 마크업 태그
    • <big> 글짜 크게 (HTML5에서는 지원하지 않는다.)
    • <small>글짜 작게
    • <center> 가운데 정렬 (HTML5에서는 지원하지 않는다.)
    • <u> 밑줄 (HTML5에서는 지원하지 않는다.)
    • <b> - 진하게
    • <string> - 진하게(권장)
    • <strike> - 취소선 (HTML5에서는 지원하지 않는다.)
    • <i> - 이탤릭체(잘 안쓰임)
    • <sup> - superscript(위첨자)
    • <sub> - subscript(아래첨자)
    • <mark> - 하이라이트 (HTML5부터 새로 지원)
      • HTML5에서 지원하지 않는 태그의 기능은 가급적이면 CSS로 구현
<body>
특정 부분을 강조하여 보여주는 태그들!<br>
<!--  Markup 언어의 주석입니다. -->
일반글자<br>

<!-- big : 글자를 크게(HTML5에서 지원하지 않음) -->
<big>빅!</big><br>

<!--  중복적용가능 -->
<big><big><big>빅빅빅</big></big></big><br>
<big><big><big><big><big><big>빅*6</big></big></big></big></big></big><br>

<!--  small : 글자 작게 -->
<small>스몰..</small><br>

<!-- center : 가운데 정렬(HTML5에서는 지원하지 않는다.)  -->
<center>가운데 정렬</center><br>

<!-- u : 밑줄(HTML5에서는 지원하지 않는다.) -->
<u>언더라인</u><br>

<!-- b : 진하게 -->
<b>볼드!</b><br>

<!-- strong : 진하게(권장) -->
<strong>스트롱</strong><br>

<!-- strike : 취소선(HTML5에서는 지원하지 않는다.) -->
<strike>스트라잌</strike><br>

<!-- i : 이탤릭체 -->
<i>이탤릭</i><br>

<!-- sup : 위첨자 -->
테스트<sup>위첨자</sup>테스트<br>

<!-- sub : 아래첨자 -->
테스트<sub>아래첨자</sub>테스트<br>

<!-- mark : 하이라이트(HTML5부터 새로 지원) -->
<mark>마크</mark>
</body>

06

  • 이클립스에선 HTML5에서 지원하지 않는 태그들엔 경고가 나타난다.

05


HTML