HTML에서 순서가 지정된 목록(ordered list)을 만들려면 <ol> 태그를 사용합니다. 순서 목록은 <ol> 태그로 시작하며, 각 목록 항목은 <li> 태그로 작성합니다. 목록 항목 앞에는 숫자, 영문 소문자(a, b, c), 영문 대문자(A, B, C), 로마 숫자(i, ii, iii) 등 다양한 기호가 붙을 수 있으며, 별도의 설정을 하지 않으면 기본적으로 숫자가 표시됩니다.type 속성으로 숫자 번호 지정하기숫자로 번호가 매겨진 순서 목록을 만들려면 <ol> 태그의 type
HTML에서 순서 목록(ordered list)을 만들려면 <ol> 태그를 사용합니다. 순서 목록은 <ol> 태그로 시작하고, 각 목록 항목은 <li> 태그로 표시됩니다. 목록 항목에는 기본적으로 숫자가 붙지만, 속성 설정에 따라 소문자 알파벳, 대문자 알파벳, 로마 숫자 등 다양한 방식으로 번호를 지정할 수 있습니다.type 속성으로 소문자 번호 지정하기소문자 알파벳으로 번호가 매겨진 순서 목록을 만들려면 <ol> 태그의 type 속성을 사용합니다. 이 속성에 a 값을 지정하면 목록 항목
HTML에서 표(table)의 셀을 병합하려면 colspan과 rowspan 속성을 사용합니다. 두 속성의 역할은 다음과 같습니다.rowspan: 셀이 세로로 걸쳐질 행(row)의 개수를 지정합니다.colspan: 셀이 가로로 걸쳐질 열(column)의 개수를 지정합니다.두 속성 모두 <td> 태그 내부에 작성하며, 값은 숫자로 입력합니다. 예를 들어 rowspan=2는 해당 셀이 2개의 행에 걸쳐 있다는 뜻이고, colspan=2는 2개의 열에 걸쳐 있다는 뜻입니다.기본 예제: 3행 3열 표 만들기먼저 HTML로 3행
HTML에서 테이블의 열(가로 셀)을 병합하려면 <td> 태그에 colspan 속성을 사용하면 됩니다. colspan은 column span의 약자로, 지정한 숫자만큼의 셀을 하나로 합쳐주는 역할을 합니다.예를 들어 4행 4열로 구성된 테이블이 있다면, colspan 속성을 활용해 셀 2개 또는 3개를 손쉽게 하나의 셀로 병합할 수 있습니다.기본 테이블 만들기먼저 colspan을 적용하기 전에, HTML로 3행 3열짜리 기본 테이블을 만드는 방법부터 살펴보겠습니다. 아래 코드를 실행하면 각각 독립된 9개의 셀을 가진 테이
HTML에서 테이블을 만들다 보면 여러 개의 셀을 하나로 합쳐야 하는 경우가 자주 있습니다. 이때 사용하는 것이 바로 rowspan과 colspan 속성입니다.rowspan과 colspan이란?rowspan과 colspan은 <td>(데이터 셀) 또는 <th>(헤더 셀) 태그에 적용되는 속성으로, 하나의 셀이 몇 개의 행(row) 또는 열(column)에 걸쳐 표시될지를 지정합니다.rowspan: 세로 방향으로 셀을 병합합니다. 즉, 지정한 숫자만큼 여러 행에 걸쳐 하나의 셀이 확장됩니다.colspan: 가로
HTML 테이블에는 수평 헤더와 수직 헤더를 모두 적용할 수 있습니다. 수평 헤더를 만들려면 모든 <th> 태그를 하나의 <tr> 태그, 즉 테이블의 가장 위쪽 행 안에 함께 배치해야 합니다. 이렇게 하면 각 열의 제목이 테이블 상단에 가로로 나열되어 데이터를 한눈에 파악하기 쉬워집니다. 예제 아래 코드를 직접 실행해 보면 테이블에 수평 헤더가 어떻게 설정되는지 확인할 수 있습니다. <!DOCTYPE html> <html> <head> &n
HTML에서 테이블 테두리를 만들 때 과거에는 border 속성을 사용했습니다. 그러나 HTML5가 도입되면서 이 속성은 더 이상 권장되지 않으며(사용 중단), 현재는 CSS의 border 속성을 사용하는 것이 표준적인 방법입니다. CSS로 테두리를 적용할 때는 <table> 요소뿐만 아니라 셀을 구성하는 <th>(제목 셀)와 <td>(데이터 셀)에도 각각 테두리를 지정해야 완전한 표 형태가 완성됩니다. 예제 아래 코드를 실행하면 HTML 테이블에 테두리가 적용된 결과를 확인할 수 있습니다. 여기서
HTML 테이블에서 접힌 테두리(collapsed border)를 만들려면 CSS의 border-collapse 속성을 사용하면 됩니다. 이 속성은 테이블 셀 사이의 테두리가 어떻게 표시될지를 결정하며, 다음과 같은 값을 가질 수 있습니다.속성 값설명separate테두리가 분리되어 각 셀마다 독립적인 테두리가 표시됩니다. 기본값입니다.collapse인접한 셀들의 테두리가 하나로 병합되어 단일 테두리로 표시됩니다.아래 예시를 통해 두 속성 값의 차이를 직접 확인해 보세요.예제 1: border-collapse: collapse 적용하
HTML에서 캡션이 포함된 테이블을 만들려면 <caption> 태그를 사용합니다. 캡션은 반드시 <table> 태그 바로 뒤에 위치해야 하며, 이렇게 작성된 캡션은 테이블 상단 중앙에 자동으로 표시됩니다.캡션은 스크린 리더 사용자에게도 테이블의 내용을 알려주는 역할을 하기 때문에, 웹 접근성 측면에서도 매우 유용한 요소입니다.예제 코드아래 코드를 실행하면 캡션이 있는 HTML 테이블을 직접 확인할 수 있습니다.<!DOCTYPE html> <html> <head&
HTML 테이블 셀 안의 텍스트를 가운데 정렬하려면 CSS의 text-align 속성을 사용해야 합니다. 과거에는 <table> 태그의 align 속성을 사용했지만, 이 속성은 HTML5에서 더 이상 지원되지 않으므로(deprecated) 사용하지 않는 것이 좋습니다. 대신 CSS를 활용해 텍스트 정렬을 처리하는 것이 표준적인 방법입니다.text-align 속성으로 셀 정렬하기테이블 셀은 <td> 태그로 구성되므로, 이 태그에 text-align 속성을 적용하면 됩니다. 이때 CSS를 추가하는 가장 간단한 방법
HTML 테이블에서 셀 사이의 간격, 즉 테두리 주변의 공간을 조절하려면 CSS의 border-spacing 속성을 사용하면 됩니다. 이 속성은 테이블 내부의 셀과 셀 사이 거리를 지정하며, 기본적으로 border-collapse: separate 상태일 때만 적용됩니다.값은 하나 또는 두 개를 지정할 수 있습니다. 하나만 입력하면 가로·세로 간격이 모두 동일하게 적용되고, 두 개를 입력하면 첫 번째 값은 가로 간격, 두 번째 값은 세로 간격으로 설정됩니다.예제 코드아래 예제는 border-spacing 속성을 활용해 HTML 테이
HTML에서는 테이블 셀 안에 다른 HTML 태그를 손쉽게 추가할 수 있습니다. 핵심 규칙은 간단합니다. 추가하려는 태그는 반드시 <td> 태그 내부에서 열고 닫아야 한다는 것입니다.예를 들어, 셀 안에 문단을 넣고 싶다면 <p>...</p> 태그를, 목록을 넣고 싶다면 <ul>...</ul> 태그를 <td>와 </td> 사이에 작성하면 됩니다.사용 가능한 주요 태그<td> 안에는 다음과 같은 다양한 태그를 자유롭게 사용할 수 있습니다.<p&
HTML에서 삭제된 텍스트를 표시하려면 <del>...</del> 태그를 사용합니다. 이 태그로 감싼 텍스트는 화면에 취소선이 그어진 형태로 렌더링됩니다.<del> 태그는 HTML5에서 새롭게 도입된 요소입니다. 그 이전에는 <strike> 태그가 삭제된 텍스트를 표시하는 용도로 사용되었지만, 현재는 폐기(deprecated)된 상태이므로 더 이상 사용하지 않는 것이 좋습니다.주의할 점: <del>...</del> 태그를 사용할 때는 여는 태그와 닫는 태그가 모두 반드
HTML에서 취소선(strikethrough) 텍스트를 표시하려면 과거에는 <strike>...</strike> 태그를 사용했습니다. 이 태그는 텍스트 가운데에 선을 그어 취소선 효과를 나타냅니다. 하지만 이 태그는 HTML 표준에서 더 이상 사용되지 않으며(deprecated), HTML5에서는 지원되지 않으므로 사용을 피해야 합니다.대신 CSS의 text-decoration 속성을 사용하는 것이 권장됩니다. CSS 속성을 적용하려면 style 속성을 활용하면 됩니다. style 속성은 요소에 인라인 스타일을
HTML에서 테이블 너비를 설정하려면 style 속성을 사용합니다. style 속성은 특정 요소에 인라인(inline) 스타일을 직접 지정하는 역할을 하며, HTML <table> 태그와 함께 CSS의 width 속성을 조합하여 테이블의 가로 크기를 조절할 수 있습니다.특히 주의할 점은, HTML5부터는 <table> 태그의 기존 width 속성을 더 이상 지원하지 않는다는 것입니다. 따라서 반드시 style 속성과 함께 CSS width 속성을 사용해야 합니다.style 속성 사용 시 유의사항style 속성으
HTML에서 문서에 새로 추가된(삽입된) 텍스트를 표시하려면 <ins>...</ins> 태그를 사용합니다. 이 태그는 같은 문서의 여러 버전 간 차이점을 비교할 때 특히 유용하며, 문서에 추가된 텍스트 범위를 명확하게 나타내는 역할도 합니다.브라우저는 기본적으로 <ins> 태그로 감싼 텍스트에 밑줄을 그려 삽입된 내용임을 시각적으로 구분해 줍니다. 문서 수정 이력을 추적하거나 편집 과정을 공개적으로 보여줘야 하는 상황에서 매우 유용한 요소입니다.예제아래 코드를 실행하면 HTML에서 삽입된 텍스트를 표
HTML에서 위첨자(superscript) 텍스트를 표시하려면 <sup>...</sup> 태그를 사용합니다. 이 태그를 사용할 때는 시작 태그와 종료 태그가 모두 반드시 필요하다는 점을 기억하세요.위첨자 텍스트의 특징위첨자로 지정된 텍스트는 일반 텍스트 줄보다 약 절반 글자 높이만큼 위쪽에 위치하고, 일반 텍스트보다 작은 글꼴 크기로 표시됩니다.위첨자 태그 사용 예제아래 코드를 통해 HTML에서 위첨자 텍스트를 표시하는 방법을 직접 확인해 보세요. 이 예제에서는 <sup> 태그를 사용하여 2의 4제곱
HTML에서 짧은 인용문을 표시할 때는 <q> 태그를 사용합니다. 단, 인용문이 여러 줄에 걸치는 경우에는 <blockquote> 태그를 사용해야 합니다. 대부분의 브라우저는 q 요소 앞뒤에 자동으로 따옴표를 삽입하므로, 별도의 스타일 지정 없이도 인용문임을 쉽게 나타낼 수 있습니다.또한 cite 속성을 활용하면 인용문의 출처를 URL 형식으로 명시할 수 있어, 인용 정보의 신뢰성을 높이는 데 도움이 됩니다.예제다음 코드를 실행하면 HTML에서 따옴표를 추가하는 방법을 직접 확인할 수 있습니다.<!DOCT
HTML에서 긴 인용문을 표현할 때는 <blockquote> 태그를 사용합니다. 이 태그는 다른 출처에서 인용한 내용의 한 구역(section)을 지정하며, 내부에는 단순한 일반 텍스트가 아닌 블록 레벨(block-level) 요소만 포함되어야 합니다.blockquote 태그의 cite 속성<blockquote> 태그에는 cite라는 속성이 있습니다. 이 속성은 HTML 문서에 언급된 인용문의 출처(원본 URL)를 명시하는 데 사용됩니다. 검색 엔진과 스크린 리더가 인용 출처를 이해하는 데 도움을 주므로, 출처
HTML에서 우편 주소를 마크업하려면 <address> 태그를 사용합니다. <address>...</address> 태그는 연락처 정보를 추가할 때 사용되며, 문서나 게시글 작성자의 연락 정보를 표시하는 용도로도 활용할 수 있습니다.주의할 점은 주소의 각 줄 끝마다 <br> 태그를 붙여야 한다는 것입니다. 이렇게 하면 줄바꿈이 적용되어 주소가 자연스럽게 여러 줄로 표시됩니다.예제아래 코드를 실행하면 HTML에서 우편 주소가 어떻게 표시되는지 직접 확인할 수 있습니다.<!DOCTYPE