Track all markets on TradingView
학습(공부)하는 블로그 :: '컴퓨터 활용/홈페이지 과정' 카테고리의 글 목록
 
 

Notice»

Recent Post»

Recent Comment»

Recent Trackback»

01-30 00:02
Track all markets on TradingView
 
 

20. 멀티미디어 활용하기

컴퓨터 활용/홈페이지 과정 | 2013. 2. 7. 00:00 | Posted by 깨비형
반응형

1. 멀티미디어 파일


○ 멀티미디어 파일의 특징

- 요즘은 통신속도가 급속하게 빨라짐에 따라 동영상 파일의 기술 및 사용 또한 굉장히 많아지고 쉬워  졌지만 아직 완전히 자유롭다고 하기엔 부족

- 동영상 파일들은 나름대로 압축이 되어 있다지만 굉장히 많은 하드디스크의 용량을 요구 

- 보통 홈페이지를 만들어 인터넷에 보내게 될 때 사용할 수 있는 공간은 5~50mb 정도

- 뮤직비디오의 경우만 해도 파일 하나가 차지하는 공간이 20~30mb 정도


○ 비디오 파일을 사용하는 법 : 사운드 태그처럼 링크를 사용해서 연결시켜 주기만 하면 됨.



2. 가장 많이 사용하는 멀티미디어 파일의 종류


○ avi파일(Audio Visual Interleaved)

- 마이크로소프트사의 윈도우환경에서 표준으로 사용되는 영화파일

- 윈도우95나 98. 윈도우NT등에는 "비디오 포 윈도우"라는 소프트웨어가 설치되어 있어 간단히 매체재생기로 동영상을 감상 가능

- 미디어 플레이어로도 재생 가능


○ mov 파일(QuickTime for Windows 무비 파일)

-  애플컴퓨터사에서 만든 비디오형식

- "QuickTime for Windows"라는 프로그램이 있어야 시청 가능


○ mpeg파일(Moving Picture Experts Group)

- 동화상 전문가 그룹에서 만든 형식으로 가장 압축효율이 좋다.

- 확장자는 mpeg 또는 mpg



● mpeg(Moving Picture Experts Group)

  • Moving(한 때 Motion) Picture Experts Group(동화상 전문가 그룹)의 약어. '엠펙'이라 부른다. 미국의 AT&T, 영국의 BT, 밀본의 NTT 등의 통신업체 및 후지쓰, 미쓰비시, 픽처텔, 비디오 텔리컴 등의 화상회의장비 업체들이 주로 참가하여, 움직이는 영상의 압축기술 및 표준정립을 위해 노력하는 단체. 물론 오디오 압축기술도 포함된다. 이 단체에서 영상압축기술에 대한 표준을 정립하면 이들 표준을 지원하는 영상압축칩을 반도체 업체에서는 개발하곤 한다.
  • 최근의 멀티미디어용 비디오 압축 기술의 필요로 그 활약이 돋보이고 있다. 특히 이 단체가 관심을 기울이는 분야는 전송기술로서, MPEG1 규격은 1.5Mbps전송속도(compact disk;CD와 동일)를 갖고 있으며 향후 4와 9Mbps의 MPEG2, 20Mbps의 MPEG++, 그리고 40Mbps의 MPEG3규격을 마련 중이다.


● 리얼오디오 플레이어(Real Player)

  • 리얼오디오는 프로그레시브 네트웍사의 스트리밍 사운드 기술(네트웍을 통해 음향이 끊김없이 흘러나오도록 하는 기술)을 말한다. 리얼오디오 플레이어 또는 클라이언트 프로그램은 웹 브라우저에 포함되어 함께 배포되기도 하지만, 리얼오디오나 기타 다른 웹 사이트로부터 최신 버전을 다운로드 받을 수 있다. 만약 자신의 웹사이트에서 리얼오디오 서비스를 하려면 리얼오디오 서버를 설치해야한다. 리얼오디오 파일은 파일이름 확장자가 "ra(리얼오디오 소리 파일)"나 "rm(리얼오디오 비디오 파일)" "ram(리얼오디오 메타 파일)"으로 끝나므로 쉽게 구분할 수 있다. 
  • 많은 웹 사이트가 리얼오디오를 이용해 자신들의 방송 프로그램을 인터넷을 통해 제공한다. 
  • 우리나라에서도 KBS와 MBC에서 리얼오디오를 이용한 웹 방송을 실시하고 있다.





