01. 레이블 태그(Label Tag)란
폼요소에 말 그대로 이름표라 할 수 있는 레이블을 붙이는 태그로 레이블 태그를 사용하거나 사용하지 않거나 웹상으로로 보기에는 달라지는 것은 없습니다. 하지만 사용자가 버튼 또는 글상자를 클릭하는 대신 텍스트를 클릭하더라도 글상자를 클릭하는 것처럼 선택할 수 있기 때문에 사용자 측면에서는 웹접근성이 개선됩니다
02. 레이블 태그(Label Tag) 코딩
작성할 때 <label for>~</label> 태그안에 속성을 사용하여 input 요소를 감싸는 방식으로 제어할 수 있습니다.
01) <body>~~</body> 태그안에 작성합니다.
02) 웹에서 폼을 만들때는 <form>~~~</form> 태그를 입력하게 되면 <form> 태그로 감싸진 관련된 정보를 모두 한묶음으로 처리합니다. 여기서 <form action="" method="">의 속성 action=""은 폼에서 입력된 내용의 처리방식을 말하며, 속성 method=""는 전달방식을 말합니다.
.
03) 입력받을 정보들을 적습니다. 여기서는 이름, 패스워드, 전화번호를 입력받습니다.
04) <label for="이름">~~~</label> 사이에 이름, 패스워드, 전화번호를 레이블로 묶습니다.
05) <input>~</input> 태그를 작성합니다. <label for="이름">~~~</label>과 <input type="" id="이름">에서 이름이 서로 일치해야 합니다. <input>태그는 기본값으로 옆으로 나오기 때문에 아래로 줄바꿈을 하기 위해 <br>태그로 줄바꿈을 하여 줍니다.
.
06) HTML 링크태그코딩이 완료되었으면, 단축키인 Ctrl+S를 누른 후 저장하면 됩니다.
----------
----------
03. 웹브라우저에서 보이는 레이블 태그
HTML에서 작성한 대로 웹상에 보이게 하기 위하여 Ctrl+ F1키를 눌러 해당 HTML을 불러옵니다. 여기서는 구글의 크롬 브라우저을 연결하였습니다.
브라우저를 실행한 뒤 이름, 패스워드, 전화번호의 텍스트를 클릭하게 되면 커서가 이름이나 패스워드, 전화번호 텍스트 옆의 input 박스에서 빨간원에서 있는 것처럼 깜빡거리는 것을 볼 수 있습니다.
이러한 효과는 특히 눈이 잘 보이지 않는 분들을 위하여 이름이라고 읽어주게 되면 이름의 input 박스에서 커서가 깜박여 바로 타이핑을 할 수 있게 하여 장애인에게 웹 접근성을 높여주기 위한 기능이라 할 수 있습니다.
이처럼 <label>~~</label> 태그를 사용하지 않으면 위의 이름, 패스워드, 전화번호는 단지 텍스트에 불과하지만, <label>~~</label>로 묶게 되면 웹이 자동으로 묶인 텍스트가 폼요소와 연결되어, 텍스트가 무엇의 이름표인지에 대한 의미를 부여하게 됩니다.
9급 관세직공무원 
