ZZUYONI(ㆁᴗㆁ✿)

유클리드호제법으로 최대공약수 구하기(함수사용).txt

구구단 재귀함수.txt

★동영상 태그

<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>태그를 사용해 캡션을 붙임

※실습하기※

▲결과

★하이퍼링크 태그

<a>태그 - 원하는 문서나 사이트로 연결하기

- 기본형 : <a href="경로">...</a>

 └ 텍스트링크 : <a href="경로"><p>...</p></a>

 └ 이미지링크 : <a href="경로"><img src="경로"></a>

- 새 창(탭)에서 열기 : <a href="경로" target="_blank">...</a>

- 맨 위로 올라가기 : <a href="#top">...</a>

- 앵커 : 한 페이지 안에서 이동하게 하는 기능

  └ <a name="앵커이름">...</a>

                    :

<a href="#앵커이름">...</a>

※실습하기※

▲결과

1. notepad++에서 소스를 작성 후 html파일로 저장한다.

2. file zilla를 실행시키고 호스트, 사용자명, 비밀번호 입력 후 연결을 한다.

3. 오른쪽 html파일을 더블클릭 한 후 왼쪽 내 파일 목록에서 html파일을 오른쪽 html폴더 안으로 옮겨준다.

4. 인터넷 주소창에  "설정한아이디.dothome.co.kr/파일이름.html"을 입력한다.

★다양한 텍스트 관련 태그들

<mark>태그 - 형광펜 효과 내기

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

- 기본 배경색은 노란색 이지만 css의 background-color 속성을 이용해 바꿀 수 있다.

<time>태그 - 날짜 또는 시간 정보 표시하기

- 기본형 : <time 속성= "속성값">...</time>

- 브라우저 화면상으로는 다른 텍스트와 똑같지만 브라우저에게 시간에 대한 정보라는 것을 알려주기 위해 사용

<strong>, <em>태그 - 중요한 내용 강조하기

- 기본형 : <strong>...</strong> ,  <em>...</em>

- <strong>태그는 굵게 표시, <em>태그는 이탤릭체 표시

<b>태그 - 굵게 표시하기

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

- 강조의 의미가 아닌 텍스트에서 <b>태그 사용 (강조해야 하는 내용인 경우 <strong>태그 사용)

<i>태그 - 이탤릭체 표시

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

- 강조의 의미가 아닌 텍스트에서 <i>태그 사용 (강조해야 하는 내용인 경우 <em>태그 사용)

<q>태그 - 인용한 내용 표시하기

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

- <q>태그 사용 시 자동으로 (" ")가 붙여짐

- <blockquote>태그는 블록 레벨의 태그이므로 자동으로 줄바꿈과 들여쓰기가 적용된다.

- 특정 사이트의 내용을 인용한 경우  cite속성 사용

<span>태그 - 줄바꿈 없이 영역 묶기

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

- 텍스트 단락 내에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용하고 싶을 때 사용

기타 태그들

- <kbd> : 키보드 입력이나 음성 명령과 같이 사용자 입력 내용 표시

- <code> : 파일 이름이나 컴퓨터 프로그램 등 컴퓨터가 인식할 수 있는 소스 표시

- <samp> : 프로그램 처리 결과 표시

- <sup> : 수학 식 표현 시 텍스트 위 첨자 표현

- <sub> : 수학 식 표현 시 텍스트 아래 첨자 표현 

- <s> : 특정 텍스트를 제거하는 취소선 표시

★목록을 만드는 태그

<ul>, <ol>, <li>태그 - 목록 만들기

- 기본형 : <ul>

<li>...</li>

<li>...</li>

   </ul>

   <ol 속성="속성값">

<li>...</li>

<li>...</li>

   </ol>

- <ul>+<li> : 순서 없는 목록(리스트 앞이 불릿으로 표현)

- <ol>+<li> : 순서 있는 목록(리스트 앞이 번호로 표현)

- <ol>의 경우 태그의 type속성을 이용해 앞에 붙는 숫자를 바꿀 수 있다.

   <ol type="▲" start="△">...</ol>

   △(= 1,2,3...) : 시작하는 번호 수정

   (ex. ▲=a, △=3인 경우 리스트 번호가 c부터 시작)

<dl>, <dt>, <dd>태그 - 정의 목록 만들기

- 기본형 : <dl>

<dt>제목</dt>

<dd>설명</dd>

   </dl>

- 제목과 그에 대한 설명으로 이루어진 정의 목록 만듦

