하이퍼텍스트 마크업 언어(HTML)는 웹에 표시되는 문서의 구조를 설명하는 표준 마크업 언어입니다. HTML은 문서의 모든 구성요소를 마크업하여 의미 있는 방식으로 구조화하는 데 사용되는 일련의 요소와 속성으로 구성됩니다.
HTML 문서는 기본적으로 HTML 요소와 텍스트 노드를 포함하는 노드 트리입니다. HTML 요소는 단락, 목록 및 표 만들기, 이미지 및 양식 컨트롤 삽입 등 문서의 의미 체계와 서식을 제공합니다. 각 요소는 지정된 여러 속성을 가질 수 있습니다. 다른 요소와 텍스트를 비롯한 여러 요소에 콘텐츠가 있을 수 있습니다. 다른 요소는 비어 있으며 태그와 속성이 기능을 정의합니다.
요소 카테고리에는 메타데이터, 섹션 구성, 텍스트, 인라인 시맨틱, 양식, 상호작용, 미디어, 구성요소, 스크립팅 등 여러 가지가 있습니다. 이 시리즈에서 이러한 내용을 대부분 다룰 것입니다. 하지만 먼저 요소란 무엇일까요?
요소
HTML은 일련의 요소로 구성되며, 이 요소를 사용하여 콘텐츠의 여러 부분을 묶거나 래핑하여 특정 방식으로 표시하거나 작동하도록 합니다. HTML 요소는 태그로 구분되며 꺾쇠괄호 (< 및 >)를 사용하여 표시됩니다.
페이지 제목은 제목 수준 1이며 <h1> 태그를 사용합니다. '머신러닝 워크숍'의 실제 제목은 저희 요소의 내용입니다. 여는 태그와 닫는 태그 사이에 콘텐츠가 들어갑니다. 여는 태그, 닫는 태그, 콘텐츠 등 전체 요소가 요소입니다.
닫는 태그는 여는 태그와 같으며 앞에 슬래시가 붙습니다.
많은 사람들이 이 용어를 같은 의미로 사용하지만 요소와 태그는 정확히 일치하지 않습니다. 태그 이름은 대괄호 안의 콘텐츠입니다. 태그에 대괄호가 포함되어 있습니다. 이 경우 <h1>입니다. '요소'는 여는 태그와 닫는 태그, 그리고 중첩 요소를 포함하여 이들 태그 사이의 모든 콘텐츠입니다.
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
이 단락 요소에는 다른 요소가 중첩되어 있습니다. 요소를 중첩할 때 적절하게 중첩되는 것이 중요합니다. HTML 태그는 열린 순서의 역순으로 닫아야 합니다. 위의 예에서 열기 및 닫는 <strong> 태그 내에서 <em>가 열리고 닫히고 <strong>는 <p> 태그 내에서 열리고 닫혀 있습니다.
브라우저는 태그를 표시하지 않습니다. 태그는 페이지의 콘텐츠를 해석하는 데 사용됩니다.
HTML은 매우 관대합니다. 예를 들어 닫는 </li> 태그를 생략하면 닫는 태그가 암시적으로 사용됩니다.
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
<li>를 닫지 않는 것은 유효하지만 좋은 방법은 아닙니다. 닫는 </ul>는 필수입니다. 정렬되지 않은 목록의 닫는 태그를 생략하면 브라우저에서 목록 항목과 목록 항목이 끝나는 위치를 확인하려고 하지만, 사용자가 이 결정에 동의하지 않을 수 있습니다.
각 요소의 사양에는 닫는 태그가 필수인지 아닌지 여부가 표시됩니다. 사양에 '사용할 수 없는 태그'는 여는 태그와 닫는 태그가 둘 다 있어야 함을 의미합니다. 사양에 모든 필수 닫는 태그 목록이 나와 있습니다.
앞의 예에서 <em> 또는 <strong>가 닫히지 않았다면 브라우저에서 요소를 닫을 수도 있고 닫지 않을 수도 있습니다. <em>를 닫지 않으면 콘텐츠가 의도한 것과 다르게 렌더링될 수 있습니다. </ul>를 생략하고 다음 태그가 목록의 상위 컨테이너의 닫는 태그이면 다행입니다. 반면에 여는 <h1> 태그인 경우 브라우저는 스타일 상속을 비롯하여 헤더가 목록의 일부라고 가정합니다. 일부 생략된 닫는 태그는 더 큰 문제를 일으킵니다. <script>, <style>, <template>, <textarea>, <title>와 같은 일부 태그를 닫지 않으면 다음 예와 같이 후속 콘텐츠가 중단됩니다.
일부 콘텐츠를 의도치 않게 기울임꼴로 표시하거나 제목을 들여쓰기해도 비즈니스에 큰 악영향을 미치지 않습니다. </textarea>를 추가하는 것을 잊었거나 </style>을 닫지 않아 사이트가 전혀 표시되지 않기 때문에 200x300 텍스트 영역에 대부분의 콘텐츠가 스타일이 지정되지 않은 경우 사이트를 사용할 수 없게 됩니다.
어떤 경우에는 태그가 마크업에 없는 경우에도 브라우저에 요소가 포함될 수 있습니다. 요소는 암시될 수 있으므로 태그가 없는 경우에도 요소가 존재할 수 있습니다. 브라우저에서 추가하지 않더라도 콘텐츠 주위에 <body></body>를 추가하고 표 행 주위에 <tbody></tbody>를 추가합니다. 태그를 생략해도 괜찮지만 생략해서는 안 됩니다. 또한 앞서 언급했듯이 올바르게 중첩되어 있는지 확인하세요. 마크업 유지 관리 담당자인 여러분과 코드베이스 작업을 하는 다른 모든 사람이 고맙게 될 것입니다.
요소에는 대체된 요소와 대체되지 않은 요소의 두 가지 유형이 있습니다.
대체되지 않은 요소
이전 섹션에 마크업된 단락, 헤더, 목록은 모두 대체되지 않습니다. 대체되지 않은 요소에는 여는 태그와 닫는 태그 (경우에 따라 선택사항)가 둘러싸여 있으며 텍스트와 다른 태그를 하위 요소로 포함할 수 있습니다. 이를 둘러싸는 태그는 문구나 이미지를 하이퍼링크로 전환하고, 문장을 헤더로 만들거나, 단어를 강조하는 등의 작업을 수행할 수 있습니다.
대체된 요소 및 무효화된 요소
대체된 요소는 객체로 대체됩니다. 대부분의 양식 컨트롤의 경우 그래픽 사용자 인터페이스 (UI) 위젯, 대부분의 이미지의 경우 래스터 또는 확장 가능한 이미지 파일 등이 있습니다. 객체로 대체되며, 각 객체에는 기본 모양이 지정됩니다. 객체 유형과 브라우저에 따라 적용 가능한 스타일이 제한됩니다. 예를 들어 대부분의 브라우저에서는 UI 위젯 및 관련 유사 요소의 스타일 지정을 제한합니다. 래스터 이미지의 경우 높이, 너비, 클리핑, 필터링을 CSS로 쉽게 수행할 수 있지만, 다른 작업은 하지 못합니다. 반면에, HTML과 유사한 XML 기반의 마크업 언어를 사용하는 확장 가능한 벡터 그래픽은 래스터 이미지를 포함하지 않는 한 완전히 확장 가능합니다. 또한 완전히 스타일을 지정할 수 있습니다. 삽입된 SVG를 삽입하는 HTML 파일에 연결된 CSS에서 삽입된 SVG의 스타일을 지정하는 기능은 SVG가 설정된 방식에 따라 다릅니다.
이 예에서는 대체된 두 요소 <img> 및 <input>가 텍스트가 아닌 콘텐츠(이미지 및 그래픽 사용자 인터페이스 객체)로 각각 대체되었습니다.
<input type="range">
<img src="switch.svg" alt="light switch">
위 HTML의 출력:
대체된 요소와 void 요소를 혼동하는 경우가 많습니다. void 요소는 모두 스스로 닫히는 요소이며 하나의 태그로 표시됩니다. 즉, void 요소를 닫는 태그는 없습니다. 또는 태그 끝에 슬래시를 포함하여 많은 사용자가 마크업을 쉽게 읽을 수 있도록 할 수 있습니다. 계속해서 태그를 슬래시로 닫습니다.
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
끝의 슬래시는 구식입니다. 이는 요소가 스스로 닫히고 일치하는 종료 태그나 닫는 태그가 없음을 나타내는 방법입니다.
void 요소는 텍스트 콘텐츠 또는 중첩된 요소를 포함할 수 없습니다. Void 요소에는 <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, <wbr> 등이 있습니다.
대체되는 대부분의 요소는 무효 요소이지만 전부는 아닙니다. video, picture, object, iframe 요소가 대체되지만 무효는 아닙니다. 이러한 요소는 모두 다른 요소나 텍스트를 포함할 수 있으므로 모두 닫는 태그가 있습니다.
대부분의 void 요소가 대체되지만 base, link, param, meta에서 살펴본 것처럼 전부는 아닙니다. 콘텐츠를 포함할 수 없고 대체되지 않아 화면에 아무것도 렌더링하지 않는 void 요소가 있는 이유는 무엇인가요? 콘텐츠에 관한 정보를 제공하기 위해 정보는 요소의 속성으로 제공됩니다.
특성
<img> 및 <input> 예의 여는 태그에 요소 유형 이상의 항목이 있습니다. 공백으로 구분된 이름/값 쌍의 추가 비트 (값을 포함하는 경우도 선택사항)를 속성이라고 합니다. 속성은 HTML을 매우 강력하게 만드는 요소입니다. 이 시리즈에서는 수백 개의 속성과 속성 값에 대해 다루겠지만 여기서는 일반적인 특성과 속성 값을 포함하는 방법만 설명하겠습니다.
속성은 요소에 대한 정보를 제공합니다. 시작 태그와 마찬가지로 이 속성은 콘텐츠에 표시되지 않지만 시력이 정상인 사용자와 시각장애인 (보조 기술 및 검색엔진) 사용자에게 콘텐츠가 표시되는 방식을 정의하는 데 도움이 됩니다.
속성은 여는 태그에만 표시됩니다. 여는 태그는 항상 요소 유형으로 시작합니다. 유형 다음에 0개 이상의 속성이 올 수 있으며, 속성은 하나 이상의 공백으로 구분됩니다. 대부분의 속성 이름 뒤에는 속성 값과 동일한 등호가 붙으며 여는 따옴표와 닫는 따옴표로 묶습니다.
이 예에는 두 개의 속성이 있는 앵커 링크가 있습니다. 이 두 속성은 콘텐츠 'Registration'을 키보드나 다른 기기로 링크를 클릭, 탭, 활성화할 때 현재 브라우저 탭의 id="register" 속성으로 스크롤되는 내부 앵커 링크로 변환했습니다.
속성은 요소의 동작, 링크 및 기능을 정의합니다. 이 시리즈의 속성 섹션에서 더 많은 속성에 대해 다룹니다. 지금은 일부 속성이 전역적이므로 모든 요소의 여는 태그 내에 표시될 수 있다는 점에 유의하세요. 일부는 여러 요소에만 적용되고 모든 요소에는 적용되지 않으며, 또 다른 일부는 요소별로 다르며 단일 요소에만 관련됩니다.
대부분의 속성은 이름/값 쌍입니다. 값이 true, false이거나 속성 이름과 동일한 부울 속성은 속성으로만 포함될 수 있으며 값은 필요하지 않습니다.
<img src="switch.svg" alt="light switch" ismap />
이 이미지에는 src, alt, ismap의 세 가지 속성이 있습니다. src 속성은 SVG 이미지 확장 소재의 위치를 제공하는 데 사용됩니다. alt 속성은 이미지의 콘텐츠를 설명하는 대체 텍스트를 제공합니다. ismap 속성은 부울이며 값이 필요하지 않습니다. 속성이 무엇인지 설명하기 위한 것입니다. 이러한 속성에 대해서는 이미지 섹션에서 더 자세히 다룹니다.
따옴표 속성이 항상 필요한 것은 아니지만 필요한 경우도 있습니다. 값에 공백이나 특수문자가 포함되어 있으면 따옴표가 필요합니다. 따라서 항상 인용을 권장합니다. 속성 값을 따옴표로 묶는 경우 속성 사이에 공백이 하나 이상 있어야 하는 것은 아니지만, 가독성을 높이고 안전을 위해 따옴표와 공백을 사용하는 것이 좋습니다.
HTML은 대소문자를 구분하지 않지만 일부 속성 값은 대소문자를 구분합니다. 사양에 정의된 값은 대소문자를 구분하지 않습니다. 키워드로 정의되지 않은 문자열은 일반적으로 대소문자를 구분합니다(id 및 class 값 포함).
HTML에서 속성 값이 대소문자를 구분하면 CSS 및 자바스크립트에서 속성 선택기의 일부로 사용될 때 대소문자를 구분합니다.
마크업을 읽기 쉽게 하려면 태그 내의 모든 요소 이름과 속성 이름에 소문자를 사용하여 HTML을 표시하고 모든 속성 값을 따옴표로 묶는 것이 좋습니다(필수는 아님). 'XHTML 스타일 마크업'이라는 용어를 들어본 적이 있다면, 이것은 그리고 끝에 슬래시가 있는 빈 요소를 스스로 닫는다는 의미입니다.
요소의 모양
시맨틱 요소의 기본 모양은 user-agent 스타일시트에 의해 설정됩니다. 대부분의 브라우저는 이러한 용도로 실제 스타일시트를 사용하지만 다른 브라우저는 코드에서 이를 시뮬레이션합니다. 결과는 동일합니다. user-agent 스타일시트의 일부 제약 조건은 HTML 사양에 의해 설정되지만 브라우저마다 차이가 있기 때문에 브라우저마다 약간의 차이가 있습니다.
태그에는 시맨틱 의미가 있으므로 선택한 요소와 사용하는 태그가 표시 중인 콘텐츠에 적합해야 합니다. 요소의 시맨틱 또는 role는 보조 기술과 경우에 따라 검색엔진에 중요합니다. HTML은 콘텐츠의 모양을 정의하는 것이 아니라 콘텐츠를 구성하는 데 사용해야 합니다. 디자인은 CSS의 영역입니다. 콘텐츠의 모양을 변경하는 많은 요소(예: <h1>, <strong>, <em>)에는 시맨틱 의미가 있지만, 모양은 작성자 스타일을 통해 변경될 수 있으며 일반적으로 변경될 수도 있습니다.
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
요소, 속성, 자바스크립트
DOM (Document Object Model)은 HTML 문서의 구조와 콘텐츠의 데이터 표현입니다. 브라우저는 HTML을 파싱하면서 접하게 되는 모든 텍스트 요소 및 섹션에 대한 JavaScript 객체를 만듭니다. 이러한 객체를 노드라고 하며 각각 요소 노드와 텍스트 노드라고 합니다.
모든 HTML 요소의 기능을 정의하는 인터페이스가 있습니다. HTML DOM API는 DOM을 통해 모든 HTML 요소에 액세스하고 이를 제어할 수 있게 해주며, HTML 요소와 이 요소로부터 상속받는 모든 HTML 클래스에 인터페이스를 제공합니다. HTMLElement 인터페이스는 HTML 요소 및 모든 하위 노드를 나타냅니다. 다른 모든 요소는 상속받은 인터페이스를 통해 이를 구현합니다. 상속되는 각 인터페이스에는 생성자, 메서드, 속성이 있습니다. 상속된 HTMLElement 속성을 통해 모든 전역 속성뿐 아니라 input, pointer, transition, animation 이벤트에 액세스할 수 있습니다. HTMLAnchorElement 및 HTMLImageElement와 같은 개별 요소의 하위 유형을 통해 요소별 속성 값 및 메서드에 액세스할 수 있습니다.
이해도 테스트
HTML에 대한 지식 테스트
HTML 요소는 스타일을 지정하는 데 사용됩니다.
교체된 요소를 선택합니다.
<img><p><ul><input>올바른 설명을 모두 선택하세요.