멀티미디어멀티미디어
Posted at 2013. 5. 13. 23:24 | Posted in 1학기/홈페이지제작• 사운드
- 웹 페이지에 사용할 수 있는 사운드파일의 종류 : wav, mid, mp3, wma 등
- 사운드를 들을 수 있도록 해주는 태그 : <a>, <embed> - <body>에서 사용
<bgsound> - <head>에서 사용
- <a> : <href>에 음악 파일명을 넣음, 파일 다운로드 후 윈도우 플레이어 실행 혹은 저장
ex) <a href="mp3/Beauty_And_The_Beast.mp3">Beauty And The Beast</a>
- <embed>
* 플러그 인을 사용 : 윈도우 미디어 플레이어가 웹 페이지에 나타남
* <embed src="mp3/Beauty_And_The_Beast.mp3"></embed>
- 속성
* width, height : 플레이어 크기
* autostart : 자동 시작 지정, true/false
* loop : 반복 지정, true/false
* hidden : 플레이어 감추기, true/false
- <bgsound>
* 배경음악으로 사용, <head>태그에서 사용
* 속성 : loop 횟수를 지정, loop=20
• 예제
• 동영상
- 비디오 형식 : avi, mpeg, QuickTime, wmv
- 파일의 크기 주의 : 다운로드 형태로 진행, 다운로드 속도를 고려해 가능하면 파일의 크기는 작게
- 동영상을 볼 수 있도록 해주는 링크 : <a>, <embed> - <body>에서 사용
- <a> : href에 동영상 파일명을 넣음, 파일 다운로드 후 윈도우의 플레이어 실행 혹은 저장
- <embed> : 플러그 인을 사용 - 윈도우 미디어 플레이어가 웹 페이지에 나타남
* 속성 : width, height - 크기, 컨트롤 부분 크기, autostart - 자동시작, loop - 반복, hidden - 플레이어 감추기
- <img> : 자동 시작
ex) <img dynsrc="images/jkoh.wmv" height=200>
• 플래시
- 웹 페이지에 플래시 swf도 볼 수 있음.
- 플래시 볼 수 있도록 해주는 태그
* embed, a : body에서 사용
* 플래시에서 "publish" 사용
- embed
* 플러그 인을 사용 : 윈도우 미디어 플레이어가 웹 페이지에 나타남
* 속성 : width, height - 플래시 크기 지정
- a
* href에 동영상 파일명을 넣음
* 웹 브라우저에서 실행됨
• DTD선언
- Document type Definition(문서형 정의)란? * html은 태그와 속성을 사용하여 의미를 부여
* html/xhtml 문서에 대한 가장 기초적인 명세
* 웹 브라우저가 HTML을 해석하는 기준
* 문법 검사기가 유효성을 판단하는 기준
* 종류 : strict DTD, Transitional DTD, Frameset DTD 3개 중 적당한 것을 골라 소스 코드에 삽입
- 문서형 선언
* 문서형 정의를 나타내는 문자열을 소스코드에 입력
* <!DOCTYPE 으로 시작
* <!DOCTYPE HTML PUBLIC "공개 식별자" "시스템 식별자">
* 공개식별자 : -//W3C//DTD HTML 4.01 Transitional//EN
* 시스템식별자 : http://www.3c.org/TR/html4/loose.dtd
웹 서버에서 파일을 다운로드 해서 소스 코드 해석에 사용
- html 4.01 strict DTD
* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.3c.org/TR/html4/strict.dtd">
* HTML 4.01에서 정의된 표준 요소만 사용
* 일반적으로 프레임과 Target 사용 제외 시
- html 4.01 Transitional DTD
* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.3c.org/TR/html4/loose.dtd">
* strict DTD의 정의요소 + html 4.01에서 없어진 이전 버전의 html요소도 사용 가능
* Target 속성을 사용하는 경우 이용
- html 4.01 Frameset DTD
* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.3c.org/TR/html4/frameset.dtd">
• 내부요소 설정
* html의 head부분에 들어가는 내용
- 웹 서버나 브라우저 내부에서 처리할 때 사용
- 내용이 브라우저 창에는 보이지 않음
- title, meta, style, script, link등의 요소 사용
* meta 태그
- 속성과 속성값을 이용해 내부 정보 설정
- 위치는 중요하지 않음
4강 -24강 -2
Posted at 2013. 5. 13. 23:17 | Posted in 1학기/홈페이지제작
4강4강
Posted at 2013. 5. 13. 23:16 | Posted in 1학기/홈페이지제작
3강 -23강 -2
Posted at 2013. 5. 13. 23:15 | Posted in 1학기/홈페이지제작
3강3강
Posted at 2013. 5. 13. 23:15 | Posted in 1학기/홈페이지제작
2강 -22강 -2
Posted at 2013. 5. 13. 23:13 | Posted in 1학기/홈페이지제작
2강2강
Posted at 2013. 5. 13. 23:13 | Posted in 1학기/홈페이지제작
1강 -21강 -2
Posted at 2013. 5. 13. 23:10 | Posted in 1학기/홈페이지제작
1강1강
Posted at 2013. 5. 13. 23:09 | Posted in 1학기/홈페이지제작
태그정리태그정리
Posted at 2013. 5. 13. 23:08 | Posted in 1학기/홈페이지제작HTML (Hyper Text Markup Language)
1. 기본구조
<HTML>
<HEAD>
<TITLE>문서의 제목</TITLE>
</HEAD>
<BODY>
내용
</BODY>
</HTML>
<Hn></Hn> 표제 부분에 들어갈 말을 정의. 1~6까지의 숫자를 사용하고 숫자가 커질수록 표제는 작아짐 default H4
<!--주석--> 주석을 달거나 잠시 이미지를 보이지 않게 할때 사용
2. 문단 혹은 줄을 바꾸는 태그
공백
<P align=""> 문단을 바꾸는 태그 줄바꿈과 동시에 줄을 띈 것같은 효과
<BR> 문단을 바꾸는 태그 줄바꿈의 역할만 수행
<PRE></PRE> 여백이나 줄간격 등을 고정시켜 주는 역할
<BLOCKQUOTE></BLOCKQUOTE> 들여쓰기
<CNETER></CENTER> 전체 문장을 가운데로 정렬
- align : 정렬하기 (left/center/right)
3. 글자관련 태그
<FONT size="n" face="글꼴" color="색깔"></FONT>
- size : 글자의 크기를 마음대로 조절. 숫자는 1~7까지며 7이 가장 큰 크기 (default : 3)
<STRONG></STRONG> , <B></B> 굵은 글씨를 나타내 주는 태그
<I></I>, <EM></EM>, <VAR></VAR> 이탤릭체의 글씨를 나타내 주는 태그
<KBD></KBD>, <CODE></CODE>, <TT></TT> 타자기체의 글씨를 나타내 주는 태그
<U></U> 글자에 밑줄
<S></S> 글자 중앙을 가로지르는 중앙선을 긋는 태그
<BIG></BIG> 글자 크기를 크게 변경
<SMALL></SMALL> 글자 크기를 작게 변경
<BLINK></BLINK> 글자를 깜박이게
<SUB></SUB> 아랫첨자
<SUP></SUP> 윗첨자
4. 선 그리기 태그
<HR align="" width="" size=""> 입체적인 선을 그려줌
- align : 선의 정렬
- width : 선의 폭
- size : 선의 높이
5. 목록을 정리해 주는 태그
<UL></UL> 순서가 없는 목록. 일반적인 나열
<OL></OL> 순서가 있는 목록. 위에서부터 번호 매김
<MENU></MENU> 메뉴 목록으로 그리길지 않은 문장의 열거에 사용
<DIR></DIR> 디렉토리 목록으로 메뉴 목록보다 짧은 문장을 나열
<DL></DL> 정의 목록 태그 <LI>가 아닌<DT>와 <DD>를 사용
6. 하이퍼링크
<A href="URL"></A> 다른 홈페이지와 연결
<A name=""></A> 자신의 홈페이지 내에서 연결 (책갈피) (다른 페이지에서 책갈피로드 : URL#name)
<A href="URL" target="_self/_blank">
- href : 연결될 URL 지정 ("mailto:mail-address" : 메일보내기)
- target
_self : 지금 창에서 연결 (default)
_blank : 새창으로 연결
7. 배경 이미지, 색상 지정
<BODY background="이미지경로"> 배경 이미지 띄어줌
<BODY bgcolor="색깔"> 배경 색깔을 지정
<BODY text="#nnnnnn"></BODY> 글자색을 지정
<BODY link="#nnnnnn"></BODY> 하이퍼링크의 색을 지정
<BODY vlink="#nnnnnn"></BODY> 한번 누른적이 있는 하이퍼링크의 색을 지정
<BODY alink="#nnnnnn"></BODY> 누르고 있는 동안의 하이퍼링크의 색을 지정
* 색상
#00000000
보통 6자리로 색상을 표현하는데 가끔 8자리인경우가 있다.
이때 8자리에서 앞 두자리는 알파값 즉, 투명도를 나타낸다. (00 : 투명 ~ ff : 불투명 )
8. 표 만들기 태그
<TABLE width="" height="" border="" bordercolor="테두리 색깔" background="" frame="" rules="" cellspacing="" cellpadding="" align="">
<TR>
<TD>1행 1열</TD>
<TD>1행 2열</TD>
</TR>
<TR>
<TD>2행 1열</TD>
<TD>2행 2열</TD>
</TR>
</TABLE>
- background : 테이블 배경 이미지 지정
- frame : 바깥쪽 테두리 (void / boxs)
- rules : 안쪽 테두리 (none : 테두리 없음 / cols : 열사이만 테두리 / rows : 행사이만 테두리)
- cellspacing : 셀간의 여백 지정
- cellpadding : 셀과 내용물간의 여백 지정
- align : 테이블 정렬 (left / center / right)
<TD bgcolor="" colspan="" rowspan="" align="" valign="" nowrap>
- colspan : 가로칸을 n만큼 병합
- rowspan : 세로칸을 n만큼 병합
- align : 표안의 좌우 정렬 방식을 정의
- valign : 표안의 상하 정렬 방식을 정의 (top / middle / bottom)
- nowrap : 셀 줄바꿈 안되게 지정
<TH> 제목줄
9. 흐르는 글자 태그
<MARQUEE width="" height="" bgcolor="색깔" behavior="alternate/slide" direction="up/right/..." loop="" scrollmount="" scrolldelay=""> </MARQUEE>
- width, height : 크기 지정
- bgcolor : 배경 색깔
- behavior
alternate : 좌우로 왔다 갔다함
slide : 움직이다가 멈춤
- direction : 방향 지정
- loop : 움직이는 횟수 지정
- scrollmount : 움직이게 되는 길이를 픽셀단위로 지정
- scrolldelay : 움직일 속도를 지정
10. 이미지 태그
<IMG src="이미지 경로" width="n" height="n" border=n vspace="n" hspace="n" align="left/right/..." alt="설명">
- src : 이미지 경로
- width, height : 이미지 크기 지정
- border : 이미지 테두리 굵기 지정
- vspace, hspace : 좌우, 상하 여백 지정
- align : 정렬 (middle : 이미지의 세로 중앙에 글 문단이 정렬)
- alt : 말풍선
11. 이미지 맵
<IMG src="이미지 경로" usemap="#menu>
<MAP name="menu">
<AREA shape="rect/circle/poly" coords="좌표" href="URL" alt="설명">
</MAP>
- name : <IMG> 의 usemap 에서 지정한 맵이름과 동일해야한다.
- shape : 이미지맵의 모양을 사각형(rect), 타원형(circle), 다각형(poly) 중에 지정
- coords : shape 에서 선택한 이미지맵에 따라 좌표부분이 달라진다. 다각형의 경우 최소 3개의 꼭지점이 필요하다.
(circle : 중심점 x좌표, 중심점 y좌표, 반지름)
12. 음악 태그
<BGSOUND src="음악파일 경로" loop="">
<EMBED src="음악파일 경로" autostart="true/false" hidden="true/false" loop="true/false/">
- autostart : 자동 시작 설정
- loop : 반복여부 설정 (-1 : 무한반복)
13. FORM
<FORM>
<INPUT type="text" name="" value="" size="" maxlength=""> 텍스트 입력창
<INPUT type="password" name="" value="" size="" maxlength=""> 패스워드 입력창
<TEXTAREA name="" rows="" cols=""> </TEXTAREA> 텍스트 영역
<INPUT type="radio" name="" value="" checked> 라디오버튼
<INPUT type="checkbox" name="" value="" checked> 체크박스
<SELECT name=""> 콤보박스
<OPTION value=""> </OPTION>
<OPTION value="" selected> </OPTION>
...
</SELECT>
<INPUT type="file" name="" size=""> 파일 선택 상자
<INPUT type="submit" name="" value=""> 전송버튼
<INPUT type="reset" name="" value=""> 취소버튼
<INPUT type="image" name="" src="이미지 경로" alt="설명" align=""> 이미지 버튼
</FORM>
14. 프레임
<FRAMESET cols/rows="" border="" bordercolor="" frameborder="yes/no" framespacing="">
<FRAME name="프레임 이름" src="프레임 문서 경로" marginheight="" marginwidth="" scrolling="auto/yes/no" noresize>
</FRAME>
</FRMAMSET>
- cols : 프레임을 세로방향으로 나누며 가로 폭의 넓이 값을 픽셀이나 퍼센트 단위로 지정
- rows : 프레임을 가로방향으로 나누며 세로 높이의 넓이 값을 픽셀이나 퍼센트 단위로 지정
- border : 프레임 테두리 굵기 지정
- fameborder : yes, no 로 지정하면 프레임 테두리를 화면에 보이게 하거나 없어지게 한다.
- framespacing : 여백 크기 지정
* 프레임 문서에서의 하이퍼 타깃
<A href="파일 경로" target="프레임 이름/_top/_self_/_blank/_parent"> 내용... </A>
- target
1. 프레임 이름 : <FRAME> 태그의 name 속성에서 지정한 프레임 이름을 타깃으로 지정하면 지정한 프레임에 하이퍼링크 문서가 나타난다.
2. _top : 프레임 구조를 무시하고 전체화면 창으로 하이퍼링크 문서가 나타난다.
3. _self : 기본값으로 현재 프레임 화면에 하이퍼링크 문서가 나타난다.
4. _blank : 새로운 화면에 하이퍼링크 문서가 나타난다.
5. _parent : 프레임의 상위 프레임 세트에 하이퍼링크 문서가 나타난다. 복잡한 프레임 세트 구조에서 확인할수있다.
15. 그 밖의 태그들
<DFN></DFN> 정의되어지는 단어에 대한 것
<CITE></CITE> 책이나 사진 등의 제목
<SAMP></SAMP> 컴퓨터상에 메세지
<BASEPOINT>...</BASEPOINT> 기본적으로 미리 약속된 크기를 다시 정할때 사용
[출처] [영진전문대학 컴퓨터정보계열 1-B반] 태그모음|작성자 ㅁㅈ
