이번 포스팅에서는 html의 엘리먼트 중 <label>엘리먼트에 대해 알아보도록 하자.
<label> 엘리먼트
<label>엘리먼트에 대한 설명을 하기에 앞서 body 영역에 <input>엘리먼트와 <label>엘리먼트를 생성하여 다음과 같은 모양을 만들어 주도록 하자. css style sheet에는 기본 세팅값으로 모든 엘리먼트에 margin: 0; 와 padding: 0;를 적용하도록 하자. ( 기본적으로 모든 margin 값과 paddding 값을 0으로 설정한 후 내가 원하는 데로, 입맛 데로 움직이는 것이 효율적이고 편하다. )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\practice.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon">
check
</label>
</body>
</html>/* CSS style sheet */
*{
margin:0;
padding:0;
}
위에 보이는 것처럼 <input>엘리먼트의 속성 type="checkbox"에 의해 체크박스가 만들어 졌고 <label>엘리먼트에 의해 "check"라는 글자가 체크박스 옆에 나타난 것을 확인할 수 있다.
여기서 사용된 <label>엘리먼트의 역할과 기능에 대해 알아보자. (input 엘리먼트에 관한 설명은 앞서 설명한 바 있으니 여기서는 생략하도록 하겠다) 웹 사이트 상에서 회원가입을 진행할 때 동의, 비동의를 체크하는 등 무언가를 체크해야 하는 경우가 있을 때 체크박스 자체를 선택해도 되지만 체크박스 옆에 명시되어 있는 글자들을 클릭해도 체크박스에 체크표시가 되는 경험을 해본 적이 있을 것이다. 체크박스를 클릭하는 데 어려움을 겪는 분들을 위한 보조적인 기능으로 볼 수 있으며 웹 접근성을 높여주는 기능이라고 볼 수 있다. 이러한 기능을 가능하게 해주는 것이 바로 <label> 엘리먼트이다.
우선 <input>엘리먼트와 <label>엘리먼트가 가지고 있는 속성은 기본적으로 inline 속성이다. <input>에 의해 만들어진 체크박스와 <label>엘리먼트 안에 입력된 텍스트는 인라인 스타일로 영역이 설정되게 된다. 그리고 <label> 엘리먼트를 사용해서 체크박스 옆에 있는 글자(여기서는 "check")를 클릭해도 체크박스에 체크가 되도록 할 수 있다. 여기서 주의해야할 점은 <input>엘리먼트에 id를 먼저 지정해 주고 지정한 id를 <label>엘리먼트에서 사용해야 한다는 것이다.
<input type="checkbox" id="icon">
<label for="icon"><label> 엘리먼트가 가지고 있는 for=" " 속성을 사용해서 사전에 미리 지정해 둔 <input>엘리먼트의 id값을 for 속성값으로 부여해 주어야만 한다. 그래야만 for 속성값과 같은 id 값이 있는 input박스를 선택해 줄 수 있는 기능이 구현되게 된다.
'HTML' 카테고리의 다른 글
| HTML 응용 - <table> , <input> , <form> 엘리먼트를 활용해 게시판 형식 만들기 (1) | 2021.12.29 |
|---|---|
| HTML 응용(1) - element들 간의 관계, 이미지 삽입하기 (0) | 2021.12.22 |
| HTML의 기초(3) - table 생성하기 (0) | 2021.12.21 |
| HTML 코드 (1)~(2) (0) | 2021.12.20 |
| HTML의 기초(2) - <a>, <input> element (0) | 2021.12.20 |