버튼과 semantic 태그

1. 버튼

• radio : 선택 버튼. name이 같은 버튼끼리 중복불가

<input type="radio" name="color2">

• checkbox : radio버튼 + 다중선택

<input type="checkbox" name="size" value="95">

• 목록에서 선택하는 버튼

<select name="color">
  <option value="red">붉은색</option>
  <option value="black">검은색</option>
  <option value="blue">파란색</option>
</select>

○ 구현

• html 코드

<div>
  <form action="http://localhost/form.jsp">
    <input type="submit" value="회원가입">
    <input type="button" value="버튼">
    <button type="button">버튼2</button>
  </form>
</div>
<div>
  <form>
    <input type="text">
    <input type="submit" value="전송">
    <input type="reset">
  </form>
</div>
<p>
	<h4>사이즈(다중선택)</h4>
	95 : <input type="checkbox" name="size" value="95">
	100 : <input type="checkbox" name="size" value="100">
	105 : <input type="checkbox" name="size" value="105">
<p>
<p>
	<h1>색상(단일선택)</h1>
	붉은색 : <input type="radio" name="color3" value="red" checked>
	검은색 : <input type="radio" name="color3" value="black">
	파란색 : <input type="radio" name="color3" value="blue">
</p>

• 웹 브라우저 상에서의 화면
  버튼2

  사이즈(다중선택)

  95 : 100 : 105 :

  색상(단일선택)

  붉은색 : 검은색 : 파란색 :

2. 의미론적 태그

• semantic 태그
• 문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 한다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그를 새롭게 정의하고 있다.

2-1. SEO(Search Engin Optimization)

• 검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 태그를 잘 활용한다면 특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 노출괼 수 있다.

2-2. 유지보수성

• 단순히 div 태그로만 모든 구조를 짜는 것보다 더 한눈에 알아볼 수 있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.

2-3. 예시

<header>, <footer>, <article>, <section>, <nav>, <aside>, <main>

• 위와 같은 태그들이 있다.