ZZUYONI(ㆁᴗㆁ✿)

★동영상 태그

<video>태그 - 비디오 파일 삽입

- 기본형 : <video src="경로" 속성="속성값">...</video>

- mp4 비디오 파일 형식은 크롬이나 사파리에서만 재생 가능하므로 브라우저마다 재생할 수 있는

  파일을 지정해 주어야 함

- 주요 브라우저에서 지원하는 비디오 코덱과 파일 형식

- <source>태그를 이용해 각 브라우저에서 재생할 수 있도록 해야함

★오디오 태그

<audio>태그 - 오디오 파일 삽입

- 기본형 : <audio src="경로" 속성="속성값">...</audio>

- <source>태그를 이용해 각 브라우저에서 재생할 수 있도록 해야함

<source>태그 - 여러 미디어파일 한꺼번에 지정하기

- 기본형 : <source src="경로" type="미디어/파일 형식"></source>

- 브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 다르기 때문에 <source>태그를 여러개 사용함

★비디오 태그 & 오디오 태그 속성

controls 속성

- 미디어 파일에 컨트ㅡ롤 막대를 함께 표시

 - 사용법 : <video src="경로" controls>...</video>

preload 속성

- 재생 전 오디오 파일을 다운로드 할 것인지 일부 정보만 다운로드 할 것인지 여부 지정

- 사용법 : <audio preload="속성값">...</audio>

- 속성값

  └ none : 재생버튼을 누를 경우 다운로드

  └ metadata : 메타정보만 다운로드

  └ auto : 페이지 접속시 바로 다운로드, 다운로드 끝난 후 재생버튼 눌러야 재생

- 속성값을 지정하지 않을 경우 auto속성으로 설정됨

autoplay 속성

-비디오나 오디오 파일을 다운로드 하자마자 재생

- 사용법 : <video autoplay>...</video>

loop 속성

- 미디어 파일 재생이 끝난 후 앞으로 되돌아가 다시 재생

- 사용법 : <video loop>...</video>

※실습하기※

▲크롬에서 결과

주소 : 10.10.54.75

windows + r : cmd실행

1. ping + 주소

2. ipconfig

3. <텔넷>
  시작-제어판-범주보기-프로그램-프로그램기능-Windows 기능 사용/사용 안함
  -맨 밑 텔넷 클라이언트체크

4. telnet + 주소

***안되는 경우*****************************************************************
*제어판-시스템 및 보안-시스템-고급시스템설정-고급 탭-환경변수-사용자변수편집  *
*-PATH-사용자 변수 편집(or 새로만들기)-변수 값-%PATH%;C:\Windows\System32-확인*
*******************************************************************************

5. who
-시스템에 접속한 접속자 정보(ID, 터미널, 접속시간, IP주소)

6. clear(도스 : cns)
-도스창에 떠있는 거 다 지우기

7. id

8. who|(shift+\)grep + ID

-내 정보만 띄우기

***FD(file descriptor)**********************************************************
0 : standard input : 키보드(default)      
1 : standard output : 모니터(default)     
2 : standard error output : 모니터(default)
0,1,2는 default로 정해져 있으므로 프로그램 내부에서 새로 file을 열면 3번, 4번...
********************************************************************************

9. who|more
-한페이지 씩 보여주기(enter-한칸, space-한페이지)

10. who|wc
- 들어와 있는 접속자 수

11. w
-작업도 보여줌

***PDF교재******************************
http://www.tutorialspoint.com/index.htm
http://www.w3schools.com/
****************************************

12. finger

**$-프롬프트

13. stty
-터미널(키보드,모니터 장치)의 설정 정보
  baud : 속도

14. stty -a(all)
-(명령 -옵션)더 자세히 보여줌

15. stty erase ^H(backspace)+enter
-지우는 키를 backspace로

16.finger ID(argument)
-shell:명령어 해석기(command interpreter)-->/bin/sh : 본셸???(/bin/csh : c셸)

17. cat /etc/passwd|more
-ctrl+c : 중간에 끝내기
 
