10.다양한 상호작용 요소 그룹짓기(fieldset,legend)

form안에 들어가는 다양한 요소들을 그룹짓는 태그를 알아보자 

안드로이드의 ViewGroup같은것으로 볼수있다.

예를들어 회원 가입시에 필수로 등록할정보와 선택적으로 등록할 정보를 나눠서 그룹짓는다던가 할때 사용하는것 같다.

fieldset과 legend는 한쌍으로 사용하는것같다. fieldset은 영역을 나누고 legned는 해당 영역에 제목을 붙이는것이라고 보면된다. 

 

fieldset 태그 : 상호작용하는 다양한 요소들을 그룹짓기 위해서 사용된다. 

See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.

설명

사용시에 사각형틀이 생성된다. 그안에 필요한 상호작용 요소들을 넣어 사용하면된다. legend와 개별적으로 사용해도 동작하는것을 알수있다.

legend 태그 : 위에서 소개한 fieldset태그에 제목을 붙이는데 사용된다.

설명

단독으로 사용시에는 별다른 효과가 없음으로 코드펜은 생략하며 단독으로 사용하였을시에 legend 태그의 콘텐츠(텍스트)만 표기된다.

두 태그를 조합하여 사용한 예시

 

See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.

HTML에 태그에 대해 알아보다보면 단독으로 사용되지 않는 태그들이 존제하는데. 코드 예시를 만들때는 하나하나 쪼개서 정리하고 싶다. 무언가 하나의 태그를 설명하는데.. 다른 태그가 들어가 있는것이 뭔가 강박적으로 마음에 들지 않는다.