html 기초 마무리
- 웹/html
- 2020. 8. 23.
프레임셋
html문서의 레이아웃을 구성하기 위해 프레임 정보만을 가지는 html문서를 말한다.
프레임이적용된 html문서는 하나의 문서가아니라 프레임셋이 정의된 html문서와 이 문서에 정의된 각 프레임이 보여줄 html문서를 따로 만들어야 한다.
//프레임셋 예시!!
<!DOCTYPE html>
<html>
<head>
<title>프레임으로 링크 걸기 </title>
</head>
<frameset rows="30%, 70%">
<frame name="top" src="1.html" noresize>
<frame name="body" noresize>
</frameset>
</html>
//실제내용담긴파일
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li> <a href="http://www.netmarble.net" target="body">넷마블 바로가기</a>
<li><a href="http://game4.netmarble.net/ma9" target="body">마구마구 게임</a>
</ul>
</body>
</html>
| <form> 사용자와 웹사이트또는 어플리케이션이 서로 상호작용하는 것 중 중요한 기술중 하나. 사용자가 웹사이트에 데이터를 입력받을 수 있는 입력 폼을 정의할때 사용한다. <form>은 태그들을 하나 이상 포함할 수 있다. |
라디오 버튼, 체크박스, 드롭박스
어떤 기능인지는 설명하기 귀찮으니 사진으로 어떤 기능인지 대체하겠다.!
예제!
//체크박스
<html>
<head>
<title> 체크팍스는 라디오버튼과 다르게 여러가지 선택이 가능하다 </title>
</head>
<body>
<h2>1.제일 어려운 언어는?)</h2>
<input type="checkbox" name="lang" value="C" checked>C<br>
<input type="checkbox" name="lang" value="Java" checked>Java<br>
<input type="checkbox" name="lang" value="Python" checked>Python<br>
<input type="checkbox" name="lang" value="전부" checked>전부<br>
<body>
//라디오
<html>
<head>
<title> 라디오버튼 </title>
</head>
<body>
<h2>1.제일 어려운 언어는?</h2>
<input type="radio" name="lang" value="C" >C<br>
<input type="radio" name="lang" value="Java" >Java<br>
<input type="radio" name="lang" value="Python">Python<br>
<input type="radio" name="lang" value="전부">전부<br>
<body>
<html>
//드롭다운
<html>
<head>
<title> 드롭다운 </title>
</head>
<body>
<table>
<tr>
<td colspan="1">
<h2>가장 재미있는것을 선택해 주세요.</h2>
</td>
</tr>
<tr>
<td valign="top">
<select name="items1">
<option value="HTML">HTML</option>
<option value="자바스크립트">자바스크립트</option>
<option value="CSS">cSs</option>
</select>
</td>
</tr>
<td valign="top">
<select name="items2" size="3">
<option value="HTML">HTML</option>
<option value="자바스크립트">자바스크립트</option>
<option value="CSS">cSs</option>
</select>
</td>
</tr>
</table>
</body>
</html>
| 위의 코드를 보면 대충 알겠지만 type에 checkbox, radio,option을 value는 웹에서 보여지는게 아닌 실제 값 ( 대충 변수느낌 ) 그리고 >< 사이에 있는게 실제 웹에서 보여지는 텍스트다. name은 나중에 설명한다. (나도 잘 모르기때문) 그리고 드롭다운의 size가 그 박스(?)의 높이를 나타낸다. 사진에서 보이는것처럼 size를 지정하지 않은것은 한줄밖에 표시 안되지만 size를 지정해주면 값 1당 한줄씩 생긴다. |
Textfield/Area
이것도 사진으로 대체하겠다. 대충 보면 알거라고 생각
<html>
<head>
<title> 텍스트필드,영역 </title>
</head>
<body>
<br>//textfield, textarea 만들기<br>
//textfield
<b>이름:</b>
<input type="text" name="my_name" size="20" maxlength="6" value="이름을 입력하세요">
<b>비밀번호:</b>
<input type="password" name="my_name" size="20" maxlength="6" value="비밀번호는별">
//textarea
<b>자기소개:</b>
<textarea name="my_intro" clos="20" rows="5"></textarea>
<body>
<html>
| 위의것들과는 다르게 얘는 같은 텍스트필드인데도 타입이 다르다. 쉽게 말하자면 text는 내가 입력한 텍스트가 눈에 보인다. password로 지정하면 우리가 보통 비밀번호입력할때 입력한값이 '*'로 표시되는걸 알 수 있다. size는 박스의 크기고 maxlength는 최대 글자 수 이다. value에는 박스안에 표시될 문구를 넣을 수 있다. |
전송버튼,clear버튼
이것도 사진으로..ㅋㅋㅋ
<html>
<head>
<title> 텍스트필드,영역 </title>
</head>
<body>
<br><br>
<table>
<tr>
<td>
<b>이름:</b>
<input type="text" name="my_name" size="20" maxlength="6" value="이름을 입력하세요">
</td>
<tr><td>
<b>비밀번호:</b>
<input type="password" name="my_name" size="10" maxlength="6" value="비밀번호는별">
</td></tr>
<tr><td>
<b>자기소개:</b>
<textarea name="my_intro" clos="" rows="5"></textarea>
//두줄 추가
<input type="submit" value="전송하기">
<input type="reset" value="다시입력">
</td></tr>
<body>
<html>
| 근데 저 코드만으로는 딱히 아무 기능을 하지않는다 기능을 원한다면 form을 사용해야한다. (그건 뒤에) submit = 폼의 전송기능을 담당, reset = 폼 작성 내용을 초기화 하는데 사용 그리고 button도 있지만 submit과 기능이 같다. 하지만 button은 button 태그 사이에 다른 태그를 삽입 할 수 있는 장점이 있다. |
'웹 > html' 카테고리의 다른 글
| [html]기초 마무리 문제(회원가입창 모양새만들기) (0) | 2020.08.23 |
|---|---|
| html 테이블만들기 (0) | 2020.08.23 |
| html 기초 (0) | 2020.08.23 |