'Language/HTML' 카테고리의 글 목록

DOCTYPE

Language/HTML 2011. 9. 28. 16:06

xhtml 작업 중 documnet.body.clientHeight 가 잘못 나올 때가 있다.

(scrollTop, scrollLeft, offsetHeight 등등..)

이유는 바로 선언된 DOCTYPE.. 헤더를 보면 아래와 같이 DTD가 명시되어 있다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

이 DTD만 삭제하면 된다고 하나, DTD가 없으면 각 브라우저는 자신들만의 방식으로 코드를 해석하기 때문에 같은 내용이라도 브라우저별로 다르게 보일 수도 있다.

그렇다면 해결방법은??

document.documentElement.clientHeight

document.body 대신 document.documentElement 를 사용하면 된다.

document.documentElement 는 document 엘레먼트를 읽기전용으로 반환하는 DOM 프로퍼티라고 한다.

아래와 같은 내용도 있으니 참고 할 것..

document.body : 일반(호환)모드

document.documentElement : 엄격모드

document.documentElement 의 또 다른 사용예가 있으니 가히 놀랍다하지 않을 수 없다.

"자바스크립트(Javascript)로 동적으로 생성한 HTML 소스보기"가 가능하다는 것!!

document.documentElement.innerHTML

간단하게나마 alert()을 통해 보면 innerHTML로 넣은 소스도 확인할 수 있고, 변경된 image의 URL도 확인이 된다.

자세히 보려면 textarea에서 확인해 보면 되겠다.

// 참고1. DTD(Document Type Definition)에 따른 문서 형식 // =================

출처 : http://blog.naver.com/jujiwan83/10086841325

HTML 4.01 호환모드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

가장 최근의 CSS 규격을 따름. 엘리먼트 배치가 자유로움, 스크롤링 레이어 같은건 사용불가능, position, display 속성과 구현 방법의 차이가 상이, frame 사용 불가능

HTML 4.01 엄격모드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1999년 12월 24일 확정 규격. 권장하지 않는 element, attribute, frame 사용불가, 엘리먼트 배치가 엄격함, 일부tag가 적용안됨, 가장 이상적인 문서작성시 사용.

XHTML 1.0 호환모드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1999년 12월 24일 확정된 프레임문서. frameset(프레임셋) 사용가능. 하지만 netscape.. ff쪽의 frame은 작동 안됨

XHTML 1.0 엄격모드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

// 참고2. HTML 4.x와 XHTML 1.x에서 기본적으로 지켜야 할 사항 // ================

출처 : http://blog.naver.com/jujiwan83/10086841325

- 문서 타입 명시

- <html> 태그에 xmlns, lang, xml:lang 속성 추가

예) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

- <html> 태그는 DOCTYPE 다음에 오는 맨 처음 태그

- 모든 엘리먼트는 소문자

- 시작태그와 종료태그를 항상 함께

예) <br />, <img src="..." />

- 모든 속성값은 큰따옴표로 둘어싸야 하며, 값이 있어야 함

- HTML 컨텐트에 & 사용금지 &amp 로 사용, 다른 특수 분자도 엔티티로 변환

// 참고3. xhtml 기본 세팅 // =================

출처 : http://www.actrun.com/bbs/board.php?bo_table=tip_html&wr_id=94&page=4

xhtml문서를 작성하기 전에 기본적으로 꼭 들어가야 할 요소들을 살펴보도록 합시다. xhtml은 대소문자를 구분하며, 열어준 태그는 반드시 닫아야 합니다.되도록 소문자로 작성하는 것을 장려합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta name="description" content="문서설명" />
<meta name="keyword" content="키워드" />
<title>웹표준을 지키자</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
..................
</body>
</html>

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DTD 선언을 해줍니다. DTD는 Document Type Definition 의 약자로서 문서형식을 정의해주는 것입니다. DTD가 없으면 각 브라우저는 자신들만의 방식으로 코드를 해석하기 때문에 같은 내용이라도 브라우저별로 다르게 보일 수 있습니다. 여기서는 일반적으로 많이 쓰이는 XHTML 1.0 호환모드인 XHTML 1.0 Transitional 로 정의했습니다. 다른 DTD는 XHTML 1.0 엄격모드 , HTML 4.01 호환모드, HTML 4.01 엄격모드 등이 있습니다만 잘 사용하지 않으므로 자세한 설명은 검색해보시면 나옵니다; 이왕 할꺼 [XHTML 1.0 엄격모드]로 하지!! 라는 분들도 계십니다만;; 제약사항이 좀 있는관계로.....;;;

