[html] label 태그, article 태그

label 태그

label 태그는 for 속성을 가지고 있어 다른 요소와 결합할 때 자주 사용된다.

이때 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 한다.

 

label 요소는 웹 페이지에서 일반 텍스트처럼 보이지만, 마우스로 클릭할 경우 label로 연결된 요소를 곧바로

건드릴 수 있어 사용자의 편의성을 증가시킬 수 있다.

 

<button>,<input>,<meter>,<output>,<progress>,<select>,<textarea> 등에 같이 사용될 수 있다.

 

<input type="radio" name="ages" id="teen" value="teenage">
<label for="teen">10대</label><br>

위 코드처럼 사용하면 "10대" 라는 글자만 클릭해도 teen 아이디를 가지는 input 태그를 클릭한 것과 같은 결과가 나온다.

 

css 기본값

label {
  cursor: default;
}

 

 

article 태그

특정 영역을 그룹화할 때 사용한다.

<article>
   <h2>블로그 티스토리</h2>
   <ul>
      <li>포스팅1</li>
      <li>포스팅2</li>
      <li>포스팅3</li>
   </ul>
</article>

 

article 태그는 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다.

 

 

section 태그

section 태그는 주제별 영역들을 그룹화 할 때 사용하는데,

article 태그와 달리 독립적이지 않다.

 

<section>
   <h1>팜플렛</h1>
   <ul>
      <li>상품1</li>
      <li>상품2</li>
      <li>상품3</li>
   </ul>
   <p>상품의 실제이미지와 다를 수 있습니다.</p>
</section>

 

 

 

소스 참조

https://abcdqbbq.tistory.com/61

http://www.tcpschool.com/html-tags/label