저번 시간에 이어서 남은 몇 가지 태그를 이어가자.
<Form 태그>
@ form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 폼 관련 태그
사용자가 웹사이트로 정보를 보낼 수 있는 요소들을 폼이라고 한다.
- form 태그
<form 속성 ="값"...> 여러 폼 요소 태그... </form>
- form 태그 속성
action : 사용자가 입력한 내용을 서버쪽으로 보내 처리해줄때
서버에서 사용할 경로
method : 사용자가 입력한 내용들을 서버쪽으로 어떻게 넘겨줄지 전송 방식 지정
get : 브라우저 주소창에 사용자가 입력한 내용이 그대로 드러남
post : 입력내용이 주소창에 드러나지 않고 내부에 담아 전송. 길이제한
name : 폼태그에 이름 붙혀주는 속성. form 태그 여러개면 구분하기 위해.
target : action에 지정한 경로를 현재 창이 아닌 다른 위치에 열도록 지정
autocomplete : 자동완성기능
- input 태그
: 홑태그로 폼태그 안에서 사용자가 입력하는 부분을 만들때 주로 사용
한줄 글자, 체크박스, 로그인 버튼등 여러 타입이 존재
* type 속성의 속성값
text : 한줄짜리 텍스트 입력할 수 있는 텍스트 상자
hidden : 화면상에는 보이지 않지만, 서버로 전송할때 함께 숨겨서 전송하고 싶을때 사용
value속성으로 넘길 값도 작성해주어야함!!
password : 비밀번호 입력함. 작성한 내용이 *. 으로 표시됨
radio : name 속성으로 묶어서 한개의 항목만 선택하게 할때 사용
Checkbox : 두개 이상의 여러가지 선택 가능
color : 색상 선택 상자
date, month, week : 날짜(년,월,일), 월 년, 주 년 선택
reset : 입력된 모든 정보 초기화. value에 지정한 값이 버튼에 표시됨.
submit : 사용자가 입력한 정보를 서버로 전송시키는 버튼. value에 지정한것이 버튼에 표기.
image : 이미지 버튼. submit과 같은 기능 src 속성 기입
file : 파일 첨부시 (웹에서 자세히)
*input의 다른 속성
autofocous : 입력 커서 자동으로 표시되게
placeholder : 입력박스에 기입할 내용 힌트로 표시
readonly : 읽기전용
required : 필수 기입 요소로 지정
min, max, step : 최대값, 최소값, 간격 (숫자 조건)
size, minlength, maxlengrg : 길이, 최소길이, 최대길이 (텍스트 관련 조건)
-->
<form action="html08_action.html" method="get">
<!-- action에 지정한 폴더로 정보가 감 -->
<input type="text" name="txt" value="haha" /> <br />
<input type="hidden" name="hiddenVal" value="10" /> <br />
<input type="password" name="pw" /> <br />
<input type="radio" name="subject" checked/> java <br />
<input type="radio" name="subject" /> jsp <br />
<input type="radio" name="subject" /> SPRING <br />
<input type="checkbox" name="css" checked value="css" /> css <br/>
<input type="checkbox" name="js" value="js" /> js <br/>
<input type="color" name="col" />
<input type="date" name="date" />
<input type="month" name="mon" />
<input type="week" name="wk" />
<input type="time" name="time" />
<input type="datetime-local" name="local" />
<input type="reset" value="reset" />
<input type="image" src="img/tayo.jpg" width="30%"/>
<input type="button" value="새창열기" onclick="window.open()" /> <br />
<input type="file" name="upload" />
<input type="submit" value="검색" />
</form>
</body>
</html>
내용이 긴데 코드를 사진으로 보자면
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<input type="text" name="txt" autofocus/> <br />
<input type="text" name="txt2" placeholder="yyyy-mm-dd" /> <br />
<input type="text" name="txt3" readonly value="읽기전용"/> <br />
<input type="text" name="txt4" required /> <br />
<input type="submit" value="submit" />
</form>
</body>
</html>
```
<옵션 선택 태그>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 옵션중에 선택하는 태그 : selet -->
<form>
<select name="opt">
<option value="1" selected>내용1 </option>
<option value="2"> 내용2</option>
<option value="3"> 내용3</option>
<option value="4"> 내용4</option>
</select>
<br />
<!-- 여러줄 입력하는 텍스트 영역-->
<textarea cols="20" rows="5" name="txt"> 안녕하세요</textarea>
<!-- 버튼 태그 -->
<button type="button" onclick="alert('hello')">전송</button>
</form>
</body>
</html>
<앵커 만들기>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1> 앵커 만들기 </h1>
<ul id="menu">
<li><a href="#content1" >메뉴1</a> </li>
<li><a href="#content2" >메뉴2</a> </li>
<li><a href="#content3" >메뉴3</a> </li>
</ul>
<h2 id="content1">내용1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam,
ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum
molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.
</p>
<a href="#menu">메뉴로 돌아가기</a>
<h2 id="content2">내용2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam,
ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum
molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur
iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos
dolorum sapiente? Et cum veniam quod.
</p>
<a href="#menu">메뉴로 돌아가기</a>
<h2 id="content3">내용3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam,
ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum
molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur
iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos
dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur
iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos
dolorum sapiente? Et cum veniam quod.
</p>
<a href="#menu">메뉴로 돌아가기</a>
</body>
</html>
<head 부분 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>안녕</title>
<meta name="description" content="문서에 대한 설명" />
<meta name="keywords" content="검색시 걸리게 해줄 키워드 나열," />
<meta name="author" content="사이트, html 문서 작성자" />
<meta name="viewport" content="width=device-width, initial-scale=2.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0 " />
<!-- 렌더링 설정, 호환성 문제가 주로 발생되는 IE(자체 랜더링엔진 사용하면 결과물이 달라지거나 동작이 안되는 경우가 많음) 때문에 표준모드로 렌더링 되도록 설정 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- 외부 데이터나 문서를 가져오기 위한 태그-->
<link rel="icon" href="img/tayo.jpg"/>
<link rel="stylesheet" href="css파일의 경로" />
<style>
/* css 코드 작성 : html요소에 디자인 적용 */
</style>
<script src="javascript 파일경로" type="text/javascript"></script>
</head>
<body>
<script>
// javascript 작성
</script>
</body>
</html>
<시멘틱 태그>
시멘틱 태그 : 웹 페이지의 각 요소에 의미를 부여해서 의미와 관련성을 기반으로 보다 진보된 검색 또는 서비스가 가능하도록 시도
html5에서는 시멘틱 웹을 위한 태그들이 제공됨.
안써도 무방하나 웹표준에 맞추려면 쓰는것도
header : 헤더, 상단부, 로고 같은것
nav : 네비게이션 (메뉴 바)
aside : 오른쪽 소메뉴 같은 용도
section : 본문 부분. article 포함
article : 본문의 주 내용 컨텐츠가 들어가는 부분
footer : 하단부. 회사 소개, 회사 정보, 사이트 맵 등'WEB Creator > [HTML]' 카테고리의 다른 글
| [HTML] 1 - brackets를 활용한 html 기본 + 태그 몇개 (0) | 2022.06.01 |
|---|---|
| [HTML] OT (0) | 2022.06.01 |