2. <html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"></html>
html 처음부분이죠! 문서의 시작을 나타냅니다. xmlns="http://www.w3.org/1999/xhtml"는 본 문서가 xhtml로 작성되었음을 나타내는 것입니다. 일반 html문서는 <html>로 시작되지만 xhtml문서는 <html xmlns="http://www.w3.org/1999/xhtml">로 시작합니다.
lang="ko", xml:lang="ko" 각각 한국어를 사용할거라고 알려줍니다.

3. <head></head>
웹 페이지의 내용을 보여주기 전에 head 태그를 먼저 해석하기 때문에 head안에 들어가는 내용은 최소화 할수록 좋습니다. 꼭 필요한 정보들만 기입하도록 합시다. <meta> , <title> , <link> , <script> 와 같은 태그들이 들어갑니다.

4. <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
본 문서에서 사용할 문자셋을 지정해 줍니다. 우리는 ecu-kr을 사용할 것이므로content="text/html; charset=euc-kr" 이렇게 지정해 주었습니다.

5. <meta name="description" content="저의 사이트입니다." />
본 문서의 간략한 설명을 적어줍니다. 또한 메타태그의 문자는 가급적 200자를 넘기지 않도록 하는것이 좋습니다.

6. <meta name="keyword" content="XHTML 스타일시트 웹표준" />
검색엔진 로봇은 컴마(,)를 무시하므로 키워드를 구분할 때는 한칸을 띄워주면 됩니다.

7. <title>웹표준을 지키자</title>
본 문서의 제목을 써줍니다.

8. <link href="css/default.css" rel="stylesheet" type="text/css" />
스타일 시트를 가져옵니다. 03편에서 미리 만들어둔 default.css 파일을 css폴더안에 넣고 연결시켰습니다.

9. <body></body>
<body> 와 </body> 사이에 본문 내용이 들어가면 되겠죠 ^-^?

[출처] documentElement : XHTML 작성시 clientHeight, scrollTop 등의 값이 잘못 나올때|작성자 우iㅋi

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

border-collapse (0)	2011.05.12
input/textarea에 한/영키 사용않고 한글이나 영문 자동으로 나오게 (0)	2010.11.10
Div속성 (0)	2010.10.20
메타(META)태그 (0)	2010.10.07
cellpadding, cellspacing (0)	2010.09.29

:

border-collapse

Language/HTML 2011. 5. 12. 16:52

border-collapse는 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성입니다.

속성값으로는 collapse와 separate를 사용할 수 있습니다.

collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다.
separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 합니다.

<table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse; border:1px gray solid;">
<tr>
<td>border-collapse:collapse;</td>
</tr>
</table>

위와 같이 border-collapse 속성갑을 collapse로 지정하고 border 속성을 추가적으로 지정하면 아래와 같이 깔끔한 테이블을 출력할 수 있습니다.

border-collapse:collapse;

border-collapse 속성은 테두리선의 표시방법만 지정하므로 반드시 border 속성으로 구체적인 테두리선의 스타일을 지정해 주어야 합니다.

테이블의 셀이 많을때는 IE와 Firefox에서 조금 다른 모습으로 출력됩니다. IE에서는 추가적으로 TD element에 border 속성을 추가적으로 지정하면 됩니다.

<table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse; border:1px gray solid;">
<tr>
<td style="border:1px gray solid;">HTML</td>
<td style="border:1px gray solid;">Hypertext Markup Language</td>
</tr>
<tr>
<td style="border:1px gray solid;">CSS</td>
<td style="border:1px gray solid;">Cascading Style Sheet</td>
</tr>
</table>

HTML	Hypertext Markup Language
CSS	Cascading Style Sheet

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

DOCTYPE (0)	2011.09.28
input/textarea에 한/영키 사용않고 한글이나 영문 자동으로 나오게 (0)	2010.11.10
Div속성 (0)	2010.10.20
메타(META)태그 (0)	2010.10.07
cellpadding, cellspacing (0)	2010.09.29