반응형
저작자표시 동일조건

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

19. 이미지 맵(map) 만들기  (0) 2013.02.06
18. 폼(form) 만들기(2)  (0) 2013.02.06
17. 폼(form) 만들기(1)  (0) 2013.02.06
16. 인라인 프레임(iframe) 만들기  (0) 2013.02.05
15. 프레임(frame) 만들기(2)  (0) 2013.02.05
:

19. 이미지 맵(map) 만들기

컴퓨터 활용/홈페이지 과정 | 2013. 2. 6. 12:04 | Posted by 깨비형
반응형

1. 이미지 맵의 기본개념


○ 이미지 맵(map)

- 이미지를 여러 영역으로 나누어 각각에 서로 다른 웹 페이지를 링크시킨 것. 즉 이미지의 특정부분에 링크를 연결시키는 것

- 하나의 이미지에 부분별로 영역을 지정하여 서로 다른 사이트로 링크 시킬 수 있음


○ 이미지 맵의 기본형식


<img src="이미지 주소" usemap="#맵이름"> ①이미지 부분 

<map name="맵이름">             ②이미지 맵 태그 시작부분 

<area shape="맵형태" coords="좌표값" href="링크될 주소"> ③맵 종류,좌표값,링크될 곳 설정부분 

</map> 


- ①이미지 부분 : 이미지맵이 사용 될 이미지가 불려지는 곳. 주의 할 점은 뒤에 usemap="#맵이름" 속성을 반드시 넣어 주어야 한다. 맵이름은 항상 같아야 하며, 가급적이면 영문 소문자로 정해주는 것이 좋다. 웹페이지의 파일명을 만들 때도 마찬가지로 영문소문자로 정해주시면 좋다. 한글로 해도 되긴 하지만 인터넷이 원래 영문권 나라에서 만들어진 것이기에 한글로 해 놓으면 브라우져가 가끔씩 인식을 못하는 경우가 있기 때문

- ②이미지 맵 태그 시작부분 : 본격적으로 이미지맵 태그가 시작되는 부분. 여기서 맵이름은 ①부분에서 지정해주었던 맵이름을 넣어주면 됨.('#' 표시는 반드시 빼야됨)

- ③맵종류,좌표값,링크될 곳 설정부분 : 여기에서는 이미지맵의 형태와 좌표값 링크될 주소를 지정

· 맵의 형태 : "shape" 속성을 사용. 사각형(rect)/원형(circle)/다각형(poly)

· 좌표값 : "coords" 속성을 사용

· 링크될 곳 : 링크될 곳을 설정할 때는 target=_blank 속성을 넣어 새 창에 열리도록 배려



2. 좌표값

 

○ 좌표값 입력하는 법

- 사각형(rect) : 왼쪽 상단 좌표(x1,y1)과 오른쪽 하단 좌표(x2,y2)를 순서대로 기재

<area shape="rect" coords="x1,y1,x2,y2"> ☜ 이런 형식

- 원형(circle) : 중심좌표(x1,y1)과 반지름(R)을 순서대로 기재

<area shape="circle" coords="x1,y1,R"> ☜ 이런 형식

- 다각형(poly) : 왼쪽 상단의 좌표에서 시작해서 시계방향으로 각 꼭지점의 좌표를 순서대로 기재

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5"> ☜ 이런 형식


○ 좌표값 구하는 방법 : 그림판을 활용





반응형
저작자표시 동일조건

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

20. 멀티미디어 활용하기  (0) 2013.02.07
18. 폼(form) 만들기(2)  (0) 2013.02.06
17. 폼(form) 만들기(1)  (0) 2013.02.06
16. 인라인 프레임(iframe) 만들기  (0) 2013.02.05
15. 프레임(frame) 만들기(2)  (0) 2013.02.05
:

18. 폼(form) 만들기(2)

컴퓨터 활용/홈페이지 과정 | 2013. 2. 6. 00:00 | Posted by 깨비형
반응형

1. 선택 목록 만들기 <select>


○ <select> : 여러 개의 목록이 늘어져 나타나는 풀다운 선택메뉴 만들때 사용


○ 기본형식

 <select name="필드명">...</select>


○ 옵션

