SELECT 태그
<body>
<select>
<optgroup label="클라이언트 언어">
<option value="html">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</optgroup>
<optgroup label="서버언어">
<option value="JSP">JSP</option>
<option value="Python">Python</option>
<option value="PHP">PHP</option>
</optgroup>
</select>
웹
SELECT와 OPT그룹 OPTION은 한 세트이다.
SELECT는 펼침목록을 만들어주는 HTML태그다.
각각의 항목은 OPTION으로 만들어 줄 수 있고. 그 옵션을 묶어주는게 OPT그룹이다.
input태그와 table태그를 혼합해서 간단한 로그인창 만들기
<body>
<table>
<tr>
<th> <input type="text" value="test"></th>
<td rowspan="2"><input type="button" value="로그인" style="width: 60px; height: 50px;"></td>
</tr>
<tr>
<th><input type="password" placeholder="pw입력" ></th>
</tr>
</table>
웹으로 구현된 로그인창
input 태그와 그에 맞는 text ,password,button 속성으로 각각 아이디와 패스워드, 로그인 을 생성해주고
table 태그, 자식 태그 tr로 묶어준다. 그뒤 로그인 버튼은 td 속성 rowspan으로 위아래 병합해서 깔끔하게 만들어준다.
#가로선 긋기
<body>
가로선긋기 <br>
기본값<hr>
size : 10 <hr size="10">
색:빨강 <hr color="red">
색:#FFE400 <hr color="#FFE400">
길이 : 160 <hr width="160" color="black">
정렬 : align - left <hr align = "left" width="300" color="black">
정렬 : align - center <hr align ="center" width="300" color="black">
정렬 : algin - right <hr align = "right" width="300" color="black">
음영제거 <hr noshade>
웹으로 구현된 hr태그에 쓰인 정렬,길이,색상의 속성들
#ul과 ol 목록태그
<body>
ul : unordered list 정렬되지 않은 목록
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째 <br>항목입니다</li>
</ul>
ol : ordered list 정렬된 목록
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째 <br>항목입니다</li>
</ol>
ul과 ol의 구현
#input 태그에 자주쓰이는 속성태그들.
button = 버튼
submit = 값을 넘겨줄 수 있다.
textarea = 칸을 늘려서 글을 길게 쓸 수 있다.
password = 텍스트 노출이 안되게 가려줄 수 있다.
radio = 원형의 체크항목
checkbox = 사각형의 체크항목
date = 년,월,일을 지정할 수 있는 로직을 생성해준다.
<body>
<input type="button" value="목록"><br><br>
<input type="submit" value="제출" style="width: 60px; height: 100px;"><br><br>
<input type="text" placeholder="아이디" size="13" ><br><br>
<input type="password" placeholder="비밀번호" maxlength="12"><br><br>
<textarea cols="10" rows="4"></textarea><br><br>
<input type="radio"><br><br>
<input type="checkbox"><br><br>
<input type="date">
웹으로 구현된 각각의 input 태그들 과 속성
예를 들어 input type = radio는 이렇게 쓰일 수 있다.
<input type="radio" name="age" <label for="age_10">10대</label><br>
<input type="radio" name="age" <label for="age_20">20대</label><br>
<input type="radio" name="age" <label for="age_30">30대</label><br>
<input type="radio" name="age" <label for="age_40">40대</label><br>
<fieldset>
<legend>취미 조사</legend>
<input type="checkbox"><label>독서</label>
<input type="checkbox"><label>운동</label>
<input type="checkbox"><label>여행</label>
<input type="checkbox"><label>게임</label>
</fieldset>
fieldset 태그와 legend 태그는 한세트이고 legend태그는 반드시 fieldset 태그 바로 밑에 작성이 되어야한다.
웹 구현
label을 이용하여 각각의 카테고리를 적어준다.
legend태그는 checkbox를 한묶음으로 만들어준다.
복습 끝.