HTML 속성(Attribute)이란?
속성(attribute)은 이미지나 캔버스(canvas)의 너비와 높이처럼 HTML 요소의 다양한 특성을 설정하는 데 사용됩니다. 모든 HTML 요소는 속성을 가질 수 있으며, 속성은 해당 요소에 대한 추가 정보를 제공합니다. 속성은 반드시 이름(name)과 값(value)으로 구성됩니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<canvas id="newCanvas" width="400" height="300">
또 다른 예시도 살펴보겠습니다.
<img alt="대체 텍스트">
HTML5 표준에 따르면 속성 값을 따옴표로 감싸는 것은 필수가 아닙니다. 하지만 코드의 일관성과 가독성을 위해 항상 따옴표를 사용하는 것이 좋은 습관입니다.
지금부터 HTML에서 속성을 실제로 활용하는 대표적인 예제 두 가지를 살펴보겠습니다.
1. HTML <ol> 태그의 start 속성
<ol>(순서 있는 목록) 요소의 start 속성은 목록의 첫 번째 항목이 시작되는 번호를 지정하는 데 사용됩니다. 기본값은 1이며, 이 속성을 활용하면 원하는 숫자부터 목록 번호를 시작할 수 있습니다.
문법
기본 문법은 다음과 같습니다.
<ol start="num">
위 코드에서 num은 첫 번째 목록 항목의 시작 값으로 설정할 숫자입니다.
예제
<ol> 요소의 start 속성을 구현한 전체 예제 코드입니다.
<!DOCTYPE html> <html> <body> <h1>지난 학기 MCA 시험 결과</h1> <h2>1~5등</h2> <ol> <li>Steve</li> <li>David</li> <li>Kane</li> <li>William</li> <li>John</li> </ol> <h2>5~10등</h2> <ol start="5"> <li>Tom</li> <li>Jack</li> <li>Will</li> <li>Harry</li> <li>Tim</li> </ol> </body> </html>
실행 결과
위 코드를 실행하면 두 번째 목록이 5번부터 번호가 매겨져 출력됩니다. 이처럼 하나의 페이지에서 여러 개의 연속된 순위 목록을 자연스럽게 표현할 수 있습니다.
2. HTML <textarea> 태그의 autofocus 속성
<textarea>(여러 줄 입력 필드) 요소의 autofocus 속성은 페이지가 로드되는 즉시 해당 입력 영역에 커서가 자동으로 위치하도록 설정합니다. 이 속성은 HTML5에서 새롭게 도입되었으며, 불리언(boolean) 속성이므로 별도의 값 없이 속성명만 작성하면 됩니다.
문법
기본 문법은 다음과 같습니다.
<textarea autofocus>
예제
<textarea> 요소의 autofocus 속성을 구현한 예제 코드입니다.
<!DOCTYPE html> <html> <body> <h2>면접 질문</h2> <p>기술 문서 작성자(Technical Writer) 직무에 지원하고 싶은 이유는 무엇인가요? (100자 이내)</p> <textarea rows="6" cols="70" autofocus> 100자 이내로 답변을 작성해 주세요... </textarea> <p>본인의 강점은 무엇인가요? (50자 이내)</p> <textarea rows="4" cols="70" autofocus> 50자 이내로 답변을 작성해 주세요... </textarea> </body> </html>
실행 결과
위 코드를 실행하면 페이지가 열리는 즉시 첫 번째 <textarea>에 커서가 자동으로 놓이므로, 사용자가 마우스를 클릭하지 않고도 바로 답변을 입력할 수 있습니다. 설문조사나 면접 답변 폼처럼 빠른 입력이 필요한 화면에서 유용하게 활용됩니다.
