HTML 표 제목(헤더)이란 무엇인가?HTML에서 표의 제목 또는 헤더를 만들려면 <th> 태그를 사용합니다. <th>(table header) 태그는 표 내부에서 헤더 셀을 정의하는 전용 태그로, 일반 데이터 셀인 <td>와 달리 기본적으로 굵은 글씨에 가운데 정렬로 표시됩니다.<th> 태그에는 다양한 속성을 적용할 수 있습니다. 아래 표에서 주요 속성과 그 값을 확인해 보세요.속성값설명abbr축약 텍스트사용 중단 — 헤더 셀 내용의 축약 버전을 지정합니다.alignrightleftcen
HTML 문서에 제목을 추가하려면 <title> 태그를 사용합니다. HTML의 <title> 태그는 해당 문서의 제목을 나타내는 역할을 하며, 반드시 <head>와 </head> 태그 사이에 위치해야 합니다.여기서 설정한 제목은 웹 페이지 본문에는 표시되지 않지만, 브라우저의 제목 표시줄이나 탭, 즐겨찾기(북마크) 목록, 그리고 검색 엔진 결과 페이지에 나타나므로 페이지의 내용을 잘 설명하는 제목을 작성하는 것이 좋습니다.예제다음 코드를 실행하면 HTML 문서에 제목을 추가하는 방법을 직접
HTML에서 테이블의 헤더(머리글) 영역을 만들려면 <thead> 태그를 사용합니다. <thead> 태그는 테이블에 헤더를 추가할 때 사용되며, <tbody>(본문) 및 <tfoot>(바닥글) 태그와 함께 사용하여 테이블을 구조별로 나누는 역할을 합니다.thead 태그의 주요 속성<thead> 태그는 아래와 같은 추가 속성을 지원합니다. 다만 이 속성들은 HTML5에서 더 이상 권장되지 않으며(Deprecated), 대신 CSS를 사용해 스타일을 지정하는 것이 좋습니다.속성값설명
HTML 테이블에 행 추가하기HTML에서 테이블에 새로운 행을 추가하려면 <tr> 태그를 사용합니다. <tr>(table row) 태그는 테이블 내부에서 하나의 행을 정의하는 역할을 하며, 행 안의 각 셀은 <td>(데이터 셀) 또는 <th>(헤더 셀) 태그로 작성합니다.HTML <tr> 태그는 아래와 같은 추가 속성도 지원합니다.속성값설명alignrightleftcenterjustifychar사용 중단(Deprecated) − 텍스트의 시각적 가로 정렬을 지정합니다.bgcolo
HTML에서 텍스트에 밑줄을 그리려면 <u> 태그를 사용할 수 있습니다. 아래 코드를 실행하면 HTML 문서에서 밑줄이 그어진 텍스트를 확인할 수 있습니다.참고: <u> 태그는 현재 폐기(deprecated)된 요소로, 최신 웹 표준에서는 사용하지 않는 것이 권장됩니다. 대신 CSS를 활용하는 것이 좋습니다.<u> 태그 사용 예제<!DOCTYPE html> <html> <head> &
HTML의 <tt> 태그는 텔레타이프(teletype) 텍스트, 즉 타자기처럼 고정폭(monospace) 글꼴로 표시되는 텍스트를 지정할 때 사용됩니다. 아래 예제 코드를 실행하면 <tt> 태그가 실제로 어떻게 작동하는지 직접 확인할 수 있습니다.사용 예제<!DOCTYPE html> <html> <head> <title>HTML tt Tag</title> &nbs
HTML에서 순서 없는 목록(unordered list)을 만들려면 <ul> 태그를 사용합니다. 순서 없는 목록은 항목의 나열 순서가 중요하지 않을 때 유용하며, 각 항목 앞에는 기본적으로 불릿(bullet) 기호가 표시됩니다.<ul> 태그의 주요 속성<ul> 태그는 아래와 같은 추가 속성을 지원합니다.속성값설명Typedisccirclesquare사용 중단(Deprecated) — 불릿 기호의 스타일을 지정합니다.Compactcompact사용 중단(Deprecated) — 간결한 렌더링이 필요한지 여
HTML <var> 태그란? HTML 문서에 변수를 추가하려면 <var> 태그를 사용하면 됩니다. 이 태그는 문서 내에서 수학적 표현이나 프로그래밍 관련 변수를 나타낼 때 사용되며, 대부분의 브라우저에서는 해당 텍스트가 기울임꼴(italic)로 자동 표시됩니다. <var> 태그는 단순히 글자 모양만 바꾸는 것이 아니라, 이 부분은 변수입니다라는 의미를 브라우저와 검색 엔진에 전달하는 시맨틱(의미론적) 요소입니다. 따라서 웹 접근성과 문서 구조 측면에서도 유용하게 활용할 수 있습니다. 사용 예제 다음
HTML5에서 날짜와 시간을 추가하는 방법 HTML5에서 문서에 날짜와 시간을 추가하려면 <time> 태그를 사용하면 됩니다. HTML의 <time> 태그는 사람이 읽기 쉬운(human-readable) 형식으로 날짜와 시간을 화면에 표시하는 역할을 하며, 콘텐츠에 시간 정보라는 의미를 부여하는 시맨틱(semantic) 요소이기도 합니다. 또한 이 태그는 검색 엔진이나 브라우저처럼 기계가 정확한 시간 정보를 해석할 수 있도록 돕는 속성도 함께 제공합니다. time 태그의 주요 속성 속성값설명 dateti
HTML5에서는 <track> 태그를 사용하여 비디오나 오디오 등 미디어 플레이어에 자막, 캡션, 설명과 같은 텍스트 트랙을 추가할 수 있습니다.텍스트 트랙이란?텍스트 트랙은 영상 재생 중 화면 위에 표시되는 자막이나 부가 정보를 의미합니다. <track> 태그는 반드시 <video> 또는 <audio> 요소 내부에 위치해야 하며, WebVTT(.vtt) 형식의 자막 파일을 연결합니다.<track> 태그의 주요 속성은 다음과 같습니다.src: 자막 파일(.vtt)의 경로를 지정합
HTML의 <style> 태그는 HTML 문서의 <head> 영역 안에서 스타일 시트(CSS)를 선언할 때 사용됩니다. 이 태그 내부에 작성한 CSS 코드는 해당 문서 전체에 적용되며, 요소의 색상·크기·테두리 등 다양한 시각적 속성을 자유롭게 제어할 수 있습니다. <style> 태그의 주요 속성 속성값설명 typetext/css스타일 시트 언어를 콘텐츠 유형(MIME 타입)으로 지정합니다. mediascreen컴퓨터 모니터처럼 일반적인 화면에 문서가 표시될 때 적용됩니다. ttytvproje
HTML에서 테이블의 본문(body) 영역을 정의하려면 <tbody> 태그를 사용합니다. <tbody> 태그는 테이블에 본문 부분을 추가할 때 사용되며, <thead>(헤더) 태그와 <tfoot>(푸터) 태그와 함께 사용하여 테이블을 머리글, 바닥글, 본문으로 구조화할 수 있습니다.<tbody> 태그의 주요 속성<tbody> 태그에서 사용할 수 있는 속성은 다음과 같습니다. 아래 속성들은 모두 HTML5에서 더 이상 권장되지 않는(deprecated) 속성이므로, 실제
HTML에서는 <sub> 태그를 사용하여 첨자(subscript) 텍스트를 만들 수 있습니다. 첨자 텍스트는 일반 텍스트보다 작은 크기로 표시되며, 기준선 아래쪽에 위치합니다.sub 태그란?HTML의 <sub> 태그는 수학 공식이나 화학식처럼 아래 첨자가 필요한 텍스트를 정의할 때 사용됩니다. 예를 들어 다음과 같이 표현할 수 있습니다.x<sub>1</sub> + x<sub>2</sub>예제아래 코드를 실행하면 HTML에서 아래 첨자 텍스트가 실제로 어떻게 표시되는지
HTML5에서는 <summary> 태그를 사용하여 <details> 태그로 추가한 내용의 요약(제목)을 지정할 수 있습니다. 이 두 태그를 함께 사용하면 사용자가 요약 부분을 클릭했을 때 상세 내용이 펼쳐지거나 접히는 인터랙티브한 위젯을 자바스크립트 없이 간단하게 만들 수 있습니다.예제다음 코드를 실행하면 HTML5에서 요약이 어떻게 표시되는지 직접 확인할 수 있습니다.<!DOCTYPE html> <html> <head>
HTML에서 테이블 셀을 표시하려면 <td> 태그를 사용합니다. HTML의 <td> 태그는 테이블(table) 안에 하나의 셀, 즉 테이블 데이터(table data)를 정의할 때 사용됩니다.<td> 태그는 다음과 같은 속성들을 지원합니다.속성값설명abbrabbreviated_text지원 중단(Deprecated) − 셀 내용의 축약된 버전을 지정합니다.alignright, left, center, justify, char지원 중단(Deprecated) − 시각적인 가로 정렬을 지정합니다.axisna
HTML 텍스트 영역(textarea)이란? HTML에서 텍스트 영역을 표시하려면 <textarea> 태그를 사용합니다. <textarea> 태그는 폼(form) 내부에서 여러 줄 텍스트 입력 요소를 선언하는 데 사용되며, 사용자가 여러 줄에 걸쳐 자유롭게 텍스트를 입력할 수 있는 컨트롤을 제공합니다. 주소, 상품 리뷰, 상세 설명처럼 한 줄 입력 필드(<input type=text>)로는 부족한 긴 텍스트를 받아야 할 때 특히 유용합니다. <textarea> 태그의 주요 속성 속성값
HTML에서 표(table)에 바닥글(footer)을 추가하려면 <tfoot> 태그를 사용합니다. 이 태그는 <thead>(표 머리글)와 <tbody>(표 본문) 태그와 함께 사용되어 표의 각 영역, 즉 머리글·본문·바닥글을 구조적으로 구분하는 역할을 합니다. tfoot 태그의 주요 속성 <tfoot> 태그에서 사용할 수 있는 속성은 다음과 같습니다. 아래 나열된 속성들은 모두 HTML5에서 더 이상 권장되지 않는(deprecated) 속성이므로, 실제 프로젝트에서는 CSS로 대체하는 것이
HTML에서 앵커를 만들려면 <a> 태그를 사용합니다. <a> 태그는 다른 문서로 연결되는 하이퍼링크를 생성하거나, 현재 문서 내의 특정 위치로 이동하는 링크를 만들 때 사용됩니다.<a> 태그의 주요 속성앵커 태그에서 활용할 수 있는 주요 속성은 다음과 같습니다.속성값설명charsetcharacter_encoding연결된 문서의 문자 인코딩을 정의합니다.coordsshape = rect이면 coords = left, top, right, bottomshape = circ이면 coords = cente
HTML 문서에 약어를 포함하려면 <acronym> 태그를 사용합니다. 이 태그는 HTML이나 WWW처럼 단어의 첫 글자들을 조합해 만든 축약어를 나타낼 때 활용되며, title 속성과 함께 사용하면 마우스 커서를 올렸을 때 해당 약어의 전체 의미를 툴팁 형태로 보여줄 수 있습니다.아래 예제 코드를 직접 실행해 보면서 <acronym> 태그가 어떻게 동작하는지 확인해 보세요.예제<!DOCTYPE html> <html> <head> <title>HT
HTML의 <abbr> 태그는 약어(축약어)를 나타낼 때 사용됩니다. 이 태그에 title 속성을 함께 지정하면, 사용자가 해당 약어 위에 마우스 커서를 올릴 때 전체 의미가 툴팁 형태로 표시되어 문서의 가독성과 접근성을 크게 높일 수 있습니다.abbr 태그의 주요 특징약어나 두문자어(WHO, HTML 등)를 의미론적으로(markup) 표현할 수 있습니다.title 속성에 전체 명칭을 넣으면 브라우저가 자동으로 툴팁을 제공합니다.검색 엔진과 스크린 리더가 약어의 의미를 정확히 인식하도록 도와 웹 접근성이 향상됩니다.예제