HTML: 두 판 사이의 차이

링크 편집
위키백과, 우리 모두의 백과사전.
입체적으로 역사 찾아보기
← 이전 편집다음 편집 →
내용 삭제됨 내용 추가됨
시각위키텍스트
편집 요약 없음
태그: 되돌려진 기여 m 모바일 웹
편집 요약 없음
태그: 되돌려진 기여 m 모바일 웹
1번째 줄: 1번째 줄:
{{위키데이터 속성 추적}}
{{프로그래밍 언어 정보
|이름 = HTML<br /><small>{{nowrap|(HyperText Markup Language)}}</small>
|로고 = HTML5 logo and wordmark.svg
|패러다임 =
|설계자 =
|개발자 = [[W3C]]와 [[WHATWG]]
| released = {{시작 날짜와 나이|1993|df=yes}}
| latest release version = [https://html.spec.whatwg.org/ Living Standard]
| latest release date = 2022년
|형 체계 =
|구현체 = TEXT/HTML
|방언 =
|영향을 받은 언어 = [[SGML]]
|영향을 준 언어 = [[XHTML]]
|운영 체제 =
|라이선스 =
|웹사이트 =http://www.w3.org/
|저장 방식 = .html, .htm
}}
{{HTML}}
'''하이퍼 텍스트 마크업 언어'''({{llang|en|Hyper Text Markup Language, '''HTML'''}}, {{문화어|초본문표식달기언어, 하이퍼본문표식달기언어}})는 [[웹 페이지]] 표시를 위해 개발된 지배적인 [[마크업 언어]]다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 [[구조적 문서]]를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하여 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 [[괄호#꺾쇠 괄호|꺾쇠 괄호]]에 둘러싸인 "태그"로 되어있는 [[HTML 요소]] 형태로 작성한다. HTML은 [[웹 브라우저]]와 같은 HTML 처리 장치의 행동에 영향을 주는 [[자바스크립트]], 본문과 그 밖의 항목의 외관과 배치를 정의하는 [[CSS]] 같은 [[스크립트 언어|스크립트]]를 포함하거나 불러올 수 있다. HTML과 CSS 표준의 공동 책임자인 [[W3C]]는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.<ref name="deprecated">[http://www.w3.org/TR/html401/conform.html#deprecated HTML 4 — Conformance: requirements and recommendations]</ref>

== 마크업 ==
== 마크업 ==
[[파일:Html-source-code3.png|프레임|오른쪽|HTML 4 구문 강조]]
[[파일:Html-source-code3.png|프레임|오른쪽|HTML 4 구문 강조]]

2024년 4월 9일 (화) 11:26 판

마크업

HTML 4 구문 강조

HTML 마크업은 HTML 요소(엘리먼트, Elements)와 그들의 속성(Attributes)과 문자 기반 데이터 형태와 문자 참조와 엔티티 참조를 포함하는 몇 가지 핵심 구성 요소로 이루어져 있다. 또 다른 중요한 구성 요소로는 문서 형식 정의(DTD, Document Type Definition)를 명시하는 문서 형식 선언(document type declaration)이다. 차기 HTML 5에서는 DTD를 지정하지 않아도 되고 오직 레이아웃 모드로 지정된다 [1].

Hello world 프로그램은 프로그래밍 언어와 스크립트 언어 그리고 마크업 언어를 비교하기 위해 사용되는 일반적인 컴퓨터 프로그램이다. 그리고 HTML에서의 Hello world 프로그램은 단 9줄에 불과하다: 

<!doctype html>
<html>
  <head>
    <title>Hello HTML</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

(<html>과 </html>사이의 문자는 웹 페이지를 표현한다. <body>와 </body>사이의 문자는 표시되는 페이지의 내용이며, <head>와 </head>사이의 문자는 눈에는 보이지 않지만 웹 페이지를 표현하기 위해 필요한 해더 정보를 담고 있다.<title>과 </title>사이의 문자는 웹 브라우저의 페이지 제목을 정의하는데 사용된다.)
Hello world 프로그램을 최대로 짧게 만들고 싶다면: 

Hello world

이라고 해도 되지만, 웹 표준에 위배된다.이 문서 형식 정의는 HTML 5이다. 만약 <!doctype html>로 선언하지 않은 경우 대다수의 브라우저는 "쿽스 모드"로 렌더링한다.[1]

HTML 요소

<nowiki /> 이 부분의 본문은 HTML 요소입니다.

HTML 문서는 완전한 HTML 요소로 구성되어 있고, HTML 요소의 가장 보편적인 형태는 세 가지 구성 요소를 가진다: "시작 태그"(Start Tag)와 "종료 태그"(End Tag) 와 같은 태그 한 쌍; 몇 가지 요소 속성은 그 태그들 내에서 특성을 부여한다. 마지막으로 문자와 그래픽 정보 콘텐츠를 화면에 표현한다.

HTML 요소는 태그의 사이와 포함되는 모든 것이다. 태그는 꺾쇠괄호(<>)로 둘러싸인 키워드이다.

HTML 요소의 일반적인 형태

<tag>보이는 내용</tag>

HTML 요소의 이름은 태그의 이름이다. 그리고 종료 태그의 이름은 슬래시 문자 ("/")로 시작된다.

HTML 요소의 가장 보편적인 형태

<tag attribute1="value1" attribute2="value2">보이는 내용</tag>

속성이 주어지지 않는다면 시작 태그의 기본값을 사용하게 된다.

태그의 기본적인 형태

HTML의 머리부분 (<head>...</head>), 보통 제목은 <head>의 안에 포함된다. 예제: 

<head>
<title>제목</title>
</head>

단락 구획

<p>단락 1</p> <p>단락 2</p>

새 줄(<br>), <br> 와 <p> 간의 차이점은 'br'은 페이지의 의미론적 구조를 변경하지 않는 줄바꿈(breaks a line)인 반면 'p'는 단락으로 페이지를 구분한다. 

<code><p>이것은 <br /> 줄바꿈을 <br /> 포함하는 <br /> 단락이다. </p></code>

주석 사용

<!--..설명!..-->

주석은 코딩을 이해하는데 도움을 줄 수 있지만 웹 페이지에는 표시되지 않는다.

HTML에서 사용되는 마크업 요소의 형태

  • 구조적 마크업은 본문의 목적을 표현한다. 예를 들어, <h2>골프</h2>는 "골프"를 두 번째 수준의 제목으로 규정한다. 그리고 그것은 브라우저에서 이 장의 처음에 나오는 HTML 마크업 제목과 유사한 방식으로 해석될 것이다. 구조적 마크업은 어떤 특정한 렌더링을 표시하지 않지만, 대부분의 웹 브라우저는 요소 포맷팅에 대한 기본적인 스타일을 표준화했다. 텍스트는 캐스캐이딩 스타일시트(CSS)로 더 꾸밀 수 있다.
  • 표현적 마크업은 기능에 관계없이 본문의 외관을 표현한다. 예를 들어, <b>굵은 글씨</b>는 시각적 결과 장치가 굵은 글씨 속에 있는 "boldface"를 해석해야 한다는 것을 지시하지만, 이것을 할 수 있는 장치가 무엇을 해야 할 지(예를 들어 텍스트를 크게 읽어주는 장치와 같은 )에 대한 어떠한 지시도 하지 않는다. <b>굵게</b>와 <i>이탤릭</i>과 같은 경우에는 보통 시각적 해석에 필적하는 여러 가지 요소가 있지만, 본래가 더 의미론적이다. 즉, 각각 <strong>strong emphasis</strong>와 <em>emphasis</em>같이 할 수 있다. 음성 사용자 에이전트가 어떻게 후자의 두 요소를 해석하는 지 지켜보는 것은 쉽다. 그러나 그것은 그들의 표현 상대와 맞먹지는 않는다. 예를 들자면 책의 이름을 강조하는 것이 스크린을 읽는 유저에게는 바람직하지 않지만, 화면에서 그러한 이름이 이탤릭체로 될 것이다. 대부분의 표현 마크업 요소는 스타일 디자인에 근거한 CSS에 호응해서 HTML 4.0 스펙에서는 받아들여지지 않을 것이다.
  • 하이퍼텍스트 마크업은 다른문서와 연결시켜주는 문서의 부분이다. XHTML 1.1 버전을 통한 HTML은 본문속에서 하이퍼링크를 생성하기 위해 anchor 요소(<a>위키백과</a>)의 사용을 필요로 한다. 덧붙여, href 속성은 반드시 정확한 URL을 설정해야만 한다. 예를 들어, HTML 마크업인 <a href="https://ko.wikipedia.org/">한국어 위키백과</a>는 하이퍼링크로써 "한국어 위키백과"처럼 보일 것이다.
    • 하이퍼링크로써 이미지를 표현하는 예제 
      <a href="http://example.org"><img src="image.gif" alt="alternative text" width="50" height="50"></a>

주요 HTML 요소들

<nowiki /> 이 부분의 본문은 HTML 요소입니다.
<br>
줄바꾸기
<p>
단락바꾸기(한줄 떨어짐)
<hr>
가로줄
<center>...</center>
...을 가운데 정렬
<font>...</font>
...의 폰트를 바꿈
<ul><li>...<li>...</ul>
...을 순서없는 목록으로 만듦(기본: 까만동그라미)
<ol><li>...<li>...</ol>
...을 순서있는 목록으로 만듦(기본: 숫자)
<table></table>
표만들기
<tr></tr>
행(<table>...</table>...에 넣는다)
<td></td>
열(<tr>...</tr> ...에 넣는다)
<td colspan=숫자></td>
그 셀부터 숫자만큼의 오른쪽 셀을 병합한다
<td rowspan=숫자></td>
그셀부터 숫자만큼의 아래쪽 셀을 병합한다

속성

대부분의 요소 속성들은 이름-값 형태이고, "="로 구분하고, 요소의 시작 태그 안에서 요소의 이름 다음에 쓰인다. 값은 외따옴표 또는 쌍따옴표로 둘러쌀 수 있다. 비록 어떤 문자로 구성된 값들이 HTML에서 인용부호 없이 사용될 수도 있지만(XHTML에서는 허용되지 않음), 그 값은 따옴표나 쌍따옴표 또는 쌍 인용부호로 둘러쌀 수 있다.[2][3] 인용부호를 사용하지 않고, 속성값을 사용하는 것은 안전하지 않다.[4] 이름값 쌍 속성과 대조하여, 요소 태그의 시작에 단순히 그 존재만으로도 영향을 끼칠 수 있는 태그가 있다.[5][7]

대부분의 요소는 몇 가지 일반적인 속성을 가질 수 있다.

  • id 속성은 요소에 대한 문서 전체의 고유 식별자를 제공한다. 이것은 스타일시트에 의해 외관적인 특성을 제공하고, 브라우저에 의해 특정 요소를 처리하거나 스크립트에 의해 요소의 내용이나 외관을 바꿀 수 있다. 페이지의 URL에 달려 있는 것처럼, 보통 페이지 다음에 오는 요소에 대한 세계에서 유일한 식별자를 부여한다. 예를 들어, https://en.wikipedia.org/wiki/HTML#Attributes 에 있는 ID 속성과 같다.
  • class 속성은 유사한 요소를 분류하는 방법을 제공한다. 이것은 어휘적 또는 표현적 목적으로 사용될 수 있다. 예를 들어, 어휘적으로 분류는 미세 포맷에 사용된다. 표현적 목적으로 HTML 문서는 class="notation"과 같은 지정자에서, 이 class 값을 갖는 모든 요소는 문서의 주 텍스트에 종속된다는 것을 지시한다. 이러한 요소는 HTML 소스에서 나타났던 장소에 나타나는 대신에 함께 모여서 페이지에서 각주와 같이 표현된다.
  • 작성자는 특정 요소에 표현적 속성을 지닌 style 비 속성 코드를 사용할 것이다. 단순하고, 특정한 또는 특수한 스타일 속성을 가진 애플리케이션에서는 너무 성가시긴 하지만, 스타일시트로 속성을 선택할 때는 요소의 id나 class 속성을 사용하는 것이 더 낫다고 간주된다.
  • title 속성은 요소에서 숨겨진 뜻을 설명하는 글을 첨부하는 곳에 사용된다. 대부분의 브라우저의 이 속성은 자주 툴팁과 같이 참조하는 것처럼 보인다.

단축 요소(abbr)는 아래와 같이 다양한 속성을 설명하는데 쓰일 수 있다: 

<abbr id="anId" class="aClass" style="color:blue;" title="하이퍼텍스트 마크업 언어">HTML</abbr>

이 예제는 대부분의 브라우저에서 HTML처럼 보인다. 이 단축에 커서를 가리키면 그 제목인 "하이퍼텍스트 마크업 언어"가 보일 것이다.

대부분의 요소 또한 언어와 관련된 속성인 lang과 dir을 취한다.

데이터 형식

HTML은 스크립트 데이터와 스타일시트 데이터, 그리고 ID, 이름, URI, 숫자 길이의 단위, 언어, 미디어 기술자, 색상, 문자 인코딩, 날짜와 시간 등을 포함하는 속성 값의 종류를 위한 몇 가지 데이터 형태를 정의 내린다. 이러한 모든 데이터 형식은 문자 데이터를 최적화하기 위하여 분리되었다.

문서 형식 선언

HTML 문서는 문서 형식 선언 (비공식적으로, "doctype")으로 시작해야 한다. 브라우저에서 doctype의 기능은 렌더링 모드를 지시하는 것이며, 부분적으로는 쿼크 모드를 피하기 위한 목적도 있다.

doctype의 원래의 목적은 문서 형식 정의 (DTD)에 기반한 SGML 도구를 통하여 HTML 문서의 파싱과 유효 여부 확인을 가능하게 하려는 것이었다. DOCTYPE에 대한 DTD는 DTD에 순응하는 문서를 가진 허용 또는 금지된 내용을 지정하고 기계가 읽을 수 있는 문법을 포함하도록 지시한다. 반면 브라우저는 HTML을 SGML의 애플리케이션으로 수행하지 않으며, 결과적으로 DTD를 읽지 않는다. HTML 5는 기술적인 제한으로 인해 DTD를 정의하지 않는다. 그래서 HTML5에서 doctype 선언 <!doctype html>는 DTD를 참조하지 않는다.

HTML 4 doctype의 예제는 다음과 같다. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

이런 선언은 엄격한 HTML 4.01을 만들기 위해 DTD를 참조한다. 이것은 선언적인 요소인 font 같은 요소는 포함하지 않으며, CSS나 span, div 요소는 유지한다. SGML 기반의 유효 확인자(validator)들은 문서를 적절히 해석하거나, 유효 여부 확인을 실행하기 위해 DTD를 읽는다.

최근의 브라우저에서 이 doctype은 쿼크 모드에 반대되는 표준 모드를 활성화한다.

게다가 HTML 4.01은 임시적이고 프레임 단위의 DTD를 제공한다.

시맨틱 웹

<nowiki /> 이 부분의 본문은 시맨틱 웹입니다.

전송

HTML 문서를 다른 컴퓨터 파일과 같은 방법으로 전송할 수 있다. 하지만 HTML 문서들은 대부분 웹 서버에 의한 HTTP나 또는 이메일을 통하여 전송된다.

HTTP

월드 와이드 웹은 주로 웹 서버에서 하이퍼텍스트 전송 프로토콜 (HTTP)을 이용하는 웹 브라우저로 전송되는 HTML 문서를 위해 고안되었다. 그러나 HTTP는 HTML 이외에도 이미지나 소리, 그리고 기타 내용물을 서비스하는 데 사용된다. 브라우저가 받는 각 문서를 어떻게 다른지 알려주게 하기 위해, 다른 정보가 문서와 함께 전송된다.

이 메타데이터는 보통 MIME 타입 (예, text/html or application/xhtml+xml)과 문자 인코딩을 포함한다. (HTML에서 문자 인코팅 참조)

최근의 브라우저에서 HTML 문서와 함께 전송되는 MIN 타입은 문서가 초기에 어떻게 해석해야 하는 지에 대한 영향을 끼칠 것이다. XHTML MIME 타입과 함께 전송된 문서는 잘 구성된 XML로 기대되며, 문법 오류는 브라우저가 그것을 해석하지 못하게 할 것이다. HTML MIME 타입과 함께 전송된 동일 문서가 HTML에 관대한 브라우저에서는 성공적으로 출력될 것이다.

W3C 권고안에서는 권고안 부록 C에 나오는 가이드라인을 따르는 XHTML 1.0 문서는 MIME 타입으로 표시될 것이다.[8] 현재의 XHTML 1.1 작업 초안은 또한 XHTML 1.1 문서는 MIME 타입으로 표시될 것이라고 언급하고 있다.[9][10]

HTML 전자 우편

<nowiki /> 이 부분의 본문은 HTML 전자 우편입니다.

대부분의 그래픽 이메일 클라이언트는 단순 텍스트로는 불가능한 어휘적 마크업과 형식을 제공하기 위해 종종 정의되지 않는 HTML 부분집합 사용을 허용한다. 이것은 색상 제목, 강조, 인용문, 인라인 이미지와 도표와 같은 인쇄정보를 포함한다. 그러한 많은 클라이언트들은 HTML 이메일 메시지를 작성하는 GUI 편집기와 그것을 해석하여 보여주기 위한 렌더링 엔진을 포함한다. 그러나 전자 메일에서 HTML를 포함시키는 것은 호환성 문제와 관련되어 있기 때문에 논쟁의 대상이 된다. 그 이유는 피싱 공격의 은닉을 도와줄 수 있고, 스팸 필터를 혼동시킬 수 있으며, 또한 단순 텍스트보다 크기가 더 커지기 때문이다.

명명 규칙

웹 문서의 가장 일반적인 파일 확장자는 .html이다. 일반적으로 줄여서 .htm라고도 하며, DOS나 FAT와 같은 초기 운영 체제와 파일 시스템이 파일 확장자를 3자로 제한했기 때문이다.

HTML 애플리케이션

<nowiki /> 이 부분의 본문은 HTML 애플리케이션입니다.

HTML 애플리케이션 (HTA; 파일 확장자 ".hta")는 애플리케이션의 그래픽 인터페이스를 제공하기 위해 브라우저에서 HTML과 DHTML을 사용하는 윈도우용 애플리케이션이다.

정상적인 HTML 파일은 웹 서버와 통신하면서, 웹페이지 객체와 HTTP 쿠키만 다루는 웹 브라우저의 보안 모델에 제한된다. HTA는 완벽히 신뢰된 애플리케이션으로 동작하기 때문에 파일의 생성/편집/제거와 윈도우 레지스트리 엔트리에 보다 더 많은 특권을 가진다. 그 까닭은 그것은 브라우저의 보안 모델 외부에서 작동하기 때문이다. HTA는 HTTP를 경유하여 실행되지 않지만, 실행 파일과 같이 다운로드가 될 수 있으며, 로컬 파일 시스템에서 실행된다.

위지위그 편집기

<nowiki /> 이 부분의 본문은 위지위그입니다.

몇 가지 위지위그(What You See Is What You Get, WYSIWYG) 편집기는 HTML 문서를 그래픽 사용자 인터페이스를 이용하여 직관적으로 나타내고 편집기가 HTML 문서로 생성하여 더 이상 사용자가 HTML에 대한 광대한 지식을 가질 필요가 없게 되었다.

웹 페이지 편집은 위지위그 편집 방식이 압도적으로 우위에 있었다. 하지만 이 방식은 생성된 코드의 질이 낮았고 위지윔(What Your See IS What You Mean, WYSIWIM)방식으로의 변화를 옹호하는 목소리 늘어났기 때문에 비난을 받았었다.[11][12]

위지위그 편집기는 다음과 같은 결함 때문에 논쟁의 여지가 있는 논제이다.

  • 주로 의미와는 상반된 레이아웃에 의존하며, 종종 의도된 의미를 전달하지 않고, 단순히 레이아웃을 복사만 하는 마크업을 사용한다.[13]
  • 종종 HTML의 케스케이딩 성질과 CSS를 사용하지 못하게 하는 잡다하고 중복되는 코드를 생성한다.
  • 종종 태그 수프라고 불리는 비문법적인 마크업을 생성한다.
  • HTML 문서의 많은 정보는 레이아웃에 있는 것이 아니기 때문에 그러한 모델은 그것의 위지위그 본질에 대해 비난을 받아왔다.[14]

그럼에도 불구하고 위지위그 편집기가 페이지를 작성하는데 편리함을 제공할 뿐만 아니라 저자들의 HTML에 대한 상세한 전문적 지식을 요구하지 않기 때문에 여전히 위지위그 방식이 웹 저작을 지배하고 있다.

예제

<!DOCTYPE html>
<html>
  <head>
    <title> Hello World</title>
  </head>
  <body>
    <p> Hello World </p>
  </body>
</html>

Hello World를 타이틀, 메인페이지에 출력하기.

같이 보기

각주

  1. ↑ Activating Browser Modes with Doctype
  2. ↑ “On SGML and HTML”. 월드와이드웹 컨소시엄. 2010년 3월 7일에 확인함. 
  3. ↑ “XHTML 1.0 - Differences with HTML 4”. 월드와이드웹 컨소시엄. 2010년 3월 7일에 확인함. 
  4. ↑ Korpela, Jukka (1998년 7월 6일). “Why attribute values should always be quoted in HTML”. Cs.tut.fi. 2008년 11월 21일에 원본 문서에서 보존된 문서. 2010년 3월 7일에 확인함. 
  5. ↑ “Tags used in HTML”. 월드와이드웹 컨소시엄. 1992년 11월 3일. 2010년 3월 7일에 확인함. 
  6. ↑ “Objects, Images, and Applets in HTML documents”. 월드와이드웹 컨소시엄. 1999년 12월 24일. 2010년 3월 7일에 확인함. 
  7. ↑ img 요소에서[6] ismap 속성과 같이.
  8. ↑ “XHTML 1.0 The Extensible HyperText Markup Language (Second Edition)”. World Wide Web Consortium. 2000. 2008년 12월 7일에 확인함. XHTML Documents which follow the guidelines set forth in Appendix C, "HTML Compatibility Guidelines" may be labeled with the Internet Media Type "text/html" [RFC2854], as they are compatible with most HTML browsers. Those documents, and any other document conforming to this specification, may also be labeled with the Internet Media Type "application/xhtml+xml" as defined in [RFC3236]. 
  9. ↑ “RFC 2119: Key words for use in RFCs to Indicate Requirement Levels”. Harvard University. 1997. 2008년 12월 6일에 원본 문서에서 보존된 문서. 2008년 12월 7일에 확인함. 3. SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course. 
  10. ↑ “XHTML 1.1 - Module-based XHTML - Second Edition”. World Wide Web Consortium. 2007. 2008년 12월 7일에 확인함. XHTML 1.1 documents SHOULD be labeled with the Internet Media Type text/html as defined in [RFC2854] or application/xhtml+xml as defined in [RFC3236]. 
  11. ↑ Sauer, C.: WYSIWIKI - Questioning WYSIWYG in the Internet Age. In: Wikimania (2006)
  12. ↑ Spiesser, J., Kitchen, L.: Optimization of html automatically generated by WYSIWYG programs. In: 13th International Conference on World Wide Web, pp. 355--364. WWW '04. ACM, New York, NY (New York, NY, USA, May 17-20, 2004)
  13. ↑ “XHTML Reference: blockquote”. 2010년 3월 25일에 원본 문서에서 보존된 문서. 2010년 3월 12일에 확인함. 
  14. ↑ Doug Engelbart's INVISIBLE REVOLUTION

외부 링크

위키미디어 공용에 관련된
미디어 분류가 있습니다.
위키책에 이 문서와
관련된 문서가 있습니다.
위키배움터에
관련된 자료가 있습니다.
위키배움터에
관련된 자료가 있습니다.
원본 주소 "https://ko.wikipedia.org/w/index.php?title=HTML&oldid=36701737"