- size=숫자 : 숫자는 선택목록의 수

- selected : 선택목록 중 미리 선택되어 보이도록 하는 목록 지정


2. 여러 목록 만들기 <textarea>


○ <textarea> : 여러줄로 구성된 긴 글을 입력할 때 사용


○ 기본형식

<textarea name="입력칸의 이름" rows="세로폭(행수)" cols="가로폭(문자수)">...</textarea>


- name : 입력된 내용을 웹서버와 송수신 할 때 구별하는 키워드



3. 전송버튼<submit>,취소버튼<reset>


○ 전송버튼과 취소버튼 만들기

- <input type="submit"> : 입력받은 정보를 웹서버로 송신하기 위한 전송버튼을 설정할 수 있다. 이렇게 만들어진 버튼에는 "쿼리전송"이란 글자가 나타남(여기에 임의의 이름을 붙일 려면 value속성을 이용해 설정하면 됨)

- <input type="reset"> : 입력칸에 입력한 텍스트의 내용이나 체크된 선택목록 전부 지우기. 이렇게 만들어진 버튼에는 "원래대로"라는 글자가 나타남(글자 또한 변경하고 싶으시면 value속성을 이용해 이름을 바꾸어 주며 됨)






반응형
저작자표시 동일조건

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

20. 멀티미디어 활용하기  (0) 2013.02.07
19. 이미지 맵(map) 만들기  (0) 2013.02.06
17. 폼(form) 만들기(1)  (0) 2013.02.06
16. 인라인 프레임(iframe) 만들기  (0) 2013.02.05
15. 프레임(frame) 만들기(2)  (0) 2013.02.05
:

17. 폼(form) 만들기(1)

컴퓨터 활용/홈페이지 과정 | 2013. 2. 6. 00:00 | Posted by 깨비형
반응형

1. form태그의 기본형식


○ 폼 태그

- 입력양식을 만들 때 사용(예, 방명록, 게시판, 설문조사, 회원등록 폼 등)

- <form> … </form>태그 사이에 필요한 폼들을 삽입. <form>태그 안에 또 다른 <form>태그를 삽입할 수 없다.

- 양식 문서에서 흔히 보게 되는 [전송]단추나 [Submit]단추를 누르면 <form>과 </form> 사이의 내용들이 폼(form)을 처리하는 CGI프로그램으로 전송


○ 폼 태그의 기본 형식


 <form action="데이터 전송될 장소" method="전송방식">
    다양한 폼 형식
 </form>


○ 폼 태그에 사용하는 속성


속성 

설       명 
 <method>  <Form>태그 안의 폼들을 어떻게 넘겨 줄 것인지 전송 방법을 선택
 사용할 수 있는 값은 get과 post인데 대부분 post를 사용
 <name>  폼의 이름을 지정

 한 문서 안에 여러개의 <Form>태그가 있을 경우 폼을 구분하기 위해 사용

 <action>

  <Form>태그 안의 내용들을 처리해 줄 CGI프로그램을 지정
 CGI프로그램은 인터넷에 항상 연결되어 있는 서버 컴퓨터에 미리 설치되어 있어야 함


※ CGI (common gateway interface) 

  •  CGI는 웹서버에 있어 사용자의 요구를 응용프로그램에 전달하고 그 결과를 사용자에게 되돌려주기 위한 표준적인 방법이다. 사용자가 하이퍼링크를 클릭 하거나 웹사이트의 주소를 입력함으로써 웹 페이지를 요청하면, 서버는 요청된 페이지를 보내 준다. 
  • 그러나, 사용자가 웹페이지의 양식에 내용을 기재하여 보냈을 때, 그것은 보통 응용프로그램에 의해 처리될 필요가 있다. 웹 서버는 으레 그 양식 정보를 조그만 응용프로그램에 전달하는데, 이 프로그램은 데이터를 처리하고 필요에 따라 확인 메시지를 보내 주기도 한다. 
  • 이렇게 서버와 응용 프로그램간에 데이터를 주고받기 위한 방법이나 규약들을 cgi라고 부른다. 
  • 만약 웹사이트를 만들 때 어떠한 제어를 위해 cgi 프로그램을 사용하기 원하면, html 파일 내에 있는 url 내에 그 프로그램의 이름을 기술하면 된다. 만약 폼을 만들려고 할 때, 이 url은 forms 태그의 일부로서 기술될 수 있는데, 예를 들어 다음과 같이 쓸 수 있을 것이다. 
     <form method=post action=http://www.mybiz.com/cgi-local/formprog.pl> 
  • 이 태그의 결과로서 mybiz.com에 있는 서버는 입력된 데이터를 저장하기 위해 제어권을 "formprog.pl"이라는 cgi 프로그램에 넘기고, 확인 메시지를 되돌려 준다 
  • (여기서 .pl은 perl로 작성된 프로그램이라는것을 가리키지만, cgi는 다른 언어로도 작성될 수 있다)



