[수업-HTML] 02. HTML (영역관련~폼태그관련)

1. 영역 관련 태그

• <div></div> : block형식의 공간을 수직으로 분한
• <span></span> : inline 형식의 공간을 수평으로 분할
   

style : 속성 넣기 / 주로 CSS에서 사용 (background, width, height 등 )

 

 

---

2. 시멘틱 태그

 

 이전에는 div에 id를 집어넣어 div를 구분했지만 실질적인 의미를 갖지 못했으나 HTML5로 넘어오면서 div이지만 거기에 의미까지 포함된 시맨틱 태그가 등장했다.  컴퓨터는 단순 문장이나 위치, 모양만으로는 내용을 이해하기 힘드므로 컴퓨터가 각 문장에 대한 의미를 이해할 수 있도록 요소를 명확하게 나타내기 위함이다.

• <header></header> : 웹문서에서 머리말 영역을 나타낼 때 사용 (주로 검색어 form, 메뉴 nav가 들어간다)
• <nav></nav> :  웹 문서에서 다른 웹문서나 문서 내 다른 부분으로 이동하고자 할 때 사용, 어느 곳에서나 사용 가능
• <aside></aside> 웹 문서의 광고 같이 부가적은 정보를 구분하기 위해 사용
• <section></section> : 비슷한 그룹이나 문서를 묶기 위해 사용
• <article></article> : 웹 문서에서 주요 내용을 가진 본문을 나타낼 때 사용  실제로 나타내고자 하는 내용을 갖고 있으므로 중요한 부분으로 인식되어 처리된다. 여러 개의 article 사용 가능
• <footer></footer> : 웹 문서의 저자 정보, 저작권 정보, 이용 조건 등을 나타내기 위해 사용
• <iframe></iframe> : 웹 문서 안에 다른 웹 페이지를 추가하는 태그

<header>
	<h1>제목</h1>
   	<nav><a></a></nav>
</header>
<section>
	<article>컨텐츠 내용</article>
    <article>컨텐츠 내용</article>
</section>
<footer>
	사업번호, 사업자 주소, 연락처, 저작권, 링크
</footer>

 

 

 

---

 

3. 이미지 관련 태그

 

• <img> : 인라인 요소로 이미지를 넣는 태그
• <map></map> : 이미지를 구역 별로 나누어 링크를 걸어주는 태그 

• src : 불러올 이미지 파일의 경로 설정
• alt : 사진의 경로가 잘못되었거나 이미지를 제대로 표현할 수 없는 경우 대체 텍스트의 용도로 사용 , 화면낭독기의 경우 사진은 읽을 수 없기 때문에 대체되는 텍스트로 읽음
• width : 사진의 넓이 (고정크기 px / 가변크기 % )
• height : 사진의 길이 (고정크기 px / 가변크기 %)
• area : 공간의 모양
• coords : 시작 위치, 끝 위치
• href : 링크 경로
• target : self(기본)을 사용하여 현재 페이지에서 링크를 열지 / blank를 이용하여 새로운 페이지로 링크를 열지 설정할 수 있다. 

 

<img src="sample/image/river1.PNG" alt="강 사진" width="200px" height="15%">

 

 

---

4. 멀티미디어 관련 태그 

 

• <audio></audio> : 웹페이지 안에 오디오 요소 추가 기능
• <video></video> : 웹페이지 안에 비디오 요소 추가 기능

• controls : 음악/동영상 재생에 필요한 컨트롤러 삽입
• autoplay : 플레이 버튼을 누르지 않아도 자동으로 음악/동영상 재생
• loop : 해당 미디어가 종료되어도 반복 재생
• preload : 영상이 재생되기 전 어디까지 로딩해놓을지 결정하는 속성
• poster : 재생 전 출력할 이미지 지정 가능 / 경로 입력
• auto : 미리 다운로드 
• metadata : 기본적인 정보만 로딩
• none : 아예 로딩 x 

 

---

 

5. 하이퍼링크 관련 태그

 

• <a></a> : 하이퍼링크 기능 추가

• href : 링크한 페이지의 id값이나 사이트 주소 지정
• target : 링크 페이지가 표시될 위치 (새창, 현재 창) 지정
• download : 링크한 페이지를 표시하지 않고 다운로드하는 것
• rel : 현재 페이지와의 관계 지정
• hreflang : 링크한 페이지의 언어 지정
• type : 페이지의 파일 유형 지정

예) 이미지 삽입 시 지정한 경로로 이동하게끔 사용도 가능하다