:

input/textarea에 한/영키 사용않고 한글이나 영문 자동으로 나오게

Language/HTML 2010. 11. 10. 17:23

내용은 제목 그대로입니다.

소스는 참 간단하구요.

먼저 첫번째 <input type=text> 이렇게 소스를 적용하면 한/영키를 눌러야지만 한글이 써지죠..

한/영 키를 누르지 안은 상태에서 바로 글 입력시 한글이 나오게 할려면 IME-MODE: active를 적용하면 됩니다.
<input type=text style='IME-MODE: active'>

이렇게 소스를 적용하면 글 입력시 바로 한글이 나오죠.

textarea도 마찬가지로 아래와 같이 하시면 됩니다.
<textarea cols="50" rows="10" style='IME-MODE: active'>
</textarea>

그리고 영어를 나오게 할려면 active 대신 inactive를 넣습니다.
이건 굳이 쓰지 안아도 페이지 로딩시 처음에 영어로 나오니까 쓰지 안아도 됩니다.
<input type=text style='IME-MODE: inactive'>

또, auto는 이전의 인풋이나 텍스트리어에 적용한 것을 그대로 나타냅니다.
무슨 말이냐 하면 아래 처럼 소스를 적용했다구 하면요.
<input type=text style='IME-MODE: active'>
<input type=text style='IME-MODE: auto'>
<input type=text style='IME-MODE: inactive'>
<input type=text style='IME-MODE: auto'>

첫번째에 한글 쓰기가 되었죠. 그럼 두번째도 마찬가지로 한글이 써집니다.
세번째는 영문 쓰기가 되었구요. 네번째는 세번째 영향을 받아서 영문이 써집니다.

[출처] input/textarea에 한/영키 사용않고 한글이나 영문 자동으로 나오게|작성자 성요

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

DOCTYPE (0)	2011.09.28
border-collapse (0)	2011.05.12
Div속성 (0)	2010.10.20
메타(META)태그 (0)	2010.10.07
cellpadding, cellspacing (0)	2010.09.29

:

Div속성

Language/HTML 2010. 10. 20. 15:40

Div속성

1. 글씨속성

2. 짝이 없는 태그(빈태그: 끝나는 표시가 없는 태그)는 뒤에 공백과 슬러쉬를 붙임.

3. 속성값은 반드시 따옴표로 감싸고, 이미지에 반드시 대체텍스트 넣어줌.

4. 약식표기(ex: checked, nowrap) 허용 안 됨.

5. 태그이름과 속성은 반드시 소문자로 표기.

6. <body>에 직접 내용을 삽입할 수 없고 반드시 블록요소(h1,p,div 등)로 감싸주어야 함.

*블록요소란: 항상 앞뒤에 줄넘김을 하는 요소. ex)<p></p>로 둘러싸인 내용 뒤에 <br />을 입력하지 않아도 줄이 넘어감.

<br />은 블록요소가 아닌 인라인요소.

7. name속성 대신 id사용.

8. table 대신 div로 표현 예제.

①<table>

<tr>

</tr>

</table>

→ <div>내용</div>

②<table>

<tr>

</tr>

</table>

→ <div style="float:left;">내용</div>

③<table>

<tr>

</tr>

<tr>

</tr>

</table>

→ <div style="float:left;width:80px;">내용</div>

④<table>

<tr>

</tr>

<tr>

</tr>

</table>

→ <div style="float:left;width:80px;">내용</div>

9.div style 속성 (정렬)

① style="text-align:left;" 텍스트의 좌,우,가운데 정렬. (left, right, center)

② style="vertical-align:middle;" 한 줄 안에서 크기가 다른 폰트의 상하위치 (top, middle, bottom, text-bottom)

10.div style 속성 (위치와 크기)

① style="position：absolute;" absolute(절대위치), relative(상대위치), static(기본값), fixed(고정)

② style="top:15px;" 위에서 아래로 얼만큼 떨어져있는지

③ style="left:15px;" 왼쪽에서 오른쪽 〃

④ style="bottom:15px;" 아래에서 위 〃

⑤ style="right:15px;" 오른쪽에서 왼쪽 〃

⑥ style="z-index:1" 레이어의 순서. 값이 높을 수록 맨 위에 나타남.