※실습하기※

▲결과

★표 관련 태그

<tabe>태그 - 표 만들기

- 기본형 : <table>

행과 열을 구성하는 여러 태그들

   </table>

※실습하기※

▲결과

>>>만들 행과 열 갯수를 먼저 지정한 후 구조를 미리 만들어 놓고 시작하면 헷갈리지 않고 만들 수 있다.

      위의 예제의 경우 6행 6열의 표를 미리 만들어 놓은 후 수정해 나가면 된다.

★Semantic Elements

- HTML5는 시맨틱 태그가 사용되어 어느 부분이 헤더이고 어느 부분이 실제 내용인지 쉽게 알 수 있도록 했다.

- HTML4에서 사용되던 <div>태그는 css를 적용할 때 사용한다.

 ▲ HTML5의 시맨틱 태그로 짜여진 웹 페이지 구조 예

★텍스트를 묶어서 처리하는 태그

<p>태그 - 단락만들기

기본형 : <p>...</p>

- 하나의 텍스트 단락을 만들어 준다.>>css 적용 시 편리

- 앞 뒤로 줄바꿈이 일어난다.

- <br>태그로도 줄바꿈을 할 수 있지만 텍스트 단락으로 인식이 되지 않는다.

<blockquote>태그 - 인용문 넣기 

기본형 : <blockquote 속성="속성값">...</blockquote>

- 다른 사이트에서 인용할 경우 사용

- 사이트 주소가 명확할 경우 cite 속성을 이용해 인용 사이트 주소 표시

<pre>태그 - 입력하는 그대로 화면에 표시하기

기본형 : <pre>...</pre>

- HTML에서는 하나의 공백만 표시해주므로 <pre>태그를 사용해 한 번에 많은 공백을 브라우저에 표시해준다.

- 주로 프로그램 소스를 표시할 때 사용

※실습하기※

▲ 결과

HTML작업을 실습하기 위해서는 프로그램을 몇 가지 깔아야 한다.

1. 웹 브라우저 : 크롬(chrome.google.com)

2. HTML 편집기 : 노트패트++(notepad-plus-plus.org)

3. 호스팅 서버 : 닷홈(dothome.co.kr)

4. FTP 프로그램 : FileZilla(filezilla-project.org)

1. 웹 브라우저 설치하기(chrome.google.com)

기본 웹 바르우저로 크롬 브라우저를 사용할 것므로 위의 크롬 홈페이지에 가서 크롬을 다운받는다.

2. HTML 편집기 설치하기(notepad-plus-plus.org)

무료 프로그램인 노트패드++를 이용할 것이다.

우선 위의 홈페이지로 들어가 좌측 밑에 있는 [download]를 클릭한다.

그리고 [DOWNLOAD]를 눌러 저장한다.

다운받은 파일을 실행시켜 노트패드++를 설치한다.

순서에 따라 설치를 진행한다.

3. 무료 호스팅 서비스 신청하기(dothome.co.kr)

위의 홈페이지로 들어가서 회원가입을 한다.

[웹호스팅]메뉴 중 [무료호스팅]을 클릭한다.

[공간만 설치]를 선택하고 신청하기를 클릭한다.

'위의 사항을 숙지했습니다'에 체크를 하고 [무료호스팅 신청하기]를 클릭한다.

무료호스팅 신규신청서를 작성 한 후 [신청하기]를 누른다.

몇 분정도 기다리면 무료호스팅 신청이 완료된다.

이제 '설정한아이디.dothome.co.kr'이 자신의 웹사이트 주소가 된다.

4. FTP 프로그램 설치하기(filezilla-project.org)

클라이언트용 FileZilla를 설치 할 것이다.

위의 링크에 들어가서 [Download FileZilla Client]를 클릭한다.

[Download Now]를 클릭한다.

[저장]을 클릭해 파일을 저장한다.

프로그램을 설치 파일을 실행시킨다.

순서에 따라 설치를 진행한다.

설치가 끝난 후 FileZilla 프로그램을 실행시킨다.

호스트에는 닷홈에서 설정했던 자신의 홈페이지주소(설정한아이디.dothome.co.kr)

사용자명에는 아이디, 비밀번호에는 FTP 비밀번호를 입력한 후 빠른연결을 클릭한다.

그러면 밑에 창에 "상태 : 연결됨"이 뜬다.

연결을 해제하려면 파란색 동그라미 아이콘을 클릭하면 된다.