html5 그룹핑 태그 Fieldset legend

웹사이트 페이지 작성할때 그룹별로 묶고자 할때 fieldset 태그를 활용하면 편리합니다. 테두리안에 정보를 표시할수 있게 하는데, 테두리를 타이틀로 묶어 주는 역할을 'Legend' 태그로 표현하는데 아주 간편하면서도 심플한 태그로 자주 활용합니다.

 

form 태그, div 태그와도 함께 사용할수 있습니다.

 

 

 

form 태그와 함께 사용할 경우

<form action="/onasong.php">
  <fieldset>
    <legend>운영하는 사이트</legend>
    <label for="fname">티스토리</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">블로그</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">유튜브</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">트위터</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

 

위의 태그를 미리보기 하면 아래 이미지로 표현됩니다.

 

 

 

 

이것을 응용해 일반 문서로 작성하게 되면

 

<div style="font-size:16px;font-family:'나눔고딕';color:#666666;vertical-align:middle;padding:20px 0px;line-height:24px; text-align:left;width:100%;;margin:auto;"> 
 <fieldset style="padding:15px;border:10px #5363bb solid;">
    <legend style="font-size:24px;font-weight:700;width:auto;text-align:center;">성장호르몬 분비 도움되는 음식</legend>
    <p style="line-height:26px;">중년 이후 건강과 장수를 위해 가장 먼저 챙겨야 할 호르몬이 성장호르몬으로
나이가 들어도 성장호르몬만 잘 분비 된다면 노화를 극적으로 늦출수 있고 면역과 건강을 모두 
제대로 챙길수 있습니다.
     </p>
  </fieldset>
  </div>

 

 

위의 코드를 웹에서 미리보기 하면 아래 이미지처럼 강조하는 기능으로도 활용할수 있습니다.

 

 

 

 

이상 오늘은 html5 중

fieldset과 legend 태그에 대해 알아 보았습니다.