[2020-여름 WEB] 2주차

2주차_웹실습_21기_송희원.pdf

0.97MB

2주차_웹이론_21기_송희원.pdf

0.24MB

 

1. 링크 달기

1.1 하이퍼텍스트와 링크

 

하이퍼텍스트 : 순차적인 자료가 아닌 순서가 없는 자료로, 서로 연관된 문서나 텍스트 조각들이 연결돼 있다.        

하이퍼미디어 : 텍스트 뿐 아니라 멀티미디어 정보도 서로 연결돼 있다.

 

노드 : HTML 문서나 멀티미디어 정보를 표현하는 기본 단위다.                                                                             

링크 : 노드를 연결하여 내비게이션이 가능하도록 하는 길이다.                                                                            

앵커 : HTML 문서 내에서 링크의 출발점이나 도착점이다. (앵커 영역 : 앵커가 설정되어 있는 영역)

 

 

 

1.2 문서간 이동

<a> 태그 : 링크의 시작점 앵커를 표현한다.                                                                                                             

<a href=“파일이름 혹은 URL 주소” title=“설명”> 링크 텍스트 </a>

 

  ① href 속성 : 이동하고자 하는 목적지 문서의 파일 주소(URL)를 지정한다.                                                      

- 절대 주소 : http://로 시작하는 URL 형식의 인터넷 주소 홈<a href="http://www.w3c.org" title="W3C 홈">W3C 홈페이지 방문</a> 

- 상대 주소 : 현재의 문서와 같은 폴더의 위치에서부터 상대주소 <a href=“booklist.html”>책목록</a>

 

  ② title 속성 : 말풍선 창에 나올 설명을 기입한다.

 

 

 

1.3 문서 내 특정 위치로 이동

동일한 문서 내에서 특정 지점을 연결한다.

목적지 앵커 지정 : <a id=”고유 아이디”>목적지</a>                                                                                                

- id 속성에 목적지 앵커를 설정한다.                                                                                                                       

- <a>와 </a>사이에 있는 텍스트는 목적지 앵커의 이름이다.

 

시작점 연결 : <a href = “#고유 아이디”> 링크로 이동</a>                                                                                      

- href 속성에 목적지 앵커의 아이디를 지정한다.                                                                                                                    

- 목적지 앵커에서는 아이디와 이름만 설정하고, 시작점 앵커에서는 #으로 고유 아이디를 시작한다.

 

 

 

 

 

2. 이미지 사용하기

2.1 이미지 파일 종류

GIF	JPEG	PNG
1. JPEG, PNG에 비하여 파일 크기가 작다. 2. 표현 가능 색상이 256개이므로 자연스러운 장면에는 부적합하다. 3. 사진이 아닌 클립아트나 드로잉 같은 종류의 이미지에 적합하다.	1. 24비트의 칼라를 사용하므로 수백만 개의 색상을 표현한다. 2. 복잡한 그림이나 사진 등 색상을 많이 사용하는 이미지에 적합하다.	1. GIF와 JPEG 형식의 장점, 비압축 형식인 BMP 형식의 장점도 고려한다. 2. 24비트(또는 32비트) 칼라를 사용한다.

 

 

 

2.2 이미지 삽입

<img> 태그 : 이미지를 삽입한다.                                                                                                                    

<img src=“파일이름” width=“크기” height=“크기” alt=“대체 텍스트”>

 

  ① src 속성 : 이미지 파일의 이름을 나타낸다.

  ② width와 height 속성 : 이미지의 크기를 조정한다.

  ③ alt 속성 : 이미지에 대한 설명 텍스트를 지정한다.

<figure> 태그 : 그림, 사진, 다이어그램과 텍스트 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급한다.

<figcaption> 태그 : <figure> 태그를 위한 제목을 표현한다. (<figure> 태그 내에 위치)

 

 

 

 

 

3. 오디오와 비디오 다루기

3.1 지원하는 오디오/비디오 파일 형식

MP3	Wave	MPEG4	Ogg	WebM
1. MPEG-1의 오디오 규격으로 개발된 형식이다. 2. 대중적으로 널리 사용한다.	1. 마이크로소프트와 IBM이 개발했다. 2. 비압축 방식의 오디오 형식이다.	1. MPEG-4의 part14에서규정된 비디오 파일 형식이다. 2. H.264 코덱을 사용한다.	1. 스트리밍 방식의 멀티미디어 표현을 위한 공개소스 기반 형식이다. 2. Vorbis, FLAC 등의 오디오 코덱, Ogg Theora 등의 비디오 코덱 사용한다.	1. 구글이 HTML5의 동영상에 사용하기 위해 최근에 개발했다.

 

 

 

3.2 오디오 삽입하기