⑦ style="visibility:hidden;" hidden(레이어숨김), visible(레이어보임)

div 속성은 style시트로 설정한다. 레이어 객체에 접근 할때에는 레이어아이디.style.속성으로 접근한다.

ex) layerID.style.overflow="auto";

※ 속성

Ø ?position ： absolute(절대위치), relative(상대위치), static(기본값), fixed(고정)

Ø ?top : 위부터 아래쪽으로 위치

Ø ?left : 왼쪽부터 오른쪽으로 위치

Ø ?width : 레이어 가로 길이

Ø ?height : 레이어 세로 길이

Ø ?z-index : 레이어 순서(값이 높을수록 위쪽)

Ø ?visibility : hidden(레이어 숨김), visible(레이어 보임)

Ø background : 레이어 배경색

Ø ?overflow : visible(정해진 크기 무시하고 모두 보여줌), hidden(정해진 크기만큼만 보여줌, 넘는 내용은 짤림), scroll(수평,수직 스크롤을 보여줌), auto(내용이 넘치는 방향으로 스크롤 보여줌)

Ø ?font-family : 폰트종류

Ø ?font-size : 폰트크기

Ø ?padding-top : 위쪽으로부터의 안쪽 여백

Ø ?padding-left : 왼쪽으로부터의 안쪽 여백

Ø ?padding-right : 오른쪽으로부터의 안쪽 여백

Ø ?padding-bottom : 아래쪽으로부터의 안쪽 여백

- 추가

style.

background-color:#색상; - 배경색 지정.
border-left:값px solid #색상; - 왼쪽 테두리 값과 색상 지정.
border-right:값px solid #색상; - 오른쪽 테두리 값과 색상 지정.
border-top:값px solid #색상; - 위쪽 테두리 값과 색상 지정.
border-bottom:값px solid #색상; - 밑쪽 테두리 값과 색상 지정.

margin: 0 auto; - div 가운데 정렬.
width:값px; - 가로 크기 지정.
height:값px; - 세로 크기 지정.
float:left,center,right; - div 위치를 좌, 중간, 우측 정렬.

※ 레이아웃에 관련된 속성

Ø ?float:left - 레이어가 좌측으로 정렬되며, 이후 추가되는 레이어는 옆(좌측)으로 붙게 된다.

Ø ?float:right - 레이어가 우측으로 정렬되며, 이후 추가되는 레이어는 옆(우측)으로 붙게 된다.

Ø ?clear:both - 위의 적용이 해제된다.

ex) <div></div>

[출처] Div속성|작성자 센티그라

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

border-collapse (0)	2011.05.12
input/textarea에 한/영키 사용않고 한글이나 영문 자동으로 나오게 (0)	2010.11.10
메타(META)태그 (0)	2010.10.07
cellpadding, cellspacing (0)	2010.09.29
check box 채크 여부 확인 (0)	2010.09.13

:

메타(META)태그

Language/HTML 2010. 10. 7. 09:22

메타(META)태그

<HEAD> 와 </HEAD> 사이의 공간에 아래와 같은 식으로 입력하면 됩니다.

<META name="generator" CONTENT="홈페이지 제작 도구">
홈페이지를 만드는데 사용한 프로그램 프로그램 이름을 넣으려면 content="메모장" 과

같은 식으로 적으시면 됩니다.

<META name="Author" contents="홈페이지를 제작한 사람 이름">
홈페이지를 만든 제작자를 넣으려면 CONTENT="나는 유완재 입니다." 와 같이 적으면 됩니다.

<META name="Keywords" content="홈페이지가 담고 있는 내용">
홈페이지가 담고 있는 내용을 CONTENT="Tip, 별, 시" 와 같이 ',' 콤마 를 단어 사이에 넣어

나열 하면 됩니다.

검색엔진에서 검색어를 입력 하고 찾기를 할 때 불러 들이는 부분입니다.

메타태그의 핵심기능이라고 할 수 있습니다.

<META name="Description" CONTENT="홈페이지 소개 문구">
홈페이지에 대한 간단한 소개글을 적습니다.

검색로봇 혹은 검색 엔진이라 불리워 지는 것들에 의해 정보가 수집이 됩니다.

