Gom's

공부하는 햇병아리

[HTML] WEB과 HTML

작성일     업데이트:

카테고리:

태그:

WEB

WEB이란

웹(WEB)이란 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간이며 인터넷의 통신망 위에서 작동하는 서비스이다

  • 웹 표준이란

    • 팀 버너스리가 웹 표준단체 W3C를 창설해 2014년 HTML5를 정식 배포했다
    • 모든 브라우저에서 웹 서비스가 정상적으로 보여질 수 있도록 하는것
    • 각기 다르게 보여지면 사용자만 피해를 보게 되므로 웹 표준안으로 HTML5를 권고
    • MS를 제외하고 타사는 적극적으로 받아들였다
    • MS는 신버전에서 웹 표준을 받아들임


HTML

HTML이란

웹에서 정보를 표현할 목적으로 만든 마크업 언어(Hyper Text Markup Language)이다
웹페이지를 작성하기 위해 사용되며 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석 기호인 태그들로 이루어져 있다

  • 마크업(태그) : 문서의 논리적인 구조를 정의하고 출력장치 상 어떤 형태로 보일 것인지 지시하는 역할
  • 마크업 언어(html 등) : 마크업(태그)의 형식과 규칙을 정의한 언어


HTML5의 특징

  • 구조적 설계를 지원한다(시멘틱)
  • 그래픽 및 멀티미디어 기능 강화
  • CSS3 및 JavaScript 지원
  • 다양한 API 제공
  • 모바일 웹 지원 및 장치 접근 가능(배터리 정보, 카메라, GPS 등)
  • 웹 브라우저가 서버와 양방향 통신 가능
  • 인터넷이 연결되지 않은 상태에서도 어플리케이션 동작


HTML5 구성 요소

  • 태그(Tag)
    • <> 로 묶인 명령어로 시작태그와 종료태그를 한쌍으로 이용한다
  • 요소(Element)
    • 시작태그와 종료태그로 이루어진 모든 명령어이다
    • 하나의 html 문서는 이러한 요소들의 집합
  • 속성(Attribute)
    • 요소의 시작태그에만 사용하며 명령의 구체화 역할을 한다
    • 명령어의 구체화 역할을 한다
    • 여러개의 속성을 사용할 수 있다
    • 속성들의 구분은 공백으로 한다

  • 변수/속성값(Argument)

    • 속성이 가지는 값
    • 값 입력시 “” 혹은 ‘’ 를 이용한다
  • 주의사항
    • 태그는 대/소문자를 구분하지 않으나 소문자를 권장한다
    • 시작 태그로 시작하면 반드시 종료태그로 종료해주어야 한다
    • 파일 확장자는 반드시 html, htm으로 설정해야 한다
    • 문자의 공백은 몇개를 입력하더라도 하나로만 인식한다
      => 공백을 연달아 추가하고자 한다면 특수기호 &nbsp;를 이용하면 된다


HTML5 기본 구조

<!DOCTYPE html>
<!-- html 문서 형식 선언 : HTML5 형식이라는걸 알려주기 위한 태그 -->
<html lang="ko">
  <!-- html 문서의 시작과 끝을 표시해주는 태그, lang 속성은 
       이 문서가 어느나라 언어로 되어있는지 표시 -->
  <head>
    <!-- head 머리부를 나타냄 : 해당 문서의 각종 정보와 제목, 
                              설명 및 스크립트, 스타일시트의 링크를 표시한다
                              <title>,<meta>,<link>,<script>...-->
    <meta charset="UTF-8" />
    <meta name="generator" content="VScode" />
    <!-- 현재 문서를 생성한 프로그램에 대한 정보-->
    <meta name="author" content="gom" />
    <!-- 문서의 저자를 표시 -->
    <meta name="keywords" content="글자, 태그" />
    <!-- 이 문서를 나타내는 키워드 정보 표시-->
    <meta
      name="description"
      content="이 문서는 글자와 관련된 태그들을 공부하는 페이지입니다"
    />
    <!-- 문서에 대한 설명을 해주는 태그 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- viewport 해당 문서가 반응형일지 아닐지 표시 
        initial-scale :  화면이 보여지는 배율 표시 -->
    <title>글자 관련 태그</title>
    <!-- 문서의 제목 표시-->
  </head>
  <body>
    <!-- 화면에 출력해서 보여주는 모든 정보/내용을 작성한다
         head에 들어가는 태그를 제외하고 모든 태그를 사용하면 됨 -->
  </body>
</html>


[ head 태그 내부에서 사용되는 태그들 ]

  • <meta>

    • 헤더 내부에서 사용하는 태그이다
    • 메타데이터로 html문서가 가지고 있는 유용한 정보를 담아두며, 문서의 정보를 검색 엔진에 전달하기도 한다
    • 사용법 : <meta name/http-equiv: "속성명" content="속성내용">
    • 속성 종류
      • application-name : 웹어플리케이션 이름
      • author : 페이지의 저자
      • description : 페이지를 설명하는 내용
      • generator : 페이지를 생성한 프로그램 표시
      • keywords : 검색어로 사용되며 ,로 구분하여 여러 단어 입력가능
      • robots : 검색로봇의 검색제한(index, follow로 나누어 설정한다)

  • <title>

    • 페이지 제목을 나타내는 태그

  • <link>

    • 문서를 외부의 문서와 연결하기 위해 사용한다
    • CSS파일이나 웹 폰트 사용시 주로 해당 태그로 연결시키게 된다
    • 사용법 : <link rel = "관련 속성" type = "MIME" href = "문서위치"/>
    • 속성 종류
      • href : 연결할 파일의 경로 지정
      • rel : 링크가 형성하는 관계 지정
      • media : 연결문서가 표시될 장치 또는 미디어 유형
      • type : MIME 타입 지정

  • <style>

    • 태그의 스타일을 지정해주는 태그로 CSS속성을 HTML내에 직접 쓸때 사용한다
    • 해당 태그 내부에서는 CSS문법을 사용하여 CSS속성을 작성할 수 있다

  • <base>

    • 페이지의 링크가 상대경로로 될 경우 그 기준이 될 경로를 지정한다
    • 링크를 어떻게 오픈할것인지 설정 가능하다
    • 사용법 : <base href = "경로" [target = "키워드"]>
    • target 키워드 종류
      • _self : 그 위치에서 열기
      • _blank : 새 창으로 열기
      • _parent : 링크의 바로 상위 페이지에서 열기
      • _top : 최상위 페이지에서 열기
      • 위에서 _parent와 _top은 잘 쓰이지 않으며 주로 _blank가 많이 쓰인다

HTML 카테고리 내 다른 글 보러가기

댓글남기기

최근 글 10 개