분류 html

HTML 소개

컨텐츠 정보

  • 조회 427 (작성일 )

본문

HTML은 가장 널리 사용되는 웹 브라우저를 사용하는 사람들이 구성한 Web Hypertext Application Technology Working Group의 약어 인 WHATWG에서 정의한 표준입니다. 이는 기본적으로 Google, Mozilla, Apple 및 Microsoft에서 제어한다는 의미입니다.


과거에는 W3C (World Wide Web Consortium)가 HTML 표준 작성을 담당하는 기관이었습니다.


XHTML에 대한 W3C 푸시가 좋은 생각이 아니라는 것이 명백해 졌을 때 컨트롤은 비공식적으로 W3C에서 WHATWG로 이동했습니다.


XHTML에 대해 들어 본 적이 없다면 여기 간단한 이야기가 있습니다. 2000 년 초, 우리 모두는 웹의 미래가 XML이라고 믿었습니다. 따라서 HTML은 SGML 기반 저작 언어에서 XML 마크 업 언어로 이동했습니다.


큰 변화였습니다. 우리는 더 많은 규칙을 알고 존중 해야 했습니다. 엄격한 규칙.


결국 브라우저 공급 업체는 이것이 웹에 대한 올바른 경로가 아니라는 것을 깨달았으며 현재 HTML5로 알려진 것을 만들어 냈습니다.


W3C는 HTML에 대한 통제권을 남길 것에 동의하지 않았으며, 수년간 우리는 공식 표준을 목표로 하는 2 개의 경쟁 표준을 얻었습니다. 결국 2019 년 5 월 28 일 W3C는“참된”HTML 버전이 WHATWG에서 출판 한 버전이라고 공식 발표했습니다.


HTML5를 언급했습니다. 이 작은 이야기를 설명하겠습니다. 많은 배우들이 참여할 때 인생의 많은 것들과 마찬가지로, 그것은 또한 매우 혼란스럽습니다.


1993 년에 HTML 버전 1을 사용했습니다. [원본 RFC는 다음과 같습니다.]


HTML 2는 1995 년에 이어졌습니다.


1997 년 1 월 HTML 3을, 1997 년 12 월 HTML 4를 얻었습니다.


20 년이 지난 지금, 우리는 이 모든 XHTML을 가지고 있었고, 결국 우리는 이제 더 이상 HTML이 아닌 이 HTML5 “thing”에 있습니다.


HTML5는 이제 HTML을 포함하지만 WebGL, SVG 등과 같은 많은 API와 표준을 추가하는 전체 기술 세트를 정의하는 용어입니다.


여기서 이해해야 할 핵심은 이것입니다. HTML 버전과 같은 것은 더 이상 없습니다. 생활 수준입니다. CSS와 마찬가지로 우리는 이것을 3이라고 하지만 실제로는 개별적으로 개발 된 많은 독립 모듈입니다. JavaScript와 마찬가지로 매년 하나의 새 버전이 있지만 엔진에서 구현하는 개별 기능보다는 그다지 중요하지 않습니다.


그렇습니다. HTML5라고 하지만 HTML4는 1997 년부터 시작되었습니다. 시간이 오래 걸렸습니다. 웹을 상상해보십시오.