2. Text필드와 Pasword필드 폼 만들기


○ 기본 형식

 <form>

 <input type="text/password" name="이름" value="기본문자" size="너비" maxlength="최대 문자수">

 </form>


- type=입력받을 입력 양식을 지정(text/password)

- name=글상자의 입력 필드의 이름을 지정. 양식내용을 수신할 때 데이터를 가려내기 위해 사용(폼 안의 이름을 name라 입력한 것은 인터넷을 접속한 사용자가 입력한 실제 이름을 담아 가져갈 고유한 항목 이름이다.만일 홍길동이라 이름을 입력하면 홍길동이란 이름을 name란 그릇에 담아 가져간다는 뜻)

- value=기본적으로 표시될 기본 문자를 나타냄

- size=입력필드의 너비(문자수)

- maxlength=글자사이에 입력할 수 있는 최대 문자수


○ text와 password의 차이점 : 입력한 내용이 화면에 그대로 나오는 것이 text, password는 *로 표시됨



3. radio 버튼과  checkbox 만들기


○ 기본형식

 <form>

       <input type='"radio/checkbox" name="입력필드 이름" value="서버로 전송될 텍스트">

 </form>


- name 속성은 입력 칸의 이름을 설정하고 질문 항목의 내용을 반영한다.

- value속성은 항목을 선택하였을 때, 서버로 보내지는 text 내용으로 어느 항목을 선택했는지 알 수 있도록 선택 목록 내용을 입력한다. 이에 따라서 어떤 질문에 대해 어떤 회답을 했는지 구별 할 수 있다.   선택목록 중에서 가장 많이 선택되는 항목에 미리 선택되어 나타나도록 checked속성을 추가할 수 있다.


○ radio와 checkbox의 차이점 : 라디오버튼은 오직 하나만 선택할 수 있고, 체크박스는 여러개의 항목을 한꺼번에 선택할 수 있다.





반응형
저작자표시 동일조건

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

19. 이미지 맵(map) 만들기  (0) 2013.02.06
18. 폼(form) 만들기(2)  (0) 2013.02.06
16. 인라인 프레임(iframe) 만들기  (0) 2013.02.05
15. 프레임(frame) 만들기(2)  (0) 2013.02.05
14. 프레임(frame) 만들기(1)  (0) 2013.02.05
:

16. 인라인 프레임(iframe) 만들기

컴퓨터 활용/홈페이지 과정 | 2013. 2. 5. 11:04 | Posted by 깨비형
반응형

1. iframe(인라인프레임)의 기본형식


○ 인라임 프레임(iframe)

- Internal Frame의 약자로 HTML문서 안에 원하는 위치에 프레임을 만드는 것.

- 인터넷 익스플로러에서 확장되어 만들어진 기능으로 기본적으로 익스플로러에서 지원하는 태그


○ 인라인 프레임의 형식


 <iframe src="파일 이름" 속성="속성 값">… </iframe>


○ 인라인 프레임의 특징

- <iframe>과 </iframe> 사이에 들어가는 내용은 iframe을 지원하는 브라우저에서는 완전히 무시되지만, iframe을 지원하지 않는 브라우저에서는 텍스트만 그 영역 안에 보여 준다.

- iframe은 일반 프레임과는 달리 반드시 <body>와 </body>사이에 삽입 되어야 한다.(frame은 <body>와 </body>사이에 삽입되면 안된다.)

- iframe을 지원하지 않는 브라우저를 위해서 일종의 배려로 지원하지 않는 브라우저라고 적어 주는  것이 좋다.