<a href="https://www.w3schools.com" target="_black">
<img alt="사진" src="sample/image/flower5.PNG" height="100px" width="150px">
</a>

예)  비어있는 iframe을 만든 후 하이퍼링크를 누르면 이미지 띄우기

<a href="sample/image/city1.PNG" target="inforiframe">iframe에 사진 넣기</a>
<iframe width="650px" height="450px" name="inforiframe"></iframe>

 

---

6. 폼 관련 태그

• <form></form> 화면에서 사용자가 입력한 데이터를 보내는 방식과 처리할 프로그램을 정하는 태그
• <fieldset></fieldset> 그룹으로 묶을 수 있다. 

• action : 입력된 데이터들을 전송받을 곳 지정 (페이지, 서버, 클래스 등..) 미지정 시 현재 페이지로 설정
• method : get 또는 post 방식 지정
  - get 방식 :url에 데이터가 노출되는 것 
  - post 방식 : url에 데이터가 노출되지 않고 처리하는 방식
• name : <form> 태그의 고유 이름 지정, <form>을 구분하기 위해 사용
• autocomplete : 이전 입력 내용 출력 기능 ( 생략 시 자동 출력)

 

• <input> : 사용자에게 값을 입력하여 받아오게 한다.

• type : 입력 창의 타입을 결정하는 속성 ( text, checkbox, radio 등)
• value : input 요소의 기본값 표시
• name : input을 구별할 수 있는 명칭
• min/max/step : 허용하는 범위 최소값/최대값/값의 증감값
• autocomplete : 자동 완성 기능
• height/width : 입력 창의 높이와 너비
• readonly : 읽기 전용 필드
• accept : 파일 타입에 대해 사용자에게 알려주는 기능
• multiple : 여러 개의 값 입력 가능
• placeholder : 사용자 입력 전 입력 창 표시 글 
• autofocus : 입력 창 커서 표시
• required : 필수 입력 필드 지정
• maxlenght : 사용자가 입력할 수 있는 글자 수 제한
• size : 화면에서 표시하는 글자 수
• minlength : 최소 입력 글자 ( 크롬, 안드로이드만 지원)

 

<text 관련 속성>

• type="text" : 데이터를 입력할 수 있는 칸 생성
• type="hidden" : 화면에는 보이지 않는 상태로 데이터 전송
• type="password" : 비밀번호 입력하는 칸 설정 ●●●●● 로 표현됨
• type="button" : 버튼 모양만 있는 것 + 다른 기능과 함께 사용 가능
• type="submit" : 입력한 값 전달
• type="reset" : 입력한 값 지우기
• type="password"

 

<라디오 버튼과 체크박스>

• <input> 태그의 속성을 통하여 설정 가능
• type="radio" / type ="checkbox"
• name : 구분자, 명칭, 같은 그룹은 값이 같아야 한다.
• checked : 이미 체크된 상태로 보여줌

 

<file과 image>

• <input> 태그의 속성을 통하여 설정 가능
• type="file" / type="image"
• multiple : 여러 개의 파일 선택이 가능하도록 함
• accept : 사용자가 선택할 수 있는 파일 유형을 지정할 수 있다.
• type="search" : 검색할 칸
• type="url" : 주소 검색 칸
• type="email" : 이메일 검색 칸
• type="tel" : 전화번호 검색 칸 (자동으로 숫자패드가 나오게 하지만 꼭 숫자로 지정되어있지 않다.)

 

<숫자와 관련된 input 태그 속성>

• type="number" : 숫자 선택 칸
• min
• max
• step : 몇 단위씩 커지는지 
• type="range" : 숫자 바 생성

<시간/날짜와 관련된 input태그 속성>

 

• type="date" : 년-월-일 선택 창 생성
• type="month" : 년-월 선택 창 생성
• type="week" : 년-주 선택 창 생성
• type="time" : 시간 선택 창 생성 
• type="datetime-local" : 년-월-일 시간 선택 창 생성 

 

<select 태그와 option 태그>

 

• <select></select>
• <option></option> : 옵션 선택 창 생성 (value를 따로 저장하지 않아도 태그 안에 적은 값으로 value값이 들어감)

그 외 

• <datalist></datelist> : 미리 지정해놓은 데이터들을 텍스트에 입력할 때 참고하기 위해 생성
• <textarea></textarea> : 텍스트 입력 창 생성 , 값을 처음부터 지정해주려면 따로 value를 사용하지 않고 태그 사이에 작성하면 된다.