이곳은 표준이 살아있는 곳입니다 : [https://html.spec.whatwg.org/multipage]. 


HTML 기본 사항 


HTML은 웹에서 소비하는 컨텐츠를 구성하는 데 사용하는 마크 업 언어입니다.


HTML은 다양한 방식으로 브라우저에 제공됩니다.


요청 또는 세션 데이터 (예 : Rails, Laravel 또는 Django 애플리케이션)에 따라 빌드하는 서버 측 애플리케이션에서 생성 할 수 있습니다.


또는 HTML을 즉시 생성하는 JavaScript 클라이언트 측 응용 프로그램에서 생성 할 수 있습니다.


또는 가장 간단한 경우 파일로 저장하고 웹 서버를 통해 브라우저에 제공 할 수 있습니다.


실제로는 HTML을 생성하는 가장 인기 있는 방법 일지 모르지만 기본 구성 요소를 알아야 합니다.


일반적으로 HTML 파일은 .html 또는 .htm 확장자로 저장됩니다.


이 파일 내에서 태그를 사용하여 컨텐츠를 구성합니다.


태그는 내용을 감싸고 각 태그는 줄바꿈 하는 텍스트에 특별한 의미를 부여합니다.


몇 가지 예를 들어 봅시다.


이 HTML 스니펫은 p 태그를 사용하여 단락을 만듭니다.

<p>A paragraph of text</p>


이 HTML 스니펫은 정렬되지 않은 목록을 의미하는 ul 태그와 목록 항목을 의미하는 li 태그를 사용하여 항목 목록을 작성합니다.

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>


브라우저에서 HTML 페이지를 제공하면 태그가 해석되고 브라우저는 시각적 모양을 정의하는 규칙에 따라 요소를 렌더링 합니다.


이러한 규칙 중 일부는 내장되어 있습니다. 예를 들어 목록이 렌더링 되는 방식과 같습니다. 또는 링크가 파란색으로 밑줄이 그어진 방식입니다.


다른 규칙은 CSS를 사용하여 설정합니다.


HTML은 프리젠테이션이 아닙니다. 사물이 어떻게 보이는지 걱정하지 않습니다. 대신, 그것이 무엇을 의미 하는지에 관심이 있습니다.


CSS 언어를 사용하여 페이지를 작성하는 사람이 정의한 지시문을 사용하여 표시되는 방식을 결정하는 것은 브라우저에 달려 있습니다.


이제 내가 만든 두 가지 예는 페이지 컨텍스트 외부에서 가져온 HTML 스니펫입니다.


HTML 페이지 구조 


적절한 HTML 페이지를 예로 들어 보겠습니다.


문서 유형 선언 (일명 doctype), 브라우저에 HTML 페이지임을 알리는 방법 및 사용 중인 HTML 버전으로 시작합니다.


최신 HTML은이 doctype을 사용합니다.

<!DOCTYPE html>


그런 다음 여는 및 닫는 태그가 있는 html 요소가 있습니다.

<!DOCTYPE html>
<html>
...
</html>

모든 태그에는 여는 태그와 닫는 태그가 있습니다. 닫는 태그가 필요하지 않은 자체 닫는 태그는 제외합니다.


닫는 태그는 여는 태그와 동일하지만 /가 있습니다.


html 시작 태그는 문서 시작 부분에서 문서 유형 선언 직후에 사용됩니다.


html 끝 태그는 HTML 문서에 있는 마지막 것입니다.


html 요소 내부에는 head와 body라는 두 가지 요소가 있습니다.

<!DOCTYPE html>
<html>
	<head>
	...
	</head>
	<body>
	...
	</body>
</html>


내부 헤드에는 제목, 메타 데이터, 내부 또는 외부 CSS 및 JavaScript와 같은 웹 페이지를 작성하는 데 필수적인 태그가 있습니다. 대부분 페이지에 직접 표시되지는 않지만 브라우저 (또는 Google 검색 로봇과 같은 봇)가 올바르게 표시하는 데 도움이 되는 것입니다.


내부 본문에는 페이지의 내용이 있습니다. 보이는 것들.


태그 대 요소 


태그와 요소를 언급했습니다. 차이점?


요소에는 시작 태그와 닫는 태그가 있습니다.


이 경우 p 시작 및 닫기 태그를 사용하여 p 요소를 만듭니다.


<p>A paragraph of text</p>


따라서 요소는 전체 패키지를 구성합니다.

  • 시작 태그
  • 텍스트 내용 (그리고 아마도 다른 요소들)
  • 닫는 태그

요소에 닫는 태그가 없는 경우 시작 태그로만 작성되며 텍스트 내용을 포함 할 수 없습니다.


즉, 책에서 태그 또는 요소 용어를 사용하여 시작 태그 또는 종료 태그를 명시 적으로 언급하는 것을 제외하고는 동일한 의미를 사용할 수 있습니다.


속성 

요소의 시작 태그에는 속성이라고 하는 첨부 할 수 있는 특수한 정보 스니펫이 있을 수 있습니다.


속성에는 key = "value"구문이 있습니다.

<p class="a-class">A paragraph of text</p>

작은 따옴표를 사용할 수도 있지만 HTML에서 큰 따옴표를 사용하는 것이 좋습니다. 


여러 개를 가질 수 있습니다.

<p class="a-class" id="an-id">A paragraph of text</p>


일부 속성은 부울이므로 키만 필요합니다.

<script defer src="file.js"></script>


class 및 id 속성은 가장 많이 사용되는 두 가지 속성입니다.


특별한 의미가 있으며 CSS와 JavaScript 모두에 유용합니다.


이 둘의 차이점은 ID가 웹 페이지의 컨텍스트에서 고유하므로 복제 할 수 없다는 것입니다.


반면에 클래스는 여러 요소에 여러 번 나타날 수 있습니다.


또한 id는 하나의 값일 뿐입니다. 클래스는 공백으로 구분 된 여러 값을 보유 할 수 있습니다.

<p class="a-class another-class">A paragraph of text</p>


대시를 사용하여 단어를 클래스 값으로 구분하는 것이 일반적이지만 관습일 뿐입니다.


그것들은 당신이 가질 수 있는 가능한 속성 중 2 개입니다. 일부 속성은 하나의 태그에만 사용됩니다. 그들은 매우 전문화되어 있습니다.


다른 속성은 보다 일반적인 방식으로 사용될 수 있습니다. 방금 아이디와 클래스를 보았지만 다른 것도 있습니다.


  • 스타일은 요소에 인라인 CSS 규칙을 삽입하는 데 사용할 수 있습니다
  • title
  • TODO


HTML 태그 참조에서 특수 속성에 대한 자세한 내용을 곧 확인할 수 있습니다.


대소 문자 구분 


HTML은 대소 문자를 구분하지 않습니다. 모든 대문자 또는 소문자로 태그를 쓸 수 있습니다. 초기에는 모자가 표준이었습니다. 오늘날 소문자가 표준입니다. 컨벤션입니다.


일반적으로 다음과 같이 작성하십시오.

<p>A paragraph of text</p>


이렇게 말고

<P>A paragraph of text</P>


공백 


매우 중요합니다. HTML에서 여러 공백을 한 줄에 추가하더라도 브라우저의 CSS 엔진에 의해 축소됩니다.


예를 들어이 단락의 렌더링

<p>A paragraph of text</p>


이것과 같습니다 :

<p>        A paragraph of text</p>


그리고 이것과 같습니다 :

<p>A paragraph

of
           text          </p>


공백 CSS 속성을 사용하면 동작 방식을 변경할 수 있습니다. CSS 사양에서 CSS가 공백을 처리하는 방법에 대한 자세한 정보를 찾을 수 있습니다 


시각적으로 보다 체계적이고 읽기 쉬운 구문을 사용한다고 말하지만 원하는 구문을 사용할 수 있습니다.


일반적으로

<p>A paragraph of text</p>


또는

<p>
	A paragraph of text
</p>


중첩 태그는 환경 설정에 따라 2 ~ 4 자로 들여 쓰기 해야 합니다.

<body>
	<p>
		A paragraph of text
	</p>
	<ul>
		<li>A list item</li>
	</ul>
</body>


참고 : 이것은 추가 공간을 추가하려는 경우 꽤 화를 낼 수 있음을 의미합니다. 필요할 때 더 많은 공간을 확보하기 위해 CSS를 사용하는 것이 좋습니다.


참고 : 특별한 경우 & nbsp; HTML 엔터티 (비 공백 공간을 의미하는 약어)-나중에 HTML 엔터티에 대해 자세히 설명합니다. 나는 이것이 남용 되어서는 안된다고 생각합니다. 시각적 표현을 변경하려면 CSS가 항상 선호됩니다. 


문서 heading 


head 태그에는 문서 속성을 정의하는 특수 태그가 포함되어 있습니다.


항상 html 태그를 여는 직후 body 태그 앞에 작성됩니다.

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	...
</html>

이 태그에는 속성을 사용하지 않습니다. 우리는 그 안에 내용을 쓰지 않습니다.


다른 태그의 컨테이너일 뿐입니다. 그 안에 우리는 당신이 해야 할 일에 따라 다양한 태그를 가질 수 있습니다 :

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

title 태그 


title 태그는 페이지 제목을 결정합니다. 제목은 브라우저에 표시되며 검색 엔진 최적화의 주요 요소 중 하나이므로 특히 중요합니다.


script 태그 


이 태그는 페이지에 JavaScript를 추가하는 데 사용됩니다.


여는 태그, JavaScript 코드 및 닫는 태그를 사용하여 인라인으로 포함 시킬 수 있습니다.

<script>
..some JS
</script>

또는 src 속성을 사용하여 외부 JavaScript 파일을 로드 할 수 있습니다.

<script src="file.js"></script>

type 속성은 기본적으로 text / javascript로 설정되어 있으므로 선택 사항입니다. 


이 태그에 대해 알아야 할 중요한 사항이 있습니다.


때때로 이 태그는 페이지 하단


기본적으로 스크립트를 로드 하면 스크립트를 구문 분석하고 로드 할 때까지 페이지 렌더링이 차단됩니다.


이렇게 하면 모든 페이지가 이미 구문 분석되고 로드 된 후에 스크립트가 로드 및 실행되므로 헤드 태그에 유지하는 것보다 사용자에게 더 나은 경험을 제공합니다.


내 의견은 이것이 지금 나쁜 습관이라는 것입니다. 스크립트를 head 태그에 게시하십시오.


현대 JavaScript에는 스크립트를 페이지 하단에 유지하는 것보다 성능이 뛰어난 대안이 있습니다.- defer attribute:

<script defer src="file.js"></script>

빠른 로드 페이지로의 빠른 경로와 빠른 로드 JavaScript를 트리거 하는 시나리오입니다.


noscript 태그 


이 태그는 브라우저에서 스크립트가 비활성화 된 시기를 감지하는 데 사용됩니다.


참고 : 사용자는 브라우저 설정에서 JavaScript 스크립트를 비활성화 하도록 선택할 수 있습니다. 또는 기본적으로 브라우저가 이를 지원하지 않을 수 있습니다. 


문서 헤드에 넣든 문서 본문에 있든 다르게 사용됩니다.


지금은 문서 헤드에 대해 이야기하고 있으므로 먼저 이 사용법을 소개하겠습니다.


이 경우 noscript 태그는 다른 태그 만 포함 할 수 있습니다.

  • link tag
  • style tag
  • meta tag

스크립트가 비활성화 된 경우 페이지에서 제공하는 리소스 또는 메타 정보를 변경합니다.


이 예제에서는 스크립트가 비활성화 된 경우 표시 할 수 있도록 no-script-alert 클래스가 있는 요소를 설정했습니다. 기본적으로 none :

<!DOCTYPE html>
<html>
	<head>
		...
		<noscript>
			<style>
				.no-script-alert {
					display: block;
				}
			</style>
		</noscript>

		...
	</head>
	...
</html>

다른 경우를 해결해 보겠습니다. 본문에 넣으면 단락 및 기타 태그와 같은 콘텐츠가 UI에 렌더링 될 수 있습니다. 


link 태그 


링크 태그는 문서와 다른 리소스 간의 관계를 설정하는 데 사용됩니다.


주로 로드 할 외부 CSS 파일을 연결하는 데 사용됩니다.


이 요소에는 닫는 태그가 없습니다.

<!DOCTYPE html>
<html>
	<head>
		...
		<link href="file.css" rel="stylesheet">
		...
	</head>
	...
</html>


미디어 속성을 사용하면 장치 기능에 따라 다른 스타일 시트를 로드 할 수 있습니다.

<link href="file.css" media="screen" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">


스타일 시트와 다른 리소스에 연결할 수 있습니다.


예를 들어 다음을 사용하여 RSS 피드를 연결할 수 있습니다

<link rel="alternate" type="application/rss+xml" href="/index.xml">

다음을 사용하여 파비콘을 연결할 수 있습니다.

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">

이 태그는 rel = "prev"및 rel = "next"를 사용하여 이전 페이지와 다음 페이지를 나타 내기 위해 여러 페이지 콘텐츠에도 사용되었습니다. 주로 구글을 위해. 2019 년 현재 Google은이 태그가 없으면 올바른 페이지 구조를 찾을 수 있으므로 이 태그를 더 이상 사용하지 않는다고 발표했습니다.


style 태그 


이 태그를 사용하면 외부 스타일 시트를 로드 하지 않고 문서에 스타일을 추가 할 수 있습니다.

<style>
.some-css {}
</style>

링크 태그와 마찬가지로 media 속성을 사용하여 지정된 매체에서 해당 CSS 만 사용할 수 있습니다.

<style media="print">
.some-css {}
</style>


문서 본문에 이 태그를 추가 할 수도 있습니다. 이것에 대해 말하자면 CSS를 현재 문서 하위 트리에만 할당하는 scoped 속성이 흥미롭습니다. 즉, 부모 요소 외부에서 CSS가 누출되는 것을 피합니다.


base 태그 


이 태그는 페이지에 포함 된 모든 상대 URL의 기본 URL을 설정하는 데 사용됩니다.

<!DOCTYPE html>
<html>
	<head>
		...
		<base href="https://365ok.co.kr/">
		...
	</head>
	...
</html>


meta 태그 


메타 태그는 다양한 작업을 수행하며 매우 중요합니다.


특히 SEO의 경우.


메타 요소에는 시작 태그만 있습니다.


가장 기본적인 것은 description 메타 태그입니다.


<meta name="description" content="A nice page">

Google은 페이지 내 콘텐츠보다 페이지를 더 잘 설명 할 경우 결과 페이지에 페이지 설명을 생성하는 데 사용될 수 있습니다 (방법을 묻지 마십시오).


문자셋 메타 태그는 페이지 문자 인코딩을 설정하는 데 사용됩니다. 대부분의 경우 utf-8 :


<meta charset="utf-8">


로봇 메타 태그는 검색 엔진 봇에게 페이지 색인 생성 여부를 알려줍니다.

<meta name="robots" content="noindex">


또는 링크를 따라야하는지 여부 :

<meta name="robots" content="nofollow">

개별 링크에서도 nofollow를 설정할 수 있습니다. 이렇게 하면 nofollow를 전역 적으로 설정할 수 있습니다. 


당신은 그들을 결합 할 수 있습니다 :

<meta name="robots" content="noindex, nofollow">


기본 동작은 index, follow입니다.


nosnippet, noarchive, noimageindex 등을 포함한 다른 속성을 사용할 수 있습니다.


모든 검색 엔진을 타겟팅 하는 대신 Google에 알려줄 수도 있습니다.

<meta name="googlebot" content="noindex, nofollow">


다른 검색 엔진에도 자체 메타 태그가 있을 수 있습니다.


말하자면 Google에서 일부 기능을 사용 중지하도록 지시 할 수 있습니다. 이렇게 하면 검색 엔진 결과의 번역 기능이 방지 됩니다.

<meta name="google" content="notranslate">

뷰포트 메타 태그는 장치 너비에 따라 페이지 너비를 설정하도록 브라우저에 지시하는 데 사용됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1">


이 태그에서 더 많은 것을 보십시오. 


다른 인기 있는 메타 태그는 http-equiv = "refresh"태그입니다. 이 줄은 브라우저에 3 초 동안 기다렸다가 다른 페이지로 리디렉션 하도록 지시합니다.

<meta http-equiv="refresh" content="3;url=http://365ok.co.kr">


3 대신 0을 사용하면 가능한 빨리 리디렉션 됩니다.


이것은 전체 참조가 아니며 덜 사용되는 다른 메타 태그가 존재합니다.


이 문서 머리글 소개 후에 문서 본문을 살펴볼 수 있습니다.


문서 본문 


닫는 head 태그 후에 HTML 문서에는 body 요소 만 있습니다.

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	<body>
		...
	</body>
</html>


head 및 html 태그와 마찬가지로 한 페이지에 body 태그를 하나만 가질 수 있습니다.


body 태그 안에는 페이지의 내용을 정의하는 모든 태그가 있습니다.


기술적으로 시작 및 끝 태그는 선택 사항입니다. 그러나 나는 그것들을 추가하는 것이 좋은 습관이라고 생각합니다. 명확성을 위해.


다음 장에서는 페이지 본문 내에서 사용할 수 있는 다양한 태그를 정의합니다.


그러나 이전에는 블록 요소와 인라인 요소의 차이점을 소개해야 합니다.


블록 요소와 인라인 요소 


페이지 본문에 정의 된 시각적 요소는 일반적으로 두 가지 범주로 분류 할 수 있습니다.

  • 블록 요소 (p, div, 제목 요소, 목록 및 목록 항목 등)
  • 인라인 요소 (a, span, img,…)


차이점은 무엇입니까?


페이지에 배치 된 블록 요소는 옆에 다른 요소를 허용하지 않습니다. 왼쪽 또는 오른쪽으로.


대신 인라인 요소는 다른 인라인 요소 옆에 있을 수 있습니다.


차이점은 CSS를 사용하여 편집 할 수 있는 시각적 속성에도 있습니다. 너비 / 높이, 여백, 패딩 및 테두리 또는 블록 요소를 변경할 수 있습니다. 인라인 요소에는 그렇게 할 수 없습니다.


CSS를 사용하여 각 요소의 기본값을 변경하여 p 태그를 인라인으로 설정하거나 범위를 블록 요소로 설정할 수 있습니다. 


또 다른 차이점은 인라인 요소가 블록 요소에 포함될 수 있다는 것입니다. 그 반대는 안됩니다.


일부 블록 요소는 다른 블록 요소를 포함 할 수 있지만 종속됩니다. 예를 들어 p 태그는 그러한 옵션을 허용하지 않습니다.






HTML