2. iframe(인라인프레임)의 속성


 속성

 설        명
 width/height  화면에 나타날 인라인 프레임의 폭(width)과 높이(height)를 지정
 border  프레임의 테두리를 표시할지 결정

 border="0"으로 설정하면 프레임 테두리가 없어짐.

 사용할 수 있는 값은 0이나 0보다 큰 숫자

 bordercolor  테두리를 표시할 경우 테두리의 색상을 지
 name  프레임의 이름을 지정
 scrolling

 프레임 내부에 스크롤바를 표시할지 결정.

 사용할 수 있는 값은 yes나 no, auto
 src  프레임 안에 나타날 파일이나 URL을 지정
 align  문서 안에서 인라인 프레임의 정렬 방법을 설정
 사용할 수 있는 값은 left,right,center





반응형
저작자표시 동일조건

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

18. 폼(form) 만들기(2)  (0) 2013.02.06
17. 폼(form) 만들기(1)  (0) 2013.02.06
15. 프레임(frame) 만들기(2)  (0) 2013.02.05
14. 프레임(frame) 만들기(1)  (0) 2013.02.05
13. 표 만들기(2)  (0) 2013.02.04
:

15. 프레임(frame) 만들기(2)

컴퓨터 활용/홈페이지 과정 | 2013. 2. 5. 10:46 | Posted by 깨비형
반응형


1.<frame>태그의 name속성 지정하기


○ name속성 : 프레임에 이름을 붙이는 속성. 반드시 영문과 숫자의 조합으로 만들어야 하고, 이름 사이에 여백과 특수문자는 사용할 수 없다.


○ name속성 사용법


<FRAMESET rows="*,*">

<Frame src="1.html" name="top">
<Frame src="2.html" name="bottom">

</FRAMESET>



2.<frame>태그의 target속성 지정하기


 target속성

 설     명
 target="_blank"

 현재 웹 브라우저 화면은 그대로 두고, 새로운 웹 브라우저를 띄워 하이퍼링크 된 문서를 보여 줌
 target="_self"  하이퍼링크된 문서를 현재의 frame에 보여 줌(지정하지 않으면 기본값) 
 target="_parent"  현재의 문서를 가져오도록 한 이전 화면으로 돌아가 하이퍼링크된 문서를 보여 줌 
 target="_top"  frame를 무시하고 하이퍼링크된 문서를 웹 브라우저 화면 전체에 보여 줌
 target="frame이름"  frame태그의 name에서 지정한 이름이 같은 frame에 보여짐


※ 웹문서를 frame으로 나눌 때는 항상 'name'속성과 'target'속성을 지정하는 거 있지 압시다. ^^





반응형
저작자표시 동일조건

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

17. 폼(form) 만들기(1)  (0) 2013.02.06
16. 인라인 프레임(iframe) 만들기  (0) 2013.02.05
14. 프레임(frame) 만들기(1)  (0) 2013.02.05
13. 표 만들기(2)  (0) 2013.02.04
12. 표 만들기(1)  (0) 2013.02.04
:

14. 프레임(frame) 만들기(1)

컴퓨터 활용/홈페이지 과정 | 2013. 2. 5. 10:04 | Posted by 깨비형
반응형

1.<frame>태그의 기본형식


○ frame(프레임) : 화면(windows)를 분할 하는 것

- 화면을 여러 개로 나누어서 나눠진 각각의 화면에 서로 다른 웹 문서를 출력할 수 있다.

- 홈페이지 관리가 용이하며 방문객 또한 홈페이지를 편하게 구경할 수 있다.

- 화면을 분할해서 한쪽에 고정적으로 메뉴를 만들어 둘 수 있다.


○ 기본 형식

 <frameset rows="가로분할비율" cols="세로분할비율" frameborder="0" 또는 "1" >

<frame src="웹페이지 주소"> : frame의 정보지정

<frame src="웹페이지 주소"> : frame의 정보지정

 </frameset>


○ 기본 속성

속성 

 설       명

 rows

 화면을 위 아래로 나눌 때 사용하는 속성
 cols  화면을 좌 우로 나눌 때 사용하는 속성
 border

 각 프레임을 구분하는 테두리를 조절
 border를 '0'이 아닌 겂으로 지정하면 테두리 두께를 조절

 bordercolor 프레임 구분 테두리의 색상을 지정
 frameborder  프레임 구분선을 나타낼 땐 1(기본값) 그렇지 않을 땐 0


