수라의 티스토리

embed 태그가 적용 되는 확장자는

 

mp3, wma, wmv, asf, avi, wav, mid, swf 확장자를 가진것입니다.

 

ogg 확장자는 윈도우즈 미디어나 플래쉬로 재생되지 않기 때문에

 

embed 태그가 적용되지 않습니다.

 

embed 태그가 적용되는 확장자	embed 태그가 적용되는 않는 확장자
mp3, wma, wmv, asf, avi, wav, mid, swf	ogg

<EMBED> 태그를 사용하여 음악, 동영상, 가상현실을 홈페이지에 넣을 수 있습니다. 홈페이지에서 멀티미디어 개체를 재생하기 위새서는 각 멀티미디어 개체를 재생시켜줄 PLUGIN 이 설치되어 있어야 합니다.
<EMBED> 태그의 기본적인 사용법은 다음과 같습니다.

<EMBED SRC=" " HEIGHT=" " WIDTH=" " AUTOSTART=" " LOOP=" " HIDDEN=" " VOLUME=" "
PLUGINSPAGE=" ">
</EMBED>

<EMBED> 태그의 속성들

(1) SRC="URL/절대경로" : 실행하고자 하는 음악, 동영상 파일의 URL이나 절대경로를 지정해 줍니다.
(2) HEIGHT="" : 홈페이지에 넣을 매체의 높이를 지정합니다.

(3) WIDRH="" : 매체의 폭을 지정합니다.
(4) AUTOSTART="TRUE/FALSE" : 자동 재생 기능 설정, 웹페이지 접속시 자동으로 재생할 것인가를 결정합니다.(TRUE -> ON/ FALSE -> OFF)
(5) LOOP="TRUE/FALSE" : 자동 반복 기능 설정합니다.(TRUE -> ON/ FALSE -> OFF)
(6) HIDDEN="TRUE/FALSE": 매체를 화면에 보여 줄 것인가 아닌가를 설정합니다.(TRUE --> 보여 주지 않음/ FALSE --> 보여 줌)
(7) VOLUME="" : 음악 파일 경우 소리 크기를 설정합니다.
(8) PLUGINSPAGE="URL" : 플러그인이 설치되어 있지 않은 사용자를 위하여 해당 플러그인을 제공하는 사이트의 주소를 적습니다.

(예1)
<EMBED SRC="Free.mov" HEIGHT="150" WIDTH="170" PLUGINSPAGE="HTTP://quicktime.apple.com/qt/sw/sw.html">

(예2) 소리삽입
<EMBED SRC="Free.wav" HEIGHT="30" WIDTH="150">

(예3) 동영상 삽입

<EMBED SRC="Free.avi" HEIGHT="130" WIDTH="150">

(예4) VRML 화일삽입
<EMBED SRC="Free.wrl" HEIGHT="500" WIDTH="300">

플러그인 설치되어 있지 않을경우는  아래 태그로 확인 가능합니다.

<NOEMBED> </NOEMBED> 태그는 사용자의 브라우저가 플러그인이 설치되어 있지 않은 경우나 이를 지원하지 못하는 브라우저를 사용하고 있는 경우에 <IMG>의 ALT와 같은 역할을 합니다.

 

사용 방법은 <NOEMBED> 넣고 싶은 내용 </NOEMBED> 를 <EMBED> 태그와 </EMBED> 태그 사이에 넣어 주시면 됩니다.

 간단한 예를 보겠습니다.

(예)
<EMBED SRC="free.wrl" WIDTH="200" HEIGHT="150">
<NOEMBED> Netscape 나 Internet Explorer를 통해 볼 수 있습니다.</NOEMBED>
</EMBED>

<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
    <param name="movie" value="test.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
    <!--<![endif]-->
    <div>
        <h1>Alternative content</h1>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

**내용 입력시**

<textarea cols=40 rows=5 onfocus="this.value=''">내용을 입력하세요</textarea>
<input type="text" name="textfield" onfocus="this.value=''" value="주소를 입력하세요.">

<textarea cols=40 rows=5 onc　lick="if(this.value=='내용을 적어주세요.^^'){this.value=''}">내용을 적어주세요.^^</textarea> 

 

**이미지 넣을시**

<input type="text" style="background:url(이미지경로) no-repeat 0 50%;" onfocus="this.style.background='none';" />

 

 

**색상 넣을시**

<input type="text" style="background:#ff6600 " onfocus="this.style.background='none';" />

01 / 무분별한 table의 사용금지

 

02 / 잘못된 위치, 태그, 스크립트 사용

• form태그 tr태그 사이에 넣지 않기
• ⇒ 오류의 원인 (form태그의 공배해결을 위해)
• ⇒ 해결책 form {margin:0;}
  
  
• form submit 자바스크립트로 하지 않기
• ⇒ 잘못된 표현예 <a href="javascript:search()"><img src="test.gif" /></a>
• ⇒ 해결책  <input type="submit" /> 혹은 <input type="image" />
  
  

  <form action="/search/" method="get" onsubmit="validation(this)"> <div class="search"> <select> <option>제목</option> <option>내용</option> <option>작성자</option> </select> <input type="text" size="10" class="type-text" /> <inpyt type="image" src="button_search.gif" alt="검색" /> </div> </form>

 

 

 

