[HTML] HTML 마무리를 지어보자. a 태그, iframe, div, span, form, type 속성,

하이퍼 링크 <a>

: 하이퍼 링크란 다른 페이지나 사이트로 연결하는 링크(문자 또는 이미지)를 말합니다.

 

<a href="사이트 또는 이동할 문서의 위치">링크에 사용될 문자 또는 이미지</a>
<a href="http://www.naver.com">네이버 </a>

https <-- s가 붙는 이유는 secure 보안이 되어있다는 말이다.

 

* target 속성

• <a> 태그가 연결된 문서를 어디에서 열지 설정합니다.
• _blank : 링크로 연결된 문서를 새탭에서 열어줍니다.
• 이름 : 해당 이름으로 설정된 페이지에서 문서를 열어줍니다.

 

북마크 <a>

• 버튼을 눌리면 스크롤이 내려가거나 올라가는 것.
• <a> 태그의 name 속성 또는 특정 태그의 id 속성을 이용하면 북마크(책갈피) 기능을 만들 수 있습니다.

 

<a href="a 태그의 href속성의 #값 또는 특정 태그의 id 속성의 값">링크에 사용될 문자 또는 이미지</a>

<a href="#book"> 도착지로 이동 </a>
...
...
...
<a name="book">도착</a>

또는

<p id="book">도착</p>

 

아이프레임 <iframe>

: iframe은 inline frame의 약자입니다. iframe을 이용하면 웹페이지 안에 또 다른 웹페이지를 삽입할 수 있습니다.(막아놓은 사이트들도 있다.)

 

<iframe src="삽입할 페이지의 주소 또는 문서위치" style="크기를 설정할 css 코드"></iframe>
ex)네이버 웹툰 댓글창들은 iframe을 이용한 것이다.

 

디스플레이 속성 <div>, <span>

 

<div>

: HTML 요소들을 하나로 묶는데 자주 사용되는 대표적인 블록 요소입니다. <div> 요소는 주로 여러 요소들의 스타일을 한번에 적용하기 위해 사용됩니다.

 

<div>김사과</div> <-- block 태그 형식으로 바뀜
원래 블록태그들을 하나로 묶을 때 사용

<div>
 <p>김사과</p>
 <p>반하나</p>
 <p>오렌지</p>
</div>

 

<span>

: 텍스트의 특정 부분을 묶는데 자주 사용되는 인라인 요소입니다. <span> 요소는 주로 텍스트의 특 부분에 스타일을 적용하기 위해 사용됩니다

<span> 김사과</span> <-- inline 태그 형식으로 바뀜

display 속성 - block, inline, inline-block

 

 

폼 <form>

: 웹 페이지 내에서 사용자로부터 입력을 받을 때 사용하는 태그입니다. 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용합니다. -  PHP를 사용하기 시작하면 사용하게된다.

 

<form method="서버로 전송할 데이터 방식" action="서버로 데이터를 전달하기 위한 페이지">
             입력 요소
</from>

 

method

• get : URL을 통해 데이터를 전송합니다. - 속도가 빠름, 화면에 노출이 됨.
• post : Body로 감싼 데이터를 서버로 전송합니다. - 데이터를 숨겨서 보냄 : 회원가입이나 로그인 할 때 사용, 전송 속도가 get에 비해 느림.

 

action

파일이름.php, 파일이름.jsp ..

 

입력상자 <input>

사용자로부터 데이터를 입력받기 위해 사용하는 요소입니다.

 

type 속성

• text : 사용자로부터 문자를 입력받는 글상자입니다.
• password : 사용자로부터 비밀번호를 입력받는 글상자입니다.
• submit : 사용자로부터 입력받은 데이터를 서버에 제출하는 버튼입니다.
• reset : 사용자로부터 입력받은 데이터를 초기화하는 버튼입니다.(초기에 보였던 화면으로 바꿔준다.)
• button : 아무런 이벤트가 없는 버튼입니다. - 기능은 자바스크립트로 줄 수 있다.
• radio : 사용자로부터 여러개의 옵션 중에서 단 하나의 옵션만을 입력 받을 수 있도록 하는 버튼입니다.
  * radio는 그룹을 맺기 위해 name 속성의 값이 동일해야합니다. 그리고 value 값이 꼭 있어야 한다.
• checkbox : 사용자로부터 여러개의 옵션 중에서 다수의 옵션을 입력 받을 수 있도록 하는 버튼입니다.
  * checkbox는 그룹을 맺기 위해 name 속성의 값이 동일해야합니다. 그리고 value 값이 꼭 있어야 한다
• file : 사용자로부터 원하는 파일을 서버로 전송하기 위한 글상자입니다. (찾아보기 버튼)
  * 파일을 사용하려면 form 요소에 반드시!!!!!!!! enctype 속성을 입력해야 합니다.

<form method="GET" action="test.php" enctype="multipart/form-data">
 : 글자만 보내다가 폼 형식으로 여러가지 파트를 보내겠다라는 신텍스(문법) 꼭 !!!!!!! 쓰기

 

size 속성

크기를 설정하는 속성입니다.

<input type="text" size="크기">

 

maxlength 속성

<maxlength="크기">

입력값의 최대 길이를 설정하는 속성입니다.

 

placeholder 속성 

<placeholder="입력하고픈 글자">

사용자가 입력 전에 특정 데이터를 입력하도록 안내해주는 값을 설정합니다.

 

name 속성

요소의 이름을 설정하며 서버에서 요소의 값을 읽을 수 있도록 설정합니다.

 

required 속성

사용자가 데이터를 필수로 입력하도록 강제합니다.

 

id 속성

body 내의 모든 요소에서 사용할 수 있는 속성입니다. css와 자바스크립트에서 id 속성을 활용하기 위해 사용합니다. HTML 문서 내에 id는 단 한개만 존재해야 합니다. 

 

value 속성

요소의 실제 값을 설정합니다. 서버에서 name의 실제값으로 사용됩니다.
input타입에 value를 설정해놓으면 내가 쓰기전에 value 입력값이 입력되어 있다.

 

checked 속성

여러 개의 라디오 또는 체크박스 중에서 미리 선택되는 옵션을 지정합니다.
(input type="text"에서 value와 비슷하다)

 

readonly 속성

사용자가 입력 필드를 볼 수 있으나 수정할 수 없게 설정합니다.

                  아래칸
우편번호 : [          ][검색]

 

라벨 <label>

폼 양식에 이름을 붙이는 요소입니다. label 요소와 다른 요소를 연결하면 해당 영역이 넓어집니다.

<label>남자 <input type="radio" name="gender" value="남자"></label>
또는
<label for="man">남자</label> <input type="radio" name="gender" value="남자" id="man">

         for는 뒤의 id와 일치해야한다.

 

선택상자 <select>

여러 개의 옵션이 드롭다운 리스트로 되어 있으며, 그 중에서 단 하나의 옵션만을 입력 받을 수 있습니다. <option> 요소를 통해 선택할 수 있는 옵션을 설정합니다.

<select name="이름">
<option value="서버로 넘어가는 이름">보기창에 보이는 문구</option>
</select>

 

여러줄 글입력 상자 <textarea>

사용자로부터 여러 줄의 텍스트를 입력받는 글상자입니다.
벨류(value) 속성이 없다.

<textarea cols="가로 글자수" rows="세로 글자수">여기에 입력한 글이 value로 넘어갑니다.</textarea>

 

그룹, 제목 <fieldset>, <legend>

fieldset 요소는 폼 요소를 그룹으로 묶을 때 사용하고, legend는 fieldset의 제목을 만들 때 사용합니다.