○ 사용방법

- 화면을 나누는 rows와 cols속성은 웹 브라우저에 표시되는 프레임의 크기와 개수를 지정할 수 있으며 프레임의 크기는 보통 픽셀(pixel)로 나타내는 절대크기와 창의 전체넓이에 대한 %로 나타내는 상대크기를 많이 사용

- 또한 프레임이 여러개인 경우 각각을 쉼표로 구별해 주면 됨.

예) <frameset rows="20%,50%,30%">이런 형식으로 작성하시면, 화면을 수평으로 3개로 나누며,100%를 기준으로 첫번째 창의 높이는 20% 중간은 50% 맨아래쪽의 창은 30%로 화면이 할당되어 나누어 진다.

- <frameset> 내에는 frame src태그를 포함시키는데, 이 frmae src는 화면에 들어갈 문서를 지정하는데 사용하며, 첫번째 자리에 있는 frame src가 첫번째 프레임 자리에 삽입되며, 두번째 자리에 있는 frmae src가 두번째 프레임 자리에 삽입

- frame태그는 <body>태그 안에 적으시며 안됨. 반드시 <body>태그를 지우고 사용


※ 프레임으르 나누는 방법 세가지

① 전체 창에 대한 %비율로 나누기 

% 값을 사용하기 위해서는 1부터 100사이의 값을 사용하고 뒤에 %를 붙인다. 만약 전체 지정된 % 값이 100이상 또는 이하가 되면, 100이 되도록 균등하게 조정해 줌. 다음은 상대적인 크기를 이용하여 프레임의 크기를 지정한 예.

<FRAMESET COLS="10%,90%">

</FRAMESET> 

이것은 창을 수직으로 두개로 나누어주는 것으로 왼쪽은 전체창의 10%, 오른쪽은 전체창의 90%를 차지하게 된다. 이런경우 만약 800 ×600 해상도인 경우 왼쪽창은 80픽셀, 오른쪽 창은 720픽셀로 배정이 되고 1024 ×768 해상도인 경우 왼쪽창은 102픽셀, 오른쪽 창은 922픽셀로 배정이 된다.


 ② 픽셀 수로 지정해서 나누기 

우선 세 개의 틀을 픽셀의 개수로 지정한 예는 다음과 같다. 

<FRAMESET ROWS="100,300,240">

</FRAMESET> 

이것은 창을 수평으로 세 개로 나눈 것으로 제일 위의 창은 높이가 100픽셀, 그 다음은 300픽셀, 마지막은 240픽셀로 나누어 지도록 지정한 것임.


 ③ "*" 를 이용한 상대적인 비율로 나누기 

비율을 사용할 때에는 숫자가 있는 *와 없는 *를 사용할 수 있다. 이때에 관련된 값이 없는 *의 경우, 행이나 열 중에서 남는 부분을 모두 프레임에 할당하는 것으로 해석하면 된다. 또한 *앞에 숫자가 있는 경우는 프레임에 지정되는 상대적인 비율을 나타낸다. 예를 들어, 3*는 상대적인 값을 갖는 다른 프레임에 비하여 3배의 크기를 지정하게 된다. 예를 살펴보면, 

<FRAMESET ROWS="*, 3*">

</FRAMESET> 

이 같은 경우 두 개의 수평프레임으로 나누는데 위의 프레임과 아래의 프레임의 비율이 1:3이 되도록 할당하게 되는 것. 

<FRAMESET ROWS="100, *"> 

</FRAMESET> 

만약 위와 같이 지정하는 경우는 위의 프레임의 높이는 100픽셀로 하고 아래 프레임은 100을 뺀 나머지 전부를 할당하게 된다.



2.<frameset>태그에 삽입되는 속성


속성

설     명 
 src  프레임 안에 어떤 파일을 표시할지 지정합니다.
 noresize  프레임 경계를 마우스로 조절을 못하게 함
 scrolling="auto/yes/no"  스크롤바를 생기게 할지 정하는 속성

 (auto:자동 yes:항상 보임 no:항상 안보임)





반응형
저작자표시 동일조건

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

16. 인라인 프레임(iframe) 만들기  (0) 2013.02.05
15. 프레임(frame) 만들기(2)  (0) 2013.02.05
13. 표 만들기(2)  (0) 2013.02.04
12. 표 만들기(1)  (0) 2013.02.04
11. 사운드 태그  (0) 2013.02.03
:

