1. div
<body>
<!-- 주석처리 -->
<!-- 사이트 전체 영역 -->
<div id="container">
<!-- 사이트 상단 영역(로고, 메인메뉴 등)-->
<div id="header">
<h1>우리 사이트</h1>
</div>
<hr/>
<!-- 사이트 내용 영역(내용, 사이드바) -->
<div id="content">
<!--왼쪽 사이드바 영역-->
<div id="sidebar">
<h2>메뉴 선택하기</h2>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</div>
<hr/>
<!-- 오른쪽 본문 영역 -->
<div id="main">
<h1>웹 접근성이란?</h1>
<h2>모든 사람들이 정보를 공유할 수 있는 공간</h2>
<p>
웹 접근성이란...
</p>
</div>
</div>
<hr/>
<!-- 사이트 하단 영역(카피라이트, 주소 등) -->
<div id="footer">
<address>
copyright©koreait.com
</address>
</div>
</div>
</body>
</html>2. checkbox
<p>
<h1>사이즈(다중선택)</h1>
95: <input type="checkbox" name="size" value="95" />
100: <input type="checkbox" name="size" value="100" checked />
105: <input type="checkbox" name="size" value="105" checked/>
</p>3. form
<form action="http://localhost/order.jsp">
<p>
<h1>사이즈(다중선택)</h1>
95: <input type="checkbox" name="size" value="95" />
100: <input type="checkbox" name="size" value="100" checked />
105: <input type="checkbox" name="size" value="105" checked/>
</p>
<p>
<h1>색상(단일 선택)</h1>
붉은색 : <input type="radio" name="color3" value="red" />
검은색 : <input type="radio" name="color3" value="black" checked />
파란색 : <input type="radio" name="color3" value="blue" />
</p>
<input type="submit" />
</form>4. radio check
<fieldset>
<legend>취미 선택하기</legend>
<div>
<input type="checkbox" name="hobby" id="hobby1" value="S" checked/>
<label for="hobby1">축구</label>
<input type="checkbox" name="hobby" id="hobby2" value="B" />
<label for="hobby2">농구</label>
<input type="checkbox" name="hobby" id="hobby3" value="K" />
<label for="hobby3">야구</label>
</div>
</fieldset>
<fieldset>
<legend>성별 선택하기</legend>
<div>
<input type="radio" name="gender" id="gender_m" value="M" checked/>
<label for="gender_m">남자</label>
<input type="radio" name="gender" id="gender_f"value="F" />
<label for="gender_f">여자</label>
</div>
</fieldset>5. select
<form action="http://localhost/color.jpg">
<h1>색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
</form>6. strong
- b 태그는 컨텐츠에 중요성 보다는 단순 텍스트 자체를 굵게 표시
- strong : 일반적으로 브라우저는 중요성, 심각함, 긴급함을 인지하게 된다.
<div>
<strong>글자를 굵게 표시</strong>
<br/>
<b>글자를 굵게 표시</b>
<br/>
<u>글자에 밑줄을 표시</u>
<br/>
<i>글자를 기울임 표시</i>
<br/>
<strong><u><i>글자 모양 태그도 중첩 가능하다</i></u></strong>
</div>
<div>
<span>span</span> 태그는
<span> 문장 단위로 텍스트 영역을 지정한 것</span>인데,
그 자체로는 아무 역할도 하지 않고, 문장의 특정 구역에
<span>css스타일</span>을 지정할 때 사용한다.
</div>7. table
- 테두리를 생성해준다.
<body>
<table border="2">
<tr>
<td>이름</td>
<td>성별</td>
<td>나이</td>
</tr>
<tr>
<td>홍길동</td>
<td>남</td>
<td>청주</td>
</tr>
<tr>
<td>최유빈</td>
<td>여</td>
<td>청주</td>
</tr>
</table>
</body>
개발자로 진로 변경을 위해 준비하고 있습니다