03 / 올바른 그룹요소의 사용 (div, span)

• div등 일부 태그를 table 대용으로 사용하지 않도록 한다. (의미에 맞는 태그사용)
• block / inline 예
• block 요소 ⇒ <div>, <form>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>
• inline 요소 ⇒ <span>, <a>, <img>, <slect>, <input>

 

04 / 표제의 사용(Heading)

• <h1>~<h6> 문서내 가장 중요한 제목을 <h1>에서 부터 차례대로 하위 heading 지정
• <h1> 하위 heading은 <h3>로 건너띄어서는 안된다.

05 / 올바른 문단작성을 위한<p>태그

• <p>올바른 문단작성을 위해 P태그 사용해라</p>
• <p>태그는 inline요소만을 포함할 수 있다.⇒

 

 

 

06 / 구문을 분리해서 사용하라 (em,strong,dfn,code,samp,kbd,var,cite,abbr,acronym)

• 의미에 있어 강조(em, strong)
• <em> ⇒ 이탤릭체로 표현
• <strong> ⇒ 볼드체로 표현
• <i> 또는 <b> 단순히 표현을 이탤릭이나 볼드로 표현 
• <i> 이탤릭
• <b> 볼드
  
  
• 용어정의를 나타는 <dfn>
• <dfn> DDR(dial-on-demand routing) </dfn> 이란 어쩌구 저쩌구....
  
  
• 코드표현 <code>
• <code> ⇒ 컴퓨터 코드를 나타냄
• <samp> ⇒ 코드의 결과 출력물을 나타냄
  
  
• 값을 표현하는 <kbd>
• <kbd> ⇒ 유저키보드 입력
• <kbd>Enter</kbd>키를 누르세요.
• <var> ⇒ 프로그램에서의 변수선언
  
  
• 인용이나 출처를 나타내는 <cite>
  
  
• 축약을 표현하는 <abbr>, <acronym>
• <abbr> ⇒ 축약어(한글자씩 읽음) ⇒ who(w.h.o로 한글자씩 발음)
• <acronym> ⇒ 두문자어(약어를 그대로 발음) ⇒ Dom(돔으로 발음)
  
  
• 인용문구표현하는 <blockquote>, <q>
• <blockquote> ⇒ block요소
• <q> ⇒ inline요소
  
  
• 첨자 <sup>, <sub>
• x² + 4x + 4 = (x+2)²

07 / 추가 및 삭제 <ins>, <del>

• 문서에 <ins>새로 추가</ins>되거나 <del>삭제된 내용</del>을 표시 할 수 있습니다.
• <ins> 밑줄로 표시
• <del> 취소선으로 표시

08 / 리스트항목 <ul>, <ol>, <dl>

• <ul></ul>
• 하위로 <li></li>를 가진다.
• 앞에 불릿이 붙는다.
  
  
• <ol> </ol>
• 하위로 <li> </li>가 붙는다.
• 앞에 자동적으로 숫자가 붙는다.
  
  
• <dl></dl>
• 하위에 <dt><dd>를 가진다.
• <dt> ⇒ term을 담는다.
• <dd> ⇒ definition을 담는다.

  [출처] 웹표준가이드(3) / 올바른 마크업을 위한 준수사항|작성자 마그리뜨

table의 구성

 

<thead>, <tbody>, <tfoot>, <th>, <td>등을 적합하게 사용한 작업은 접근성을 높이며 효율적인 css 참조도 쉬워진다.

1. cellpadding, cellspacing / border-collapse, padding

	내용	예전 태그	추천 css
cellpadding	컨텐츠와 cell경계 사이의 영역	cellpadding="0"	border-collapse: collapse;
cellspacing	cell 간의 간격	cellspacing="0"	table th, table td {padding: 0;}
border	cell 경계선	border="0"	생략무방

2. 테이블 고정(table-layout: fixed)

width값을 정확하게 입력했는데 입력한데로 표현되지 않을 수 있다.

이때문에 <img src="blank.gif" width="100">을 이용해서 width를 강제로 고정하는 방법을 사용했었다. 이를 보완하는 것이 table-layout 속성

table { table-layout : fixed; }

주의사항

table-layout: fixed;로 width값을 조정할 경우 첫번째 줄 외에 다른 값은 무시된다.

목록 (List)

 

세가지 목록

ul(unordered list)	순서가 없는 리스트
ol(ordered list)	순서가 있는 리스트
dl(definition list)	dt = term , dd = definition 쌍으로 이루어진 리스트

각 브라우저별 특징

<ol>, <ul>	<li>좌측 기본마진 발생, 브라우저별 블릿 다름 (background-image로 해결)
<dl>	출력사항 없음 단 <dd>에서 기본마진 있음

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unordered List</title> <style type="text/css"> ul { margin: 0; padding: 0; list-style: none; } </style> </head> <body> <ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> </body> </html>

아무런 블릿 스타일도 적용되지 않은 세줄의 텍스트가 나옴

여기에 아래 스타일을 적용시키면 블릿을 가진 리스트가 생긴다.

 li {

background: url(bullet.gif) no-rpeat 0 0.25em;

padding-left: 15px;

}