13. 표 만들기(2)

컴퓨터 활용/홈페이지 과정 | 2013. 2. 4. 11:11 | Posted by 깨비형
반응형

1. colspan속성, rowspan속성


○ 셀 합치기 속성 : colspan속성과 rowspan속성

- colspan="가로셀 수" : 셀의 수만큼 가로셀들을 하나로 병합

- rowspan="세로셀 수"  : 셀의 수만큼 세로셀들을 하나로 병합


○ 기본 형식

- 칸 합치기

<td colspan="합칠 칸 수"> ... </td>
<th colspan="합칠 칸 수"> ... </th>


- 줄 합치기

<td rowspan="합칠 칸 수"> ... </td>
<th rowspan="합칠 칸 수"> ... </th>

 

○ 주의사항 : 반드시 <td>태그나 <th>태그 안에 속성으로 사용해야 한다.


   

2. 표의 외곽선 그리기 속성<frame>


○ <frame> 속성 : 표의 외곽선의 어느 부분을 보여 줄 것인지를 결정

- 종류

 지정값

설      명
 border  외부 테두리 전부 보임 (기본 값)
 void  외부 테두리 전부가 보이지 않음
 above  표의 위쪽 테두리만 보임
 below  표의 아래쪽 테두리만 보임
 rhs  표의 오른쪽 테두리만 보임
 lhs  표의 왼쪽 테두리만 보임
 hsides  표의 위쪽과 아래쪽 테두리만 보임
 vsides  표의 왼쪽과 오른쪽 테두리만 보임



3. 표의 내부 테두리 속성<rules>


 지정값

설      명 
 all  모든 괘선을 표시
 none  괘선을 표시 안함
 groups  그룹(THEAD,TBODY,COLGROUP)간의 경계선만 표시
 rows  가로열의 괘선만 표시
 cols  세로행의 괘선만 표시




4. <nowrap>태그


○ <nowrap>태그=>셀안의 글자의 줄 바꿈을 금지함





반응형
저작자표시 동일조건

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

15. 프레임(frame) 만들기(2)  (0) 2013.02.05
14. 프레임(frame) 만들기(1)  (0) 2013.02.05
12. 표 만들기(1)  (0) 2013.02.04
11. 사운드 태그  (0) 2013.02.03
10. 하이퍼링크(Link) 태그  (0) 2013.02.02
:

12. 표 만들기(1)

컴퓨터 활용/홈페이지 과정 | 2013. 2. 4. 08:05 | Posted by 깨비형
반응형

1.표 만들기 태그의 기본형식


○ 표 만들기 태그의 기본형식


 <table>...</table>


○ <table>태그 외 기본태그들


기본 태그

설    명 

<table>...</table>

 표를 만들 때 시작과 끝을 알림

 (표 만들 때 맨처음과 끝에 들어감)

<tr>...</tr>

 한 행(가로줄)을 만들어 줌(table row)

<th>...</th>

 셀(칸)제목을 표시함(글자를 굵게 표시, 가운데 정렬)(table header cell)

<td>...</td>

 데이터가 들어갈 셀(칸)을 나타냄(세로줄을 만듬)(table data cell)



2.<table>태그의 속성들


○ <table>태그의 부가적인 속성들


속    성 

설    명 

border="수치" 

  표의 테두리 두께를 조정

 (수치가 클수록 테두리가 두꺼워짐)

 width="수치 or %"

  표의 가로너비를 지정된 수치만큼 정함

 pixel이나 %로 설정할 수 있지만 보통은 %를 주로 사용

 height="수치 or %"

  표의 세로너비를 지정된 수치만큼 정함

 cellspacing="수치"

  셀의 선과 선사이의 여백을 조정(셀 사이의 여백 조정)
 기본:2pixel

 cellpadding="수치"

  셀의 선과 글자사이의 간격을 조정(셀 안의 간격)
 기본:2pixel

 bgcolor="색상명/RGB"

  표 안의 배경색상을 지정

 background="이미지파일"

  표 안의 이미지(그림)삽입


○ 테두리 색상 변경 : <bordercolor="바꾸고 싶은 색상명/RGB코드">


○ 표의 제목 태그

- 형식 : <caption>...</caption>