<audio> 태그 : 오디오를 삽입한다.                                                                           

<audio  controls  autoplay src=“파일 이름”>

 

  ① src 속성 : 재생할 사운드 파일의 이름을 나타낸다.

  ② controls 속성 : 미디어 제어기를 표시한다.

  ③ autoplay 속성 : 파일이 로드되자마자 자동으로 재생한다.

  ④ loop 속성 : 사운드 반복 재생 횟수를 나타낸다.

  ⑤ preload 속성 : 오디오가 미리 로드되어야 하는지의 여부를 지정한다.

-auto(기본값) : 페이지를 로드하고 바로 오디오 파일을 다운로드

-metadata : 사용자가 재생 시키기 전까지는 오디오의 크기, 관련 정보 등과 같은 메타데이터만 다운로드

-none : 재생을 시작 하기 전까지 오디오 파일을 다운로드 안함

 

<source> 태그 : 브라우저에서 오디오 파일이 지원되지 않는 경우를 대비해 여러 형식의 파일을 지정한다.

  ① src 및 type 속성 : 오디오 파일의 이름 및 MIME 형식을 지정한다.

 

 

 

3.3 비디오 삽입하기

<video> 태그 : 비디오를 삽입한다.                                                                           

<video  controls  src="비디오 파일 이름"  width="폭"  height="높이" >

  ① src, controls, loop, autoplay 속성 : <audio> 태그의 속성과 동일하다.

  ② width, height 속성 : 화면에서 비디오가 표시될 영역의 크기다.

  ③ videoWidth, videoHeight 속성 : 비디오 자체의 너비와 높이다.

  ④ poster속성 : 동영상이 로딩되고 있을 때 보여줄 이미지다.

  ⑤ preload 속성 : 브라우저가 미리 동영상을 로딩 할지 여부를 정한다.

-auto(기본값) : 페이지를 로드하고 바로 오디오 파일을 다운로드

-metadata : 비디오의 크기, 첫 프레임 등 메타데이터만 다운로드

-none : 재생 시작전까지 비디오 파일을 다운로드 안함

 

 

 

 

 

4. 객체 포함하기

4.1 <iframe>으로 다른 문서의 내용 표시하기

 

<iframe> 태그 : 브라우저 페이지 내에 또 다른 페이지 프레임을 삽입한다.                              

<iframe src =“파일주소” width=“폭” height=“높이” name=“이름”> </iframe>

 

  ① src 속성 : 내부 프레임에 출력할 파일의 URL을 지정한다.

  ② width, height 속성 : 브라우저 프레임의 가로, 높이 크기다.

  ③ name 속성 : 프레임의 이름이다.

  -<a> 태그의 target 속성에 <iframe> 이름을 지정한다.

 

 

 

4.2 <embed>로 외부객체 포함하기

<embed> 태그 : HTML 파일이 아닌 비디오, 오디오, 애니메이션 등 외부의 애플리케이션 파일을 포함하는데 사용한다.                                                                                                                

<embed width="280" height="260" src="embed_test.txt">

 

  ① src 속성 : 삽입할 파일의 URL을 지정한다.

  ② width, height 속성 : 삽입할 파일의 가로, 높이 크기다.

 

 

4.3 특정 콘텐츠 요소 포함하기

<canvas> 태그 :  스크립팅 (일반적으로 JavaScript)을 통해 그래픽을 즉석에서 그리는 데 사용한다.  

<canvas id="아이디" width="가로크기" height="세로크기"> </canvas>
<script type="text/javascript">
	// 아이디로 canvas 찾아서 context 생성하기
	// context에 그림 그리기, 예, context.rect(0,0,80,80); 크기 80짜리 사각형
</script>

 

 

<svg> 태그 : 벡터 그래픽스 방식으로 정의된 그림을 표현한다.

<svg width="가로크기" height="세로크기">
	<!-- <circle>, <rect>, <path> 등 벡터 그래픽스를 표현하는 요소 -->
</svg>

 

<math> 태그 : 수학공식을 표현하는 태그들을 하나로 묶는 태그다.                                                                                           

(변수, 상수, 연산자 등을 분리하여 <mi>, <mn>, <mo> 등의 요소로 표현)

 

 

 

 

 

 

5. 폼 이해하기

<form> 태그 : 회원가입, 상품구매, 키워드 검색 등 사용자로부터 정보를 받을 때 사용한다. 사용자가 입력하는 정보를 하나로 묶어서 애플리케이션에 전달하고, 사용자의 정보 입력 양식을 지정할 수 있는 역할을 한다.  

<form name=”이름” method=”get/post” action=”애플리케이션 주소”>

 

  ① method 속성 : 데이터 전송 방식을 지정한다.

-get 방식 : 전송할 데이터를 URL주소 뒤에 포함한다.