*file종류*
*일반파일*
*특수파일*
*********************************
bin폴더 밑 : 프로그램 파일이 많음
*********************************

18. cat /etc/passwd|grep + ID
-유저만 보여줌

19. cat etc/passwd|wc
-총 접속자 수

20. wc /etc/passwd

21. uname
-

22. uname -x
-잘 못된 옵션!!
사용법 : uname [-snrvnapiX]
  uname [-S system_name] ----->[]:옵셔널

23. uname -X
-

24. cal
- 달력

25. man cal
-cal매뉴얼

26. cal 2015

27. cal 1 1

28. passwd
-패스워드 변경

29. pwd
-present work directory : 현재 작업 디렉토리

30. cd..
-상위 디렉토리로

30. cd + enter
-홈 디렉토리

31. cd .
-현재 디렉토리

32. ls

33. ls -a
-히든파일 보기

**히든파일**
.파일명
************

34. ls -l
-자세하게
xxx, 사용자, 폴더명, 크기, 수정시간, 파일 이름

35. ls -a -l(=ls -al)

36. ls /
-루트 디렉토리 보기

37. ls -sCF

38. ls -sCF /
-s:사이즈(블럭단위 : 1블럭=512바이트), C: , F:
@ : 심볼릭링크(바로가기)(링크종류 : 소프트링크, 하드링크)

**유닉스 명령어 형식**
$명령 [옵션][아규먼트]
**********************

39. man ls
-alsCFid

40. man man
-매뉴얼의 매뉴얼

41. echo <메세지> |write ID
-메세지보내기

40. mesg n/y
-메세지 받지 않기/받기

41. banner <메세지> |write ID
-<메세지>크게하기

42. mesg
-메세지 확인

43. > : 방향바꾸기 -->모니터 말고 다른 곳으로 파일 저장 또는 프린트하기

44. echo <메세지> > <제목>.<파일형식> ex)echo hi > hi.txt
-파일로 저장

45. cat <제목>.<파일형식> ex)cat hi.txt
-내용 읽기

46. od -x <제목>.<파일형식>
-16진수로 읽기?

47. od -c <제목>.<파일형식>
-캐릭터로 읽기?

48. ls -l <제목>.<파일형식>
-

*******************************
              file  |  dir  |
contents    |  cat  |   ls  |
information |  ls   | ls -ld|
********************************

49. >>(append)
-overwrite

★이미지 태그

웹에서 사용할 수 있는 이미지 파일 형식(▼)

하지만!

- 웹 사이트에 해상도가 높은 사진도 업로드가 가능해 졌지만 모바일에서 다운로드 하기에 시간과 데이터 비용의 소모가 크다.

- 또한 모바일의 화면도 데스크탑에 비해 작기 때문에 작은 화면에서는 이미지의 제 크기를 보여주기 어렵다.

이런 단점이 존재한다. 

따라서 요즘은 PC용 웹 사이트와 모바일용 웹 사이트를 따로 제작한다.

즉, 이미지 삽입 후 CSS를 이용하거나 Canvas API를 이용해 원래의 이미지를 편집하지 않고 텍스트 형식의 소스 코딩을 통해 이미지를 편집한다.

<img>태그 - 이미지 넣기

- 기본형 : <img src="경로" 속성="속성값">

- <img>태그의 속성

<figure>태그 - 캡션 대상 지정하기

- 기본형 : <figure>

캡션을 붙일 요소

   </figure>

- 이미지 뿐만 아니라 오디오, 비디오 같은 미디어 파일 또는 텍스트 단락에 캡션을 붙일 때 사용

- <figure>태그만 사용할 경우 브라우저 상으로는 표시되지 않지만 브라우저에게 특정 위치에 미디어 파일이 존재함을 알려주기 위해 사용하기도 함

- 단순히 이미지를 묶고 싶을 경우 <div>태그 사용

<figcaption>태그 - 캡션 설명 붙이기

- 기본형 : <figcaption>...</figcaption>

- <figure>태그를 사용해 캡션을 붙일 대상을 묶어 놓은 후 <figcaption>태그를 사용해 캡션을 붙임

※실습하기※

▲결과