HTML5에서 작업의 완료 진행률을 시각적으로 표시하려면 <progress> 태그를 사용하면 됩니다. 이 태그를 활용하면 파일 업로드 상태나 다운로드 진행 상황 등을 직관적으로 보여주는 진행률 바(progress bar)를 손쉽게 만들 수 있습니다.<progress> 태그의 주요 속성HTML의 <progress> 태그는 다음과 같은 속성을 지원합니다.속성값설명maxmax작업 전체량을 나타내는 값입니다. 반드시 0보다 큰 유효한 부동 소수점 숫자여야 합니다.valuevalue현재까지 완료된 작업의 양을
HTML의 <spacer> 태그는 문서 안에 공백(whitespace)을 지정할 때 사용됩니다. 이 태그는 아래와 같은 추가 속성들을 지원합니다.속성값설명typeverticalhorizontalblock스페이서의 형태를 수직(vertical), 수평(horizontal), 블록(block) 중에서 지정합니다.size숫자스페이서의 높이 또는 너비를 픽셀 단위로 지정합니다. 이 속성은 type이 horizontal 또는 vertical일 때만 사용되며, type이 block일 경우에는 width 속성을 대신 사용합니다.wid
HTML 문서에 스크립트를 추가하려면 <script> 태그를 사용합니다. HTML의 <script> 태그는 자바스크립트(JavaScript)와 같은 스크립트를 HTML 문서 내에서 선언하거나 외부 파일로 불러올 때 사용되는 요소입니다. <script> 태그는 다양한 속성을 지원하여 스크립트의 로딩 방식, 문자 인코딩, 실행 시점 등을 세밀하게 제어할 수 있습니다. script 태그의 주요 속성 속성 값 설명 async 불리언 속성 스크립트가 비동기적으로 실행되도록 지정합니다. 스크립
HTML에서 작은 텍스트를 만들고 싶다면 <small> 태그를 사용하면 됩니다. <small> 태그는 감싸고 있는 텍스트의 글꼴 크기를 한 단계 작게 표시해 주며, 저작권 표기, 각주, 부가 설명처럼 본문보다 덜 강조하고 싶은 내용에 유용하게 활용됩니다.예제아래 코드를 직접 실행하면 HTML에서 작은 텍스트가 어떻게 화면에 표시되는지 확인할 수 있습니다.<!DOCTYPE html> <html> <head>
HTML <source> 태그는 <audio> 및 <video> 요소에서 사용할 멀티미디어 리소스를 정의하는 데 사용됩니다. 하나의 미디어 요소 안에 여러 개의 <source>를 지정하면, 브라우저가 미디어 유형과 코덱 지원 여부를 판단해 가장 적합한 소스를 자동으로 선택합니다.기본 예제다음 코드를 실행하면 HTML5에서 audio 요소 내부에 미디어 리소스를 정의하는 방법을 확인할 수 있습니다.<!Doctype html> <html> <head>
HTML에서 중요한 텍스트를 강조하고 싶다면 <strong> 태그를 사용하면 됩니다. <strong> 태그는 문서 내에서 특별히 중요한 내용을 강조할 때 사용하는 시맨틱(의미론적) HTML 태그입니다.<strong> 태그란?<strong> 태그는 단순히 글자를 굵게 표시하는 것을 넘어, 해당 텍스트가 중요하다는 의미를 브라우저와 검색 엔진에 전달합니다. 화면에는 기본적으로 굵은 글씨(bold)로 렌더링되지만, 스크린 리더를 사용하는 사용자에게는 더 강한 어조로 읽혀 접근성 측면에서도 유용합
HTML의 <strike> 태그는 텍스트 중앙에 선을 그어 표시하는 취소선(strikethrough) 텍스트를 지정하는 데 사용되었습니다. 하지만 이 태그는 HTML5에서 더 이상 지원되지 않는(deprecated) 요소이므로, 대신 <del> 태그를 사용해야 합니다.HTML의 <del> 태그는 삭제된 텍스트를 마크업하는 용도로, 브라우저에서는 해당 텍스트에 취소선을 그어 렌더링합니다. 문서에서 삭제된 내용이나 수정 전의 정보를 나타낼 때 유용하게 활용됩니다.예제다음 코드를 실행하면 HTML에서 취소
HTML에서 선택 가능한 목록(드롭다운 리스트)을 만들려면 <select> 태그를 사용합니다. 이 태그는 주로 폼(form) 내부에서 사용자가 여러 옵션 중 하나를 선택할 수 있도록 하는 선택 목록을 정의하는 데 활용됩니다.select 태그의 주요 속성HTML <select> 태그는 아래와 같은 다양한 속성을 추가로 지원합니다.속성값설명autofocusautofocus페이지가 로드될 때 드롭다운 목록에 자동으로 포커스가 지정되도록 합니다.disableddisabled입력 컨트롤을 비활성화합니다. 비활성화된 목록
HTML의 <table> 태그는 웹 페이지에서 표(테이블)를 정의할 때 사용됩니다. 이 태그 안에는 표의 구조를 구성하는 여러 하위 태그들이 포함되며, 행은 <tr>, 제목 셀은 <th>, 일반 셀은 <td> 태그로 작성합니다. HTML 테이블의 주요 속성 <table> 태그에는 표의 모양과 동작을 제어하는 다양한 속성이 있습니다. 아래 표에서 각 속성의 값과 설명을 확인해 보세요. 속성값설명 abbrabbreviated_text지원 중단(Deprecated) − 셀
HTML <sup> 태그란? HTML에서 위첨자(superscript) 텍스트를 만들려면 <sup> 태그를 사용합니다. 이 태그로 감싼 텍스트는 일반 텍스트보다 작은 글꼴 크기로 표시되며, 기준선보다 위쪽에 위치하게 됩니다. 가장 대표적인 활용 예는 수학식의 거듭제곱 표현입니다. 2<sup>3</sup> + 3<sup>2</sup> = 17 위 코드는 브라우저에서 2³ + 3² = 17과 같이 출력됩니다. 예제 아래 전체 코드를 실행하면 HTML 문서에서 위첨자가 실
HTML의 <multicol> 태그는 텍스트를 여러 열로 나누어 배치할 수 있게 해주는 태그로, 열의 개수와 크기를 직접 지정할 수 있습니다. 이 태그는 <div> 태그와 마찬가지로 그 안에 어떤 HTML 콘텐츠든 포함할 수 있으며, <multicol> 태그 내부의 모든 내용은 일반적인 방식으로 표시됩니다. 다만 Netscape 4에서는 내용을 하나의 열이 아닌 여러 열에 걸쳐 배치한다는 점이 특징입니다.참고: 이 태그는 Netscape 3 이상 버전에서만 지원되며, 현재는 폐기된(obsolete)
HTML에서 특정 텍스트가 줄바꿈되지 않도록 하려면 <nobr> 태그를 사용합니다. <nobr> 태그는 브라우저에게 해당 텍스트를 임의로 줄바꿈하지 말라고 지시하는 역할을 합니다.<nobr> 태그와 <wbr> 태그의 관계<nobr> 태그는 보통 <wbr>(word break opportunity) 태그와 함께 사용됩니다. <wbr> 태그는 줄바꿈이 불가능한 긴 텍스트 흐름 속에서 브라우저가 줄바꿈을 삽입해도 되는 위치를 알려주는 역할을 합니다.항상 강제로 줄
HTML의 <nav> 태그는 오직 내비게이션(navigation) 링크만을 포함하는 섹션을 정의할 때 사용합니다. 웹 페이지에서 주요 메뉴나 목차처럼 다른 페이지로 이동하는 링크들을 묶어주는 역할을 하며, 검색 엔진과 스크린 리더가 문서 구조를 더 잘 이해하도록 돕는 시맨틱(semantic) 요소입니다.<nav> 태그 사용 예제아래 코드를 실행하면 HTML5에서 <nav> 태그가 어떻게 동작하는지 직접 확인할 수 있습니다.<!DOCTYPE html> <html> &nb
<param> 태그란?HTML에서 객체(object)에 매개변수를 추가하려면 <param> 태그를 사용합니다. 이 태그는 <object> 태그 내부에 배치되며, 객체가 실행될 때 필요한 각종 설정값을 전달하는 역할을 합니다.<param> 태그는 아래와 같은 주요 속성들을 지원합니다.속성값설명name매개변수 유형매개변수의 고유한 이름을 정의합니다.typeMIME 타입매개변수의 인터넷 미디어 타입을 지정합니다.value값매개변수에 전달할 값을 지정합니다.valuetypedatarefobject
HTML에서 단락(문단)을 추가하려면 <p> 태그를 사용합니다. 브라우저는 <p> 태그로 감싼 텍스트 앞뒤에 자동으로 여백(margin)을 추가해 주기 때문에, 별도의 스타일 지정 없이도 문단이 시각적으로 깔끔하게 구분됩니다.예제아래 예제 코드를 실행하면 HTML에서 <p> 태그가 어떻게 작동하는지 직접 확인할 수 있습니다.<!DOCTYPE html> <html> <head> <title>HTML
HTML에서 드롭다운 목록에 옵션을 추가하려면 <option> 태그를 사용합니다. HTML의 <option> 태그는 폼(form) 내부에서 사용되며, 드롭다운 목록에 표시될 각각의 선택 항목을 정의하는 역할을 합니다.<option> 태그의 주요 속성<option> 태그는 다음과 같은 속성들을 추가로 지원합니다.속성값설명disableddisabled해당 입력 컨트롤을 비활성화합니다. 비활성화된 옵션은 사용자가 변경할 수 없으며, 포커스를 받을 수 없고 Tab 키 이동 시에도 건너뛰어집니다.l
HTML5에서는 <output> 태그를 사용하여 계산 결과나 사용자 작업의 결과를 화면에 표시할 수 있습니다. 이 태그는 주로 폼(form) 내부에서 스크립트로 계산된 값을 실시간으로 보여줄 때 활용됩니다.<output> 태그의 주요 속성HTML의 <output> 태그는 다음과 같은 추가 속성을 지원합니다.속성값설명forelement_id다른 요소들의 ID 목록을 지정합니다. 즉, 해당 계산에 입력값을 제공한 요소들이 어떤 것인지 나타냅니다.formform_id출력 요소를 문서 내 어느 위치에든 배치
HTML <plaintext> 태그란?HTML의 <plaintext> 태그는 문서 내 모든 텍스트를 입력된 그대로 화면에 렌더링하는 데 사용됩니다. 일반적인 마크업 태그는 물론, 문서를 구성하는 HTML 태그 자체까지도 서식 없이 원본 그대로 표시됩니다.<plaintext> 태그의 주요 특징이 태그가 등장하는 순간, 문서의 나머지 부분에 대한 모든 포맷팅이 무시되며 모든 텍스트가 입력된 상태 그대로 출력됩니다. 가장 큰 특징은 한 번 적용되면 이를 중단하거나 해제할 방법이 전혀 없다는 점입니다.사용이
HTML <pre> 태그란?HTML에서 미리 서식이 지정된(preformatted) 텍스트를 추가하려면 <pre> 태그를 사용합니다. HTML의 <pre> 태그는 원본 텍스트의 형식을 그대로 유지해야 하는 내용을 나타낼 때 사용되며, 소스 코드를 마크업할 때는 <code> 태그가 해당 코드를 감싸는 역할을 합니다.브라우저는 일반적으로 <pre> 태그로 감싸진 텍스트를 고정폭(fixed-pitch) 글꼴로 렌더링합니다. 이때 공백과 줄바꿈이 그대로 유지되며, 화면 너비에 맞춘 자동
HTML <q> 태그란 무엇인가요? HTML의 <q> 태그는 문장 안에 포함되는 짧은 인용문(short quotation)을 나타낼 때 사용합니다. 브라우저는 기본적으로 이 태그로 감싼 텍스트 앞뒤에 큰따옴표( )를 자동으로 붙여 화면에 표시합니다. 참고로 여러 단락에 걸치는 긴 인용문을 표시해야 할 경우에는 <q> 대신 <blockquote> 태그를 사용하는 것이 적절합니다. <q> 태그의 주요 속성 <q> 태그는 아래와 같은 속성을 추가로 지원합니다. 속성값설