-post 방식 : 프로그램의 입출력 방식을 사용하고, 데이터 양에 제한이 없다.

  ② action 속성 : 데이터 처리할 애플리케이션 주소를 나타낸다.

  ③ name 속성 : 폼의 이름이다.

 

 

 

 

 

6. 기본 형식으로 입력하기

6.1 텍스트 입력

 

  ① 문자열 입력 필드 (한 줄)

 

<input type=”text” name=”변수명” value=”초기값”/>

 

name 속성 : 애플리케이션에 전달될 변수명이다.                                                                                          

value 속성 : 입력 받은 값을 전달한다.

 

  ② 암호 입력 필드

 

<input type=”password” name=”변수명”/>

 

보안이 필요한 문자를 입력할 때 사용한다. (‘•’ 으로 표시)

 

  ③ 텍스트 영역 필드 (여러 줄)

<textarea  name=”이름”  cols=”열의 수”  rows=”행의 수”>
	텍스트 영역에 표시되는 초기 문장
</textarea>

 

표시 영역보다 많은 텍스트를 입력하면 스크롤바가 나타난다.

 

 

 

6.2 선택항목의 입력

 

  ① 라디오 버튼

<input type=”radio” name=”변수명” value=”선택값” checked />

 

name 속성값이 같은 그룹에서 value 값을 하나만 선택하여 전달한다.

 

  ② 체크박스

<input type=”checkbox” name=”변수명” value=”선택값” checked />

 

체크박스에 표시된 모든 value 속성값들이 애플리케이션으로 전송된다.

 

  ③ 선택목록에서 선택

<select> 요소 내에 <option> 항목

 

<select name="job" size="1" >
	<option value=”student” selected>학생</option>
    <option value=”company”>회사원</option>
    <option value=”teacher”>교사</option>
    <option value=”sales”>자영업</option>
    <option value=”others”>기타</option>
</select>

 

 

 

6.3 버튼 입력

<button> 요소 : <button type=“submit”>버튼 라벨</button>

 

  ① 전송 버튼 : 입력 데이터 전달

 

<input  type=”submit”  value=”버튼라벨”/>

 

<form> 태그에 있는 모든 입력 데이터가 action 속성에서 지정한 애플리케이션 프로그램으로 전송된다.

 

  ② 초기화 버튼

<input  type=”reset”  value=”버튼라벨”/>

 

  ③ 일반 버튼 : 다양한 용도로 사용

 

<input  type=”button”  value=”버튼라벨”/>

 

  ④ 이미지 버튼

<input  type=”image” src=”이미지파일”  alt=”대체 문자열”/>

 

 

 

6.4 기타 입력 필드

 

  ① 파일 선택하기

 

<input type=”file”/>

 

  ② 데이터 숨김

 

<input type=”hidden” name=”변수명” value=값”/>

 

  ③ 텍스트 라벨 : 특정 입력 필드에 연결

 

<label for=”입력아이디”>

 

 

 

6.5 입력 필드의 그룹핑

<fieldset> 태그 : 폼 양식을 그룹핑하는 범위를 지정한다.

 

  ① name 속성 : 그룹의 이름을 지정한다.

  ② form 속성 : 폼과 연결한다.

  ③ disabled 속성 : 그룹 내의 모든 하위 입력 요소들을 비활성화한다.

 

<legend> 태그 : 그룹을 구분하기 위한 그룹의 제목 라벨이다.

 

 

 

 

 

7. 고급 형식으로 입력하기

7.1 서식이 있는 텍스트 입력

 

  ① 이메일 주소 입력

 

<input type=”email”/>

 

  ② URL 주소 입력

 

<input type=”url”/>

 

  ③ 전화번호 입력

 

<input type=” tel” />

 

  ④ 검색창 입력

 

<input type=”search”/>

 

 

 

7.2 날짜와 시간 입력

 

  ① 날짜 입력

 

<input type=”date”/> 연-월-일
<input type=”month”/> 연-월
<input type=”week”/> 연-주

 

  ② 시간 입력

 

<input type=“time”/>
<input type=“datetime”/> <!-- UTC 국제표준 시간대 -->
<input type=“datetime-local”/> <!-- 현지 시간 -->

 

 

 

7.3 색상 및 숫자 입력

 

  ① 색상 입력

 

<input type=”color”/>

 

  ② 숫자 입력

 

<input type=”number”/>

 

  ③ 범위 입력

 

<input type=”range”/>

 

 

 

7.4 데이터 목록에서 선택

 

  ① 데이터 목록 기능 : <datalist> 태그

<input> 요소의 list 속성에 <datalist> 요소의 id 속성을 지정하면, 검색어 자동완성 혹은 제시어 기능 구현이 가능하다.