- 부가속성 : 정렬

· align : left, center. right(기본값은 left)

· valign : top, middle, bottom(기본값은 middle)





반응형
저작자표시 동일조건

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

14. 프레임(frame) 만들기(1)  (0) 2013.02.05
13. 표 만들기(2)  (0) 2013.02.04
11. 사운드 태그  (0) 2013.02.03
10. 하이퍼링크(Link) 태그  (0) 2013.02.02
9. 이미지(Img) 태그  (0) 2013.02.01
:

11. 사운드 태그

컴퓨터 활용/홈페이지 과정 | 2013. 2. 3. 20:47 | Posted by 깨비형
반응형

1.사운드태그 형식의 종류


○ 사운드(sound)태그 : 음악이나 소리가 나오게 하는 태그


○ 사운드 파일의 종류

-  mid((msical Instrument digital) : 웹 상에서 배경음악으로 가장 널리 사용되는 파일 포맷. 적은 용량이기 때문에 방문자에게 큰 무리를 주지 않으며, 사용자의 사운드 카드의 성능에 따라 음질이 많이 좌우  된다.

- ra(real audio),ram : 인터넷에서 자주 사용되고 있는 파일로 리얼 플레이어에서만 재생. 압축률이 아주 뛰어나 온라인을 통한 실시간 재생이 가능한 파일 포맷. 한때 인터넷 라디오 방송국에서 가장 많이 이용한 포맷임

- wav(wave) : 윈도우를 대표하는 파일형식을 IBM과 MS가 윈도우에서 사용하기 위해 개발해 낸 압축 포맷. 웹 상에서 사용이 가능하나 다른 파일보다 용량이 크기 때문에 잘 사용안함

- mp3(MPEG-1 Audio Layer 3) : 보통 CD에 있는 음악 파일의 크기는 30~50 MB 정도이지만, MP3 기술을 이용하면 음질을 거의 같은 수준으로 유지하면서도 데이터 용량을 원래의 약 12분의 1 이하로 줄일 수 있습니다. 이렇게 줄인 파일의 크기는 불과 한곡에 2~5 MB에 불과해 네트웍을 통해 고품질 음악을 쉽게 주고받을 수 있으며 네티즌에게 가장 인기가 좋음

- au : Sun Micro system사에서 만든 사운드 형식으로, 몇 가지 코딩방법을 제시하고 있지만 주로 사용하는 것이 8비트 ㎕aw방식입니다. 음질은 전화로 통화하는 정도의 수준

- aiff : 매킨토시에서 주로 사용되는 형식으로 음질은 고감도이지만 매킨토시 이외의 시스템에서는 열어 볼 수 없다는 단점이 있다.



2.사운드태그<bgsound src>


○ 사용형식

 <bgsound src="음악파일">


○ 특징

- 음악파일을 전부 다운로드 한 후에 재생을 시작하기 때문에 용량이 작은 mid 파일을 주로 사용

- IE 전용 태그

- 배경음악을 한 번만 재생하고 멈춤.(반복하고 싶으면 loop 속성을 이용해야 함)

 <bgsound src="음악파일" loop="infinite 또는 -1">



3.사운드태그<embed src>


○ 사용형식

<embed src="음악파일">


○ <embed>태그의 속성

속성

 설      명

 src

 삽입할 배경 음악 파일

 autostart

 값이 true의 경우 음악을 자동으로 실행시키고 false라고 하면 재생단추를 클릭 했을 때 재생

 width/height

 웹 문서에 표시되는 플레이어 프로그램의 크기 지정

 loop

 배경 음악의 반복 유무 -  true(무한반복), false(1번 재생), 숫자(반복 횟수)

 hidden

 플레이어를 화면에서 감출 것인지 지정 - true(감춤), false(표시)


○ 특징

- 원래는 네스케이프 전용이었지만 지금은 IE에서도 실행 가능

- 다운로드와 동시에 실시간 재생이 가능




반응형
저작자표시 동일조건

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

13. 표 만들기(2)  (0) 2013.02.04
12. 표 만들기(1)  (0) 2013.02.04
10. 하이퍼링크(Link) 태그  (0) 2013.02.02
9. 이미지(Img) 태그  (0) 2013.02.01
8. 목록(List) 태그  (0) 2013.02.01
:
 

티스토리툴바