<META HTTP-EQUIV="refresh" CONTENT="시간설정, www.naver.com">
설정한 시간이 경과 후 미리 설정해둔 페이지로 자동으로 이동하게 하는 태그 입니다.
예시) "10"초 후에 www.naver.com URL로 자동으로 이동합니다.

<META http-Equiv="Pragma" CONTENT="no-cache">
캐쉬(cache 에서 해당 페이지를 읽어들이는 걸 방지합니다.

들어올 때마다 새로고침을 한 것과 같은 효과입니다.

<META http-Equiv="expires" CONTENT="MON, 01 apr 2002 00:00:01 GMT">
지정된 시간 이후에는 웹문서 캐쉬(cache) 금지.
2002년 4월 1일 이후 부터 웹문서 캐쉬를 금지합니다.

<META http-Equiv="Content-Type" CONTENT="text/html; charset=euc-kr">
한글 전용 페이지로 브라우저에서 한글표현이 자유롭도록 만들어주는 태그

<META http-Equiv="Content-Type" CONTENT="text/html; charset=ks_c_5601-1987 ">
한글이 깨져 보이는 경우, 한글의 코드를 지정하면 한글이 깨져 보이는 현상을 개선할 수 있다.

<META http-Equiv="Content-Type" CONTENT="text/html; charset=ISO-8859-5">
문자 형식을 지정함.
HTML은 ISO코드, 완성형 코드등의 다양한 문자셋을 지정합니다.
일반적으로 ISO 코드를 많이 사용합니다.

<META name="Description" CONTENT="홈페이지 소개문구">
홈페이지 한 눈에 알수 있는 소개문구, 검색엔진에 의해 정보 수집이 됩니다.

<META name="Description" CONTENT="문서의 내용 정보를 입력합니다.">
홈페이지에 대한 설명을 나타내게 합니다.
위의 Keyword와 함께 검색엔진 으로 검색 하였을 때,
홈페이지에 대한 소개 부분에 여기에 설정된 글들이 나타나게 됩니다.

<META name="Keyword" CONTENT=" 홈페이지 키워드 "가, 나">
홈페이지를 두루 널리 알릴 수 있는 각종 키워드 정보

예시) 검색엔진으로 '가' 와 '나' 를 검색하면 이 웹문서를 찾습니다.

<META http-Equiv="Content-Script-Type" CONTENT="text/javascript">
   스크립트 형식을 지정함.
    스크립트 형식에는 text/javascript(자바스크립트) 와 VBScript(비쥬얼베이직 스크립트)가
    있습니다.

<META http-Equiv="Page-Enter" CONTENT="RevealTrans(Duration=10, Transition=50)">
<META http-Equiv="Page-Exit" CONTENT="RevealTrans(Duration=10, Transition=50)">
웹문서를 들어오거나 나갈때 효과주기
속성값이 Page-Enter, Page-Exit는 웹문서를 들어오거나 나갈 때,
한쪽 모서리 부터 서서히 드러나거나 사라지는 효과를 줍니다.

페이지 작성자 정보

<META http-Equiv="Last-Modified" CONTENT="Sat, 5 Jun 2010 00:01:">
최종 수정일 등이 META 태그중에 있습니다...

[출처] 메타(META) 태그 제대로 알고 활용하기|작성자 나는 유완재 입니다

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

input/textarea에 한/영키 사용않고 한글이나 영문 자동으로 나오게 (0)	2010.11.10
Div속성 (0)	2010.10.20
cellpadding, cellspacing (0)	2010.09.29
check box 채크 여부 확인 (0)	2010.09.13
ifram 테두리 넣기 (0)	2010.08.27

:

cellpadding, cellspacing

Language/HTML 2010. 9. 29. 15:32

※ <table>태그 속성

　bgcolor="배경색"
　background="이미지경로"
　align="가로정렬"
　border="값"
　bordercolor="값"
　cellpadding="값" -> 셀과 내용 사이의 여백
　cellspacing="값" -> 셀과 테이블 사이의 여백
　width="가로넓이"
　height="세로높이"

※cellpadding, cellspacing의 차이

※ 표만들기 태그

<tr>태그 : 줄을 생성하는 태그

       속성 : bgcolor="배경색"
　        　align="center/left/right"
　　    　　height="숫자 또는 %"

<td>태그 : 칸(열)을 생성하는 태그

