HyperText 마크업 언어(HTML)는 웹에 표시되는 문서의 구조를 설명하는 표준 마크업 언어입니다. HTML은 의미 있는 방식으로 문서를 구조화하기 위해 문서의 모든 구성요소를 마크업하는 데 사용되는 일련의 요소와 속성으로 구성됩니다.
HTML 문서는 기본적으로 HTML 요소와 텍스트 노드를 포함한 노드의 트리입니다. HTML 요소는 단락, 목록, 표 만들기, 이미지 삽입, 양식 컨트롤 삽입 등 문서에 대한 의미와 서식을 제공합니다. 각 요소는 여러 속성을 지정할 수 있습니다. 다른 요소 및 텍스트를 비롯하여 여러 요소에 콘텐츠가 있을 수 있습니다. 다른 요소는 비어 있으며 태그와 속성이 기능을 정의합니다.
요소에는 메타데이터, 섹션 지정, 텍스트, 인라인 의미 체계, 양식, 양방향, 미디어, 구성요소, 스크립팅 등 여러 카테고리가 있습니다. 이 시리즈에서 이러한 기능 중 대부분을 다룰 것입니다. 하지만 먼저, 원소란 무엇일까요?
요소
HTML은 일련의 요소로 구성되며 콘텐츠의 여러 부분을 묶거나 래핑하여 특정 방식으로 표시되거나 작동하도록 합니다. HTML 요소는 꺾쇠괄호 (< 및 >)를 사용하여 작성된 태그로 구분됩니다.
페이지 제목은 제목 수준 1이며 <h1> 태그를 사용합니다. 실제 제목인 '머신러닝 워크숍'은 요소의 콘텐츠입니다. 콘텐츠는 여는 태그와 닫는 태그 사이에 위치합니다. 여는 태그, 닫는 태그, 콘텐츠 전체가 바로 요소입니다.
닫는 태그는 여는 태그와 같은 태그이며, 앞에 슬래시가 붙습니다.
요소와 태그가 정확히 같은 것은 아니지만, 많은 사람들이 서로 같은 용어를 사용합니다. 태그 이름은 괄호 안의 내용입니다. 태그에 대괄호가 포함되어 있습니다. 이 경우 <h1>입니다. '요소' 는 여는 태그와 닫는 태그와 이러한 태그 사이의 모든 콘텐츠(중첩된 요소 포함)입니다.
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
이 단락 요소에는 중첩된 다른 요소가 있습니다. 요소를 중첩할 때는 요소를 적절하게 중첩하는 것이 중요합니다. HTML 태그는 열린 순서와 반대로 닫아야 합니다. 위의 예에서 <em>가 여는 태그와 닫는 <strong> 태그 내에서 어떻게 열리고 닫히는지 확인하세요. <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 기반의 마크업 언어를 사용하는 확장 가능한 벡터 그래픽은 래스터 이미지를 포함하지 않는 한 완벽하게 확장 가능합니다. 또한 완전히 스타일을 지정할 수 있습니다. 삽입된 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> 등이 있습니다.
대체되는 요소는 대부분 void 요소이지만 전부는 아닙니다. video, picture, object, iframe 요소는 대체되지만 무효는 아닙니다. 모두 다른 요소나 텍스트를 포함할 수 있으므로 모두 닫는 태그가 있습니다.
대부분의 void 요소가 대체됩니다. base, link, param, meta에서 살펴본 것처럼 전부는 아닙니다. 콘텐츠를 포함할 수 없고 대체되지 않아 화면에 아무것도 렌더링하지 않는 void 요소가 있는 이유는 무엇인가요? 콘텐츠에 대한 정보 제공 이 정보는 요소의 속성
속성
<img> 및 <input> 예의 여는 태그에 요소 유형 외에도 다양한 요소가 있습니다. 공백으로 구분된 이름/값 쌍의 추가 비트 (값 포함이 선택사항인 경우도 있음)를 속성이라고 합니다. 속성은 HTML을 놀라울 정도로 강력하게 만드는 요소입니다. 이 시리즈에서는 수백 개의 속성과 속성 값을 다루지만 여기서는 일반적인 특성과 속성 값을 포함하는 방법만 알아보겠습니다.
속성은 요소에 대한 정보를 제공합니다. 시작 태그의 나머지 부분과 마찬가지로, 이 속성은 콘텐츠에 표시되지 않지만 콘텐츠가 시력이 정상인 사용자와 비시각적 사용자 (보조 기술과 검색엔진) 모두에게 표시되는 방식을 정의하는 데 도움이 됩니다.
속성은 여는 태그에만 나타납니다. 여는 태그는 항상 요소 유형으로 시작합니다. 유형 뒤에는 하나 이상의 공백으로 구분된 0개 이상의 속성이 올 수 있습니다. 대부분의 속성 이름 뒤에는 속성 값을 나타내는 등호가 나오며 여는 따옴표와 닫는 따옴표로 묶습니다.
이 예에는 두 개의 속성이 있는 앵커 링크가 있습니다. 이 두 속성은 콘텐츠 '등록'을 변환했습니다. 키보드나 다른 기기에서 링크를 클릭, 탭하거나 활성화할 때 현재 브라우저 탭의 id="register" 속성으로 스크롤되는 내부 앵커 링크로 이동합니다.
속성은 요소의 동작, 링크, 기능을 정의합니다. 이 시리즈의 속성 섹션에서 더 많은 속성을 다룹니다. 지금은 일부 속성이 전역적이라는 점에 유의하세요. 즉, 모든 요소의 여는 태그 내에 표시될 수 있습니다. 일부는 여러 요소에만 적용되고 모든 요소에 적용되지는 않으며, 일부는 특정 요소에만 관련되어 있습니다.
대부분의 속성은 이름/값 쌍입니다. 값이 true 또는 false이거나 속성 이름과 동일한 부울 속성은 단순히 속성으로 포함될 수 있습니다. 값은 필요하지 않습니다.
<img src="switch.svg" alt="light switch" ismap />
이 이미지에는 src, alt, ismap의 세 가지 속성이 있습니다. src 속성은 SVG 이미지 확장 소재의 위치를 제공하는 데 사용됩니다. alt 속성은 이미지의 콘텐츠를 설명하는 대체 텍스트를 제공합니다. ismap 속성은 불리언이며 값이 필요하지 않습니다. 이는 속성이 무엇인지 설명하기 위한 것입니다. 이러한 속성은 이미지 섹션에서 더 자세히 다룹니다.
속성을 따옴표로 묶어야 하는 경우가 항상 있는 것은 아니지만 따옴표를 사용해야 하는 경우도 있습니다. 값에 공백이나 특수문자가 포함되어 있으면 따옴표를 사용해야 합니다. 따라서 따옴표를 사용하는 것이 좋습니다. 속성 값이 따옴표로 묶여 있는 경우 속성 사이에 하나 이상의 공백이 반드시 필요한 것은 아니지만 안전을 위해, 가독성을 위해 따옴표와 공백을 사용하는 것이 좋습니다.
HTML은 대소문자를 구분하지 않지만 일부 속성 값은 대소문자를 구분합니다. 사양에 정의된 값은 대소문자를 구분하지 않습니다. 키워드로 정의되지 않은 문자열은 일반적으로 id 및 class 값을 포함하여 대소문자를 구분합니다.
HTML에서 속성 값이 대소문자를 구분하는 경우 CSS 및 JavaScript에서 속성 선택기의 일부로 사용될 때 대소문자를 구분합니다.
마크업을 읽기 쉽게 만들려면 태그 내의 모든 요소 이름과 속성 이름에 소문자를 사용하여 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 (문서 객체 모델)은 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>올바른 설명을 모두 선택하세요.