HTML에서 레이어(layer)를 추가하려면 <layer> 태그를 사용합니다. HTML의 <layer> 태그는 페이지 내 요소들의 위치를 지정하고, 스크립트를 통해 애니메이션 효과를 적용할 때 활용됩니다.레이어는 하나의 창(window) 안에 존재하면서 메인 문서 위에 겹쳐져 있는 별도의 문서라고 생각하면 이해하기 쉽습니다. 즉, 각 레이어는 독립적인 영역으로서 서로 다른 위치와 배경색 등을 가질 수 있습니다.레이어 태그 예제아래 코드를 실행하면 HTML 페이지에 여러 개의 레이어가 추가되는 것을 확인할 수 있
<link> 태그로 리소스 참조 추가하기HTML에서 외부 리소스(예: CSS 스타일시트)를 참조하려면 <link> 태그를 사용합니다. 이 태그는 외부 문서와의 연결을 정의하는 역할을 하며, 반드시 문서의 <head> 섹션 안에 위치해야 합니다.대표적인 활용 예는 외부 CSS 파일을 불러오는 것으로, 이를 통해 HTML 구조와 디자인을 분리하여 관리할 수 있습니다.<link> 태그의 주요 속성속성값설명charsetcharset링크된 문서의 문자 인코딩을 정의합니다.hrefURL참조할 리소스
HTML의 <li>(list item) 태그는 순서 있는 목록(<ol>), 순서 없는 목록(<ul>), 디렉터리 목록, 메뉴 목록 등에 새로운 목록 항목을 추가할 때 사용합니다. 이 태그는 아래와 같은 추가 속성도 함께 지원합니다.속성값설명typeAaIi1discsquarecircle더 이상 사용되지 않음(Deprecated) − 목록 항목의 표시 유형을 지정합니다.valuenumber목록 항목의 값을 지정합니다.예제다음 코드를 직접 실행하면서 HTML에서 목록 항목을 추
HTML5에서는 <menuitem> 태그를 사용하여 사용자가 팝업 메뉴(컨텍스트 메뉴)에서 직접 호출할 수 있는 명령 또는 메뉴 항목을 정의할 수 있습니다. 이 태그는 주로 <menu> 태그와 함께 사용되며, 웹 페이지의 특정 영역에서 마우스 오른쪽 버튼을 클릭했을 때 나타나는 사용자 지정 메뉴를 구성하는 데 활용됩니다.<menuitem> 태그의 주요 속성<menuitem> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.속성값설명checkedchecked메뉴 항목이 선택(체크)된 상
HTML5 <main> 태그란?HTML5에서 새롭게 도입된 <main> 태그는 문서 또는 웹 애플리케이션에서 핵심이 되는 주요 콘텐츠 영역을 지정합니다. 이 태그로 감싸인 내용은 해당 페이지에만 존재하는 고유한 정보여야 하며, 사이트 전체에서 반복되는 로고, 내비게이션 메뉴, 검색 폼, 저작권 정보 등은 포함하지 않습니다.주요 사용 규칙한 페이지에서 <main> 요소는 단 한 번만 사용할 수 있습니다.<article>, <aside>, <footer>, <head
HTML에서 이미지 맵(image map)은 하나의 이미지 안에 여러 개의 클릭 가능한 영역을 만들어, 각 영역마다 서로 다른 링크를 연결할 수 있게 해주는 기능입니다. 이미지 맵을 추가하려면 HTML의 <map> 태그를 사용하며, 이 태그는 <img> 태그와 함께 사용됩니다.map 태그의 주요 속성<map> 태그에서 사용되는 속성은 다음과 같습니다.속성값설명nameunique_name맵(map) 태그에 고유한 이름을 지정합니다. <img> 태그의 usemap 속성과 연결하는 데 사용됩니다
HTML에서 메뉴 목록을 추가하려면 <menu> 태그를 사용합니다. HTML의 <menu> 태그는 메뉴 목록(menu list)을 생성하는 데 사용되는 전용 태그입니다.<menu> 태그의 주요 속성HTML <menu> 태그는 아래와 같은 추가 속성을 지원합니다.속성값설명labeltext메뉴에 표시되는 가시적인 라벨(이름)을 지정합니다.typepopuptoolbarcontext표시할 메뉴의 유형을 지정합니다. 팝업(popup), 툴바(toolbar), 컨텍스트(context) 중 하나를 선택
HTML의 <meta> 태그는 HTML 문서에 대한 메타데이터(metadata)를 선언하는 데 사용됩니다. 메타데이터는 페이지 콘텐츠에는 직접 표시되지 않지만, 검색 엔진 최적화(SEO), 브라우저 동작 제어, 문서 정보 전달 등 웹 문서 운영에 중요한 역할을 합니다.meta 태그의 주요 속성다음은 <meta> 태그에서 사용할 수 있는 주요 속성입니다.속성값설명nameauthordescriptionkeywordsgeneratorrevisedothers속성(property)의 이름을 지정합니다. 작성자, 문서 설
HTML에서는 <mark> 태그를 사용하여 텍스트를 강조 표시할 수 있습니다. HTML의 <mark> 태그는 다른 맥락에서의 관련성을 나타내기 위해 참조 목적으로 강조된 텍스트를 지정합니다.기본 사용법브라우저에서 <mark> 태그로 감싼 텍스트는 기본적으로 노란색 배경으로 표시됩니다. 이는 독자가 해당 부분이 중요하거나 현재 문맥과 관련이 있음을 직관적으로 알 수 있게 해줍니다.예제아래 코드를 실행하여 HTML 콘텐츠를 참조용으로 강조 표시하는 방법을 확인해 보세요.<!DOCTYPE html&g
HTML에서 알려진 범위 내의 스칼라 측정값(게이지)을 정의하려면 <meter> 태그를 사용합니다. 이 태그는 디스크 사용량, 배터리 잔량, 투표 결과 비율 등 특정 범위 안에서 측정된 값을 시각적으로 표현할 때 유용합니다.기본 사용법<meter> 태그는 value, min, max 속성을 함께 사용하여 현재 값과 측정 범위를 지정합니다. 태그 사이에 넣은 텍스트는 브라우저가 <meter>를 지원하지 않을 경우 대신 표시되는 대체 텍스트 역할을 합니다.주요 속성value: 현재 측정값으로, 반드시 m
HTML의 <fieldset> 태그는 관련된 폼(form) 요소들을 하나의 그룹으로 묶어 화면에 표시할 때 사용됩니다. 이 태그를 적용하면 그룹 주위에 테두리 상자가 자동으로 생성되어 입력 항목들이 시각적으로 구분됩니다.특히 <fieldset> 태그와 <legend> 태그를 함께 사용하면 각 그룹에 제목(캡션)을 붙일 수 있어, 사용자가 폼의 구조와 목적을 훨씬 쉽게 파악할 수 있습니다. 복잡한 회원가입 양식이나 설문조사 폼을 만들 때 가독성과 접근성을 높이는 데 매우 유용합니다.기본 문법<fi
HTML5 <figure> 요소에 캡션을 추가하는 방법HTML5에서 <figure> 요소에 캡션(설명 텍스트)을 추가하려면 <figcaption> 태그를 사용합니다. <figcaption>은 <figure> 요소 내부에 위치해야 하며, 반드시 첫 번째 또는 마지막 자식 요소로 작성해야 합니다.<figure>는 이미지, 그래프, 코드 조각 등 본문에서 참조되는 독립적인 콘텐츠를 감싸는 데 사용되며, <figcaption>은 해당 콘텐츠에 대한 간단한 설명을 제
HTML5 <figure> 태그란? HTML5에서는 <figure> 태그를 사용하여 이미지, 다이어그램, 코드 목록처럼 문서 본문에서 참조되는 독립형 콘텐츠(self-contained content)를 마크업할 수 있습니다. 이 태그로 감싼 콘텐츠는 본문 흐름과 분리되더라도 그 자체로 의미가 유지되므로, 시맨틱 웹 구조를 만들 때 매우 유용합니다. 또한 <figure> 태그 내부에 <figcaption> 태그를 함께 사용하면 해당 콘텐츠에 대한 설명(캡션)을 추가할 수 있습니다. 예제 다음
HTML에서 문서에 대한 다양한 메타 정보를 포함하려면 <head> 태그를 사용합니다. HTML의 <head> 태그는 문서의 머리(head) 영역을 정의하는 역할을 하며, 이 안에는 문서 제목, 문자 인코딩 방식, 스타일시트 연결, 스크립트 참조 등 페이지 자체에 대한 정보가 들어갑니다.중요한 점은 <head> 태그 내부에 작성된 요소들은 브라우저 화면에 직접 표시되지 않는다는 것입니다. 사용자에게 보이는 콘텐츠는 모두 <body> 태그 안에 작성해야 합니다.기본 예제다음 코드를 실행하면
HTML <i> 태그란?HTML에서 텍스트를 기울임꼴(이탤릭체)로 표시하려면 <i> 태그를 사용합니다. 이 태그는 특별한 의미를 부여하지 않고 시각적으로만 기울임꼴 스타일을 적용할 때 주로 활용되며, 영화 제목·책 제목·외국어 표현·기술 용어 등을 나타낼 때 유용합니다.기본 사용 예제아래 코드를 실행하면 <i> 태그로 감싼 Avengers라는 단어가 기울임꼴로 출력되는 것을 확인할 수 있습니다.<!DOCTYPE html> <html> <hea
HTML의 <hr> 태그는 horizontal rule이라고도 불리며, 문서 내에 수평선(가로 구분선)을 만들 때 사용합니다. 주로 콘텐츠의 주제가 바뀌는 지점이나 섹션을 시각적으로 구분할 때 활용됩니다.hr 태그의 주요 속성HTML <hr> 태그는 아래와 같은 속성을 지원합니다. 다만, 이 속성들은 모두 HTML5에서 더 이상 권장되지 않는(deprecated) 속성이므로, 실제 프로젝트에서는 CSS를 사용해 스타일을 지정하는 것이 좋습니다.속성값설명alignleftrightcenter사용 중단됨 — 수평선의
HTML5에서는 <header> 태그를 사용하여 헤더를 추가할 수 있습니다. HTML의 <header> 태그는 문서 전체 또는 특정 섹션의 머리말(헤더) 영역을 정의하는 시맨틱 요소입니다.헤더 태그 안에는 일반적으로 제목(<h1>~<h6>), 로고, 내비게이션 링크, 소개 문구 등 해당 문서나 섹션을 대표하는 콘텐츠가 들어갑니다.예제다음 코드를 실행하면 문서에 헤더를 포함시키는 방법을 확인할 수 있습니다.<!DOCTYPE html> <html> &
HTML <keygen> 태그란?HTML <keygen> 태그는 웹 폼(web form)을 인증서 관리 시스템(certificate management system)과 연동하여 처리하기 위해 사용되는 요소입니다. 이 태그는 보안 키를 생성하고, 생성된 키 중 공개 키(public key)를 서버로 전송하는 역할을 합니다.동작 방식은 다음과 같습니다. 사용자가 폼을 제출하면 브라우저는 로컬 환경에서 키 쌍(key pair)을 생성하여 개인 키(private key)는 클라이언트에 저장하고, 공개 키만 서버에 전달
HTML의 <label> 태그는 텍스트 입력창, 텍스트 영역(textarea) 등 다양한 폼 컨트롤에 레이블을 추가할 때 사용합니다. 레이블을 사용하면 사용자가 어떤 항목을 입력해야 하는지 명확하게 알 수 있으며, 접근성 측면에서도 매우 중요한 역할을 합니다.label 태그의 주요 속성HTML <label> 태그는 아래와 같은 추가 속성을 지원합니다.속성값설명formform_id레이블이 속한 하나 이상의 폼을 지정합니다.for컨트롤 id연결할 입력 컨트롤의 id 속성 값과 동일한 값을 지정해야 합니다.사용 예제
HTML에서 폼 요소들을 그룹화할 때 사용하는 <fieldset> 태그에 제목(캡션)을 추가하려면 <legend> 태그를 사용하면 됩니다. <legend> 태그는 반드시 <fieldset> 태그 내부의 첫 번째 자식 요소로 작성해야 하며, 이렇게 하면 그룹 테두리 선 위에 제목이 자연스럽게 표시됩니다.legend 태그의 주요 속성<legend> 태그는 다음과 같은 속성을 지원합니다.속성값설명aligntopbottomleftright지원 중단(Deprecated) – 콘텐츠의 정렬