　　속성 : background="배경 이미지 지정"
　    　　　align="center/left/right"
　　       　valign="top/middle/bottom"    -> 상 하 정렬
                colspan="가로 칸 합치기"
　　　       rowspan="세로 칸 합치기"
　　       　width="가로길이"
　          　height="숫자 또는 %"
             　bordercolor="색상값"

* % 와 pixel의 차이

　　pixel값으로 입력하면 브라우저의 크기랑 상관없이 입력한 사이즈를 항상 보여줌.
　　%로 입력하면 브라우저 창의 사이즈 크기에 따라 값이 변경됨.

pixel : 절대적인 값.

% : 상대적인 값.

[출처] cellpadding, cellspacing|작성자 freo78

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

Div속성 (0)	2010.10.20
메타(META)태그 (0)	2010.10.07
check box 채크 여부 확인 (0)	2010.09.13
ifram 테두리 넣기 (0)	2010.08.27
embed 태그의 속성 (0)	2010.08.19

:

check box 채크 여부 확인

Language/HTML 2010. 9. 13. 09:19

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
  function send()
  {
   var count=0;
   //선택된것 갯수 체크
   for (i=0; i<document.myform.rhkstla.length; i++ )
   {
    if (document.myform.rhkstla[i].checked==true)
     {
      count++;
     }
   }
   //체크박스 선택개수가 3보다 크면
   if (count>3)
   {
    //경고문을 띄우고
    alert("3개까지만 선택하세요");
    //전체 체크박스 해제
    for (i=0; i<document.myform.rhkstla.length; i++ )
    {
    document.myform.rhkstla[i].checked=false;
    }
   }
  }
</script>
</HEAD>

------------------------------------------------------------------------------

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
  <script language="javascript">
        function send()
  {
   var result="";

   for (i=0; i<document.myform.list.length; i++ )
   {
    //체크된 값을 result변수에 누적(문자열)
    if (document.myform.list[i].checked==true)
     {
      result +=document.myform.list[i].value+"\n";
     }
   }
   //선택된 것 이 없으면
   if (result=="")
   {
   alert("아무것도 선택하지 않으셨습니다");
   }
   //하나라도 선택이 됐으면
   else
   {
   alert(result);
   }
  }
  </script>
</HEAD>

<BODY>
<form name="myform">
<table border="1">
  <tr>
  <td>
  <input type="checkbox" name="list" value="웹에디터 중급활용">웹에디터 중급활용</input>
  <input type="checkbox" name="list" value="html활용">html활용</input>
  <input type="checkbox" name="list" value="자바스크립트">자바스크립트</input>
  <br>
  <input type="checkbox" name="list" value="css">css</input>
  <input type="checkbox" name="list" value="웹프로그래밍">웹프로그래밍</input>
  <input type="checkbox" name="list" value="플래시">플래시</input>
  <br>
  <input type="button" value="listdysplay" onclick="send();">
  </td>
  </tr>
</table>
</form>
</BODY>
</HTML>

[출처] check box 속성|작성자 비제

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

메타(META)태그 (0)	2010.10.07
cellpadding, cellspacing (0)	2010.09.29
ifram 테두리 넣기 (0)	2010.08.27
embed 태그의 속성 (0)	2010.08.19
TD태그의 속성 (0)	2010.07.05

:

ifram 테두리 넣기

Language/HTML 2010. 8. 27. 11:42

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

cellpadding, cellspacing (0)	2010.09.29
check box 채크 여부 확인 (0)	2010.09.13
embed 태그의 속성 (0)	2010.08.19
TD태그의 속성 (0)	2010.07.05
div정렬 및 겹치기 position:absolute ,position:relative (0)	2010.06.24

:

embed 태그의 속성

Language/HTML 2010. 8. 19. 17:10

