Ch.Covelope

HTML 이란? 본문

HTML

HTML 이란?

Chrysans 2021. 10. 5. 20:14
728x90
반응형

 

HTML 이란?

 

 

 

 

HTML 은 Hyper Text Markup Language 약어로 웹의 최소 단위인 웹페이지를 만드는 언어입니다.
다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.


 

HTML 특징

 

 

 

  • 웹 문서의 표준이다.
  • 웹호환성과 접근성이 우수하다.
  • 유지보수가 용이하다.

 

  • 컴파일 되지 않은 텍스트 문서로서 편집이 용이하다.
  • 별도의 전용 프로그램이 아닌 간단한 메모장과 같은 편집기로도 충분하다.

 

  • 마크업 언어.
  • 파일 용량이 작아 클라이언트-서버 간 빠른 문서 전달이 가능하다.

 

  • 시스템과 운영체제에 독립적
  • 어떤 시스템/브라우저에서도 사용이 가능하다.

 

  • 구조가 단순하고 문법이 쉽다.
  • 다른 언어들보다 단순한 구조를 가지고 있으며 연산적인 요소가 적다.

 

 

 

 

HTML 문서 작성을 위한 기본 문법

 

HTML 문서인 웹 페이지는 head 영역과 body 영역으로 구성됩니다.
문서의 타이틀(title) 은 웹 페이지의 제목으로 브라우저 탭에 표시됩니다.


 

 

구성요소

 

 

 

 

 

  • 요소(Elements) : 시작과 종료를 나타내는 태그로 이루어진 모든 명령어

  <title>              제목             </title>

(Start tag)     (Content)      (End tag)

 

 

  • 태그(Tag) : '<'와 '>'로 둘러싸인 요소의 일부

<title> 제목 </title>

 

※  </닫는태그> 가 없는 태그 = 단일 태그 (empty element)

닫는 태그가 없는 태그(tag) 들도 존재한다.

예 <br> , <mete> 등인데 <br /> 이런식으로 닫는 태그를 포함하여 표현할수도 있다.

 

 

 

  • 속성(Attributes) : 요소의 시작태그 내에 사용하며, 명령어를 구체화 시키는 역할

<img src = "주소">

 

 

 

  • 변수(Arguments) : 속성과 관련된 값

<font size = "10">

 

 



 

태그의 중첩

 

 

태그는 중청도 가능한데. ( <태그> <태그1> ~ </태그1> </태그> )

이런식으로 사용가능하다.

 

 

예시

 

<!-- ordered list 번호가 붙는다 -->
<ol>
    <li>번호1</li>
    <li>번호2</li>
</ol>

<!-- unordered list 번호가 붙지 않는다 -->
<ul>
    <li>번호없음</li>
    <li>번호없음</li>
</ul>

 

 

결과물

 

<ol> = ordered list 의 약어로 1,2,3,4 ... 순으로 번호가 매겨진다.

<ul> = unordered list 의 약어로 순자가 아닌 점으로 표현된다.

 

 

 

 

HTML 의 기본구조

 

 

 <!DOCTYPE html>          <!-- 현재 문서가 HTML5 문서임을 명시합니다. -->

<HTML>                    <!-- HTML 문서의 시작 -->

<HEAD>                    <!-- HTML 문서의 설명(title, meta, link, script 등) -->

<TITLE> 기본구조 </TITLE>

</HEAD>

<BODY>                    <!-- HTML 문서의 본문 -->

본문내용

</BODY>

</HTML>                   <!-- HTML 문서의 끝 -->

 

 

<!DOCTYPE html> : 브러우저에게 문서 유형을 알려주는 선언

페이지 상단 html 태그 이전에 한번만 표시한다.

 

 

<html> : HTML 문서의 루트(root) 요소를 정의합니다.

 

<head> : HTML 문서의 메타데이터(metadata)를 정의합니다.

- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.

- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있습니다.

 

<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.

- 웹 브라우저의 툴바(toolbar)에 표시됩니다.

- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.

- 검색 엔진의 결과 페이지에 제목으로 표시됩니다.

 

<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.

 

 

 

728x90
반응형

'HTML' 카테고리의 다른 글

멋쟁이 사자처럼 <HTLM> 수업하기!  (0) 2021.11.03
멋쟁이 사자처럼 <Front_end>과정 2일차  (0) 2021.11.01
HTML 태그(tag)  (0) 2021.10.07
공유하기 링크
'HTML' Related Articles more
Comments