1.	SRC SRC 속성은 원본을 의미하는 'source' 라는 의미의 속성이 되겠습니다. 이곳에는 원본 미디어 파일의 주소(URL)가 들어가게 됩니다. 만약 동영상이나 플래시 파일이 제대로 실행되지 않고 멈추어 있다면, 제일 먼저 이곳(SRC)의 링크에 이상이 있는 것은 아닌가~ 확인을 해보셔야 합니다.
2.	WIDTH, HEIGHT 모든 태그에서 거의 공통적으로 사용하는, 넓이와 높이의 WIDTH 와 HEIGHT 는 더이상 설명드리지 않아도 충분히 잘 알고 계실 것이라고 생각합니다. 이 속성들은 미디어 파일이 화면에 나타나는 크기를 의미합니다. (단위가 픽셀(Pixel) 이라는 것. 노파심에 다시 한번 살짝 말씀드려 봅니다.)
3.	LOOP '반복할지의 여부' 를 의미하는 LOOP 속성은 해당 미디어 파일이 연속적으로 실행되게 할지, 아니면 단 한 번만 실행되게 할지를 결정하는 속성입니다. 만약 여기에 TRUE 또는 1 이라는 값을 넣으면 끊임 없이 무한정 반복되며, FALSE 또는 0 의 값을 넣게 되면 단 한 번만 실행하고 멈추게 됩니다. 참고로 이 속성을 지정하지 않았을 때의 기본값은 FALSE 입니다. 또 한가지.. 만약 LOOP 속성에 0이 아닌 다른 숫자를 넣으시면 MARQUEE 태그처럼 그 숫자만큼 적용되는 것이 아니고 무한 반복됩니다. 혼동하시면 안되겠지요?
4.	AUTOSTART 이 속성은 말 그대로 '자동으로 시작되게 할 것인지' 의 여부를 결정합니다. LOOP 와 마찬가지로 TRUE 나 1 의 값을 넣으면 자동으로 미디어 파일이 실행되며, FALSE 나 0 의 값을 넣으면 시작 버튼을 누르기 전까지는 실행이 되지 않습니다. 그리고, 이 속성 값을 지정하지 않았을 때의 기본값은 TRUE 입니다. 따라서 이 속성 값이 없는 경우에는 해당 미디어 파일이 자동적으로 실행 됩니다.
5.	HIDDEN HIDDEN 속성은 이 미디어 파일을 보여줄 것인지 숨길 것인지를 결정합니다. 예를 들어 동영상의 경우, 영상을 숨기고 소리만 들려주고 싶다던가.. 여러가지 이유로 화면을 숨기고 싶을 때 이 속성에 TRUE 값을 적용합니다. (이때는 1의 값을 적용하면 안되는 것 같더군요. TRUE 를 사용하실 것을 권장합니다.) 보여주고 싶다면 이 속성의 값에 FALSE 를 사용하시면 되지만, 이 속성의 기본 값이 FALSE 이기에 굳이 이 값은 넣어주지 않아도 무방할 것 같습니다.
6.	VOLUME 미디어 파일의 소리(볼륨)의 크기를 지정합니다. 최대 크기의 볼륨으로 동영상을 감상하고 싶다면 이 속성에 0 값을 지정하면 되고, 마이너스 값이 점점 커질수록 볼륨의 크기는 점점 줄어들게 됩니다. (제가 제 컴퓨터에서 Windows Media Player 9 로 테스트 해본 결과로는 0 이 최대의 볼륨이고, -3400 정도가 최소의 볼륨인 것 같습니다만.. 뭐, 이 결과는 환경에 따라 달라질 수 있으니까요. 최대 볼륨이 0 이라는 것만 기억하시기 바랍니다.) 만약 이 속성에 양의 정수 값을 입력하면 볼륨은 절반 정도로 자동 조절됩니다. 또한 이 속성 값을 지정하지 않았을 때에도 볼륨은 절반 정도가 되는 것 같습니다.
7.	MUTE MUTE. 즉, '음소거' 라는 기능을 여러분들께서는 잘 아실겁니다. (TV 리모콘을 자주 만지는 분이시라면 더더욱 잘 아실 것 같습니다.) 이 속성은 말 그대로 '완전히 소리를 나오지 않게 하는' 속성인데요. 이 속성 값에 TRUE 또는 1 의 값을 입력하면 '음소거' 된 상태로 재생이 되고, FALSE 또는 0 의 값을 입력하면 정상 볼륨으로 파일이 재생됩니다. 물론 이 속성의 기본값은 FALSE 입니다. 소리는 정상적으로 나오게 되지요.
8.	PLUGINSPAGE HTML 페이지에서 EMBED autostart=true 태그는 멀티미디어 파일을 끼워넣기 위한 태그이며, 플러그인 프로그램이 설치되어 있어야만 파일이 실행된다는 말씀을 위에서 드렸는데요. 플러그인 프로그램이 설치되어 있지 않은 사용자들을 위하여 그 플러그인 프로그램을 설치할 수 있도록 해당 플러그인을 제공하는 사이트의 주소(URL)를 알려주는 속성이 바로 이 PLUGINSPAGE 속성이 되겠습니다. 즉, 이 속성은 플러그인 프로그램이 설치되어 있지 않은 사람들을 위한 속성입니다.
9.	SHOWCONTROLS 이 속성은 동영상을 실행할 때 아래 그림과 같은 재생, 멈춤, 볼륨 조절 등의 컨트롤 패널을 보여줄 것인지를 결정하는 속성입니다.. 이 속성에 TRUE 또는 1 의 값이 들어가면 이 컨트롤이 보여지게 되며, FALSE 또는 0 의 값이 들어가게 되면 컨트롤은 사라집니다. (대신 이 컨트롤의 크기만큼 화면의 크기가 늘어나게 됩니다.) 이 속성의 기본값은 TRUE 이므로, 기본적으로 이 컨트롤은 보여지게 됩니다.
10.	SHOWSTATUSBAR SHOWSTATUSBAR 속성은 동영상을 실행하는 경우에 아래 그림과 같은 상태창이 보여지게 할 것인지 아닌지를 결정하는 속성입니다. 이 속성에 TRUE 또는 1 의 값이 들어가면 상태창이 보여지게 되며, FALSE 또는 0 의 값이 들어가게 되면 상태창은 보여지지 않게 됩니다. 이 속성의 기본값은 FALSE 이므로 기본적으로 상태창은 보여지지 않습니다.

출처 - http://blog.daum.net/kis3535/7826133

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

check box 채크 여부 확인 (0)	2010.09.13
ifram 테두리 넣기 (0)	2010.08.27
TD태그의 속성 (0)	2010.07.05
div정렬 및 겹치기 position:absolute ,position:relative (0)	2010.06.24
input type=image 테두리 없애기 (0)	2010.06.15

:

TD태그의 속성

Language/HTML 2010. 7. 5. 17:19

위에서 사용된 TD태그의 속성 설명입니다.

너비 --------> width="300"
높이 --------> height="300"
위쪽정렬 ----> valign="top"
왼쪽정렬 ----> align="left"

위에서 사용된 TD태그의 안쪽여백 스타일 설명입니다.

위쪽여백 ----> padding-top:50px;
좌측여백 ----> padding-left:50px;

※ 위에서 사용된 안쪽 여백스타일을 아래처럼 한번에 넣어도 됩니다.

padding:50 0 0 50; (숫자의 순서는 위쪽, 오른쪽, 아래쪽, 왼쪽 순서(시계방향)의 여백을 나타냅니다.)

예시) <TD width="300" height="300" valign="top" align="left" style="padding:50 0 0 50;">

[출처] td 속성 여백 주기 |작성자 하늘빛

저작자표시 비영리

'Language > HTML' 카테고리의 다른 글

ifram 테두리 넣기 (0)	2010.08.27
embed 태그의 속성 (0)	2010.08.19
div정렬 및 겹치기 position:absolute ,position:relative (0)	2010.06.24
input type=image 테두리 없애기 (0)	2010.06.15
레이어(div) 겹치기 (0)	2010.06.14

:

랄라라

'Language/HTML'에 해당되는 글 24건

DOCTYPE

'Language > HTML' 카테고리의 다른 글

border-collapse

'Language > HTML' 카테고리의 다른 글

input/textarea에 한/영키 사용않고 한글이나 영문 자동으로 나오게

'Language > HTML' 카테고리의 다른 글

Div속성

'Language > HTML' 카테고리의 다른 글

메타(META)태그

'Language > HTML' 카테고리의 다른 글

cellpadding, cellspacing

'Language > HTML' 카테고리의 다른 글

check box 채크 여부 확인

'Language > HTML' 카테고리의 다른 글

ifram 테두리 넣기

'Language > HTML' 카테고리의 다른 글

embed 태그의 속성

'Language > HTML' 카테고리의 다른 글

TD태그의 속성

'Language > HTML' 카테고리의 다른 글

티스토리툴바