'이야기 광장 > 비디오 & 영상' 카테고리의 다른 글
♥사랑에 눈물나는 멜로디♥ (0) | 2007.11.04 |
---|---|
스윗소로우의 달팽이 들어보세요 (0) | 2007.11.04 |
명키스 장면 모음집!! (0) | 2007.11.04 |
여고생 다른버전2가지 텔미체육복버전 (0) | 2007.11.04 |
나카시마 미카 "눈의 꽃" , 미사 "눈의 꽃" (0) | 2007.11.04 |
♥사랑에 눈물나는 멜로디♥ (0) | 2007.11.04 |
---|---|
스윗소로우의 달팽이 들어보세요 (0) | 2007.11.04 |
명키스 장면 모음집!! (0) | 2007.11.04 |
여고생 다른버전2가지 텔미체육복버전 (0) | 2007.11.04 |
나카시마 미카 "눈의 꽃" , 미사 "눈의 꽃" (0) | 2007.11.04 |
Strict :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
다음은 이러한 XHTML 규칙에 따라 생성된 XHTML 코드의 예입니다. 아마 겉으로 보기에는 일반 HTML과 별 차이를 못느끼실지도. ^_^;
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
생각보다는 간단하죠?
Strict DTD에서는 사용할 수 없는 HTML 태그들이 있습니다.
<applet> : 애플릿을 이용하기 위해서는 <object> 를 대신 쓰세요.
<frame>, <frameset>, <noframes>: Frameset DTD로 선언하지 않으면 사용할 수 없습니다.
<center>, <font>, <basefont>, <s>, <strike>, <u> : 이러한 "디자인 요소"들은 사용할 수 없습니다. 디자인과 관련된 부분은 모두 CSS에서 처리하도록 합니다.
<iframe> : XHTML 문서에서는 iframe을 사용하지 않습니다. 구조화된 문서를 만드는데 방해됩니다.
<dir>, <menu> : 역시 사용하지 않습니다. (HTML 4.01에서도 삭제되었죠. ^_^)
onClick // onmouseup // onmousedown // onkeydown / onKeyUp // onkeypress (0) | 2007.12.05 |
---|---|
드롭다운 메뉴 변환 HTC, HTC를 이용한 selectBox 꾸미기 (0) | 2007.11.07 |
HTML 4.01 DTD (0) | 2007.11.03 |
META태그란? (0) | 2007.11.03 |
DOCTYPE HTML PUBLIC/....의 각 호환모드 (0) | 2007.11.03 |
DTD
Document Type Definition
Strict DTD
이상적인 문서를 작성할 때 사용
권장하지 않는 element, attribute, frame은 절대 사용하지 못함
element 배치에 대해서도 엄격함
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional DTD
권장하지 않는 element, attribute는 사용가능하나
frame은 사용하지 못함
element 배치에 대해서도 비교적 자유로운 편
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset DTD
Transitional과 유사하되 frame 사용이 가능하다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DTD
Document Type Definition
Strict DTD
이상적인 문서를 작성할 때 사용
권장하지 않는 element, attribute, frame은 절대 사용하지 못함
element 배치에 대해서도 엄격함
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml-strict.dtd">
Transitional DTD
권장하지 않는 element, attribute는 사용가능하나
frame은 사용하지 못함
element 배치에 대해서도 비교적 자유로운 편
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml-transitional.dtd">
Frameset DTD
Transitional과 유사하되 frame 사용이 가능하다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Frameset//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml-frameset.dtd">
드롭다운 메뉴 변환 HTC, HTC를 이용한 selectBox 꾸미기 (0) | 2007.11.07 |
---|---|
XHTML이란? (0) | 2007.11.03 |
META태그란? (0) | 2007.11.03 |
DOCTYPE HTML PUBLIC/....의 각 호환모드 (0) | 2007.11.03 |
유니코드 vs UFT-8 (0) | 2007.11.03 |
태그 설명 및 기본형식
META태그는 와 태그에 입력하는 특수 태그입니다. 화면상에 직접 나타나지 않지만 많은 기능을 가지고 있습니다.
META태그의 여러기법 ◈ 한글 폰트로 페이지 나타내기 웹 페이지를 기본적으로 한글 폰트로 인코딩할 때 사용됩니다. 홈페이지를 만들때 우리가 자주 사용하는 태그에서 글자체를 돋움으로 지정해도 브라우저에서 한글속성을 인식못해 아무 반응도 나타나지 않는 경우가 있는데 이 경우 사용합니다. 그리고 자바애플릿 실행시 한글이 깨져 나올때도 이 태그를 사용하여 해결하기도 합니다. 만약 깨지지 않을 경우 이 태그 사용시 반대의 결과가 발생하기도 합니다.
◈ 검색엔진 키워드 검색에서 내 사이트 맨 위에 뜨게 하기 검색엔진에서 키워드 검색을 해보면 출력되는 자료가 수없이 많습니다. 그 중에서 상위 리스트에 출력이 된다면 아마도 여러분의 홈페이지에 방문자수가 약간 늘어 날 것입니다. 그래서 위와 같은 태그를 홈페이지내에 삽입하면 "홈페이지"라는 키워드로 검색을 하면 일치도가 100%가 되어 리스트의 상위에 위치하게 됩니다. 홈페이지 홍보를 위한 좋은 방법이라고 생각이 됩니다.
◈ 일정 시간 경과 후 자동으로 다음 페이지 로딩하기 자신의 홈페이지가 다른 곳으로 이동해 방문자가 이전의 홈페이지에 방문했을때 자동으로 바뀐 주소로 이동하게 하거나 첫 화면에 회사 로고를 몇 초 보여준 후 회사 메인 홈페이지로 들어가게 하거나 여러 장의 웹 문서를 슬라이드 효과를 나타내는 데 이용되는 태그 입니다. 위의 태그의 경우 5초후 IBM(http://www.ibm.com)사의 홈페이로 이동한다는 뜻 입니다.
◈ TRANS META 태그 효과 메타태그는 페이지를 나갈때나 들어올때 여러가지 효과로 페이지를 나타나게 하는 Trans Meta 태그입니다. 이 메타태그는 넷스케이프에서는 지원을 하지 않고 프레임을 가진 문서에도 지원을 하지 않는 단점이 있습니다.
① : META태그의 이름을 입력하는 부분
② : META태그의 값을 입력하는 부분
<★META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=euc-kr">
<★META HTTP-EQUIV="keywords" CONTENT="홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지">
<★META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.ibm.com">
<★META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans (Duration=3, Transition=23)">
XHTML이란? (0) | 2007.11.03 |
---|---|
HTML 4.01 DTD (0) | 2007.11.03 |
DOCTYPE HTML PUBLIC/....의 각 호환모드 (0) | 2007.11.03 |
유니코드 vs UFT-8 (0) | 2007.11.03 |
UTF-8(유니코드)란 무엇인가? (0) | 2007.11.03 |
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 사용불가, 엘리먼트 배치가 엄격함, 일부태그가 완전히 먹통, 가장 이상적인 문서작성시 사용.
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이 사용가능. 하지만 넷스케이프.. 파폭쪽의 frame은 전혀 작동 되지 않음
XHTML 1.0 엄격모드
코드: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 4.01 DTD (0) | 2007.11.03 |
---|---|
META태그란? (0) | 2007.11.03 |
유니코드 vs UFT-8 (0) | 2007.11.03 |
UTF-8(유니코드)란 무엇인가? (0) | 2007.11.03 |
URL과 URI의 간단한 비교 (0) | 2007.11.03 |
유니코드는 전세계의 모든 문자를 한꺼번에 표현할 수 있는 인코딩입니다. 한글도 완벽히 표현할 수 있습니다. 유니코드에도 여러가지 종류가 있는데, 인터넷에 올릴 HTML 파일을 유니코드로 작성할 때는 반드시 UTF-8 이어야만 합니다. (윈도우에서 기본적으로 사용하는 유니코드는 UTF-8이 아닙니다.)
한국어(euc-kr) 는 '한글'과 '한국에서 통용되는 한자' 그리고 '영문'을 표현할 수 있습니다. 일본식 한자 / 중국어의 간체자 등은 표현할 수 없습니다. 또한 프랑스어의 악상이나 독일어의 움라우트 등도 표현할 수 없습니다. 다만 HTML문서의 경우 euc-kr로도, 외국 문자를 정확히 표현하는 방법이 있습니다. (▶▶ 한국어(euc-kr) 페이지에서 중국식 한자 구현 참조)
요즘의 외국 사이트들은 대체로 UTF-8을 사용합니다. 따라서 미래 지향적인 사이트를 만들려면 UTF-8이 좋습니다. 다만 UTF-8로 HTML문서를 만들면 파일의 용량이 다소 늘어나는 문제가 있습니다. euc-kr에서는 한글 1자가 2바이트지만, UTF-8에서는 한글 1글자가 3바이트입니다. 다만 영문이나 숫자나 공백이나 특수 기호 등은 1바이트입니다.
========================
(1) 보통의 한국어 텍스트 문서: 이것은 아스키 문서이며 유니코드가 아닙니다. 영문/숫자/기호는 1바이트. 한글과 한자는 2바이트로 표현됩니다. euc-kr 또는 ksc_c_5601-1987 로 불리는 인코딩이며 웹페이지 작성에 사용할 수 있습니다. 특수한 외국어 문자나 일본식/중국식 한자는 표현할 수 없습니다.
다음의 2개가 유니코드입니다:
(2) 일반 유니코드(Unicode): 모든 글자를 2바이트로 표현합니다. 전세계 모든 글자들을 한꺼번에 표현할 수 있습니다. 인터넷에 HTML 파일로 올릴 수 없습니다. 즉 웹페이지 작성에 쓸 수 없습니다.
(3) UTF-8 유니코드: 영문/숫자/기호는 1바이트로, 한글과 한자 등은 3바이트로 표현합니다. 전세계 모든 글자들을 한꺼번에 표현할 수 있습니다. 웹페이지 작성에 쓸 수 있습니다. (저의 mwultong.blogspot.com 이 블로그도 UTF-8 로 되어 있습니다)
MS윈도우2000/XP 이상에서는, 외부적으로는 '일반 아스키 인코딩(1번)'을 사용하고, 내부적으로는 '일반 유니코드(2번)'를 사용합니다.
유닉스/리눅스/오픈소스 진영에서는 'UTF-8 유니코드(3번)'를 기본으로 사용합니다.
그렇지만 윈도 메모장에서도 UTF-8 유니코드 문서를 읽고 저장할 수는 있습니다.
====================================
UTF-8 이란, 각종 텍스트 파일의 유니코드(다국어) 인코딩입니다. .txt 파일이나 .html 파일을 UTF-8 로 인코딩하면, 한 페이지에 전세계의 문자를 모두 표현할 수 있는 장점이 있습니다.
일반 유니코드에는 Null 문자가 들어가기 때문에, 인터넷 문서 즉 HTML 작성에 적합하지 않습니다.
인터넷에 올릴 .html 파일 등을 유니코드로 작성할 때에는 UTF-8 인코딩이어야 합니다.
그런데 한국어로 작성된 문서를 UTF-8로 인코딩하면 파일의 용량이 약간 늘어나는 단점이 있습니다. 서버 트래픽이 제한된 경우에는 UTF-8 인코딩이 좀 부담스러울 수도 있습니다. 그리고 국내에는 아직 UTF-8 인코딩이 많이 쓰이지 않고 대부분 euc-kr 인코딩입니다. 그래서 좀 문제가 생기는 경우가 있었습니다.
한국어와, 일본어/중국어가 섞인 문서를 작성할 때 UTF-8 로 인코딩하면 편리했습니다.
HTML 문서를 UTF-8로 인코딩하기 위해서는 우선 그 HTML 파일 자체를 UTF-8로 변환해 준 후, 다음과 같이 메타(meta) 태그에 인코딩을 정의해 주어야 합니다. (물론 euc-kr의 경우도 마찬가지이긴 합니다.)
META태그란? (0) | 2007.11.03 |
---|---|
DOCTYPE HTML PUBLIC/....의 각 호환모드 (0) | 2007.11.03 |
UTF-8(유니코드)란 무엇인가? (0) | 2007.11.03 |
URL과 URI의 간단한 비교 (0) | 2007.11.03 |
[HTML] 테이블 태그 와 속성 (table,tr,td) (0) | 2007.11.03 |
컴퓨터를 사용하면서 종종 UTF-8라는 단어를 들어봤을 것입니다.
하지만 검색을 해보면,복잡한 기술적인 용어가 많아서
오히려 무슨 말인지 이해하기 어렵다는 말을 자주 듣습니다.
이 자리에서는 UTF-8(유니코드)에 대해 가장 기본적인 개념에 대해 소개하도록 하겠습니다.
따라서,기술적이고 복잡한 것들은 최대한 제외하기 위해 노력하였습니다.
UTF-8은 전세계 모든 문자를 동시에 표현할 수 있도록 만들어진 규약입니다.
컴퓨터에서 UTF-8이나 EUC-KR이런 것들이 보인다면,
‘아하,한글 표현과 어떤 관련이 있는 것이로군‘
이라고 생각하시면 됩니다.
UTF-8은 흔히 유니코드라고도 불립니다.
(UTF-8은 유니코드를 표현하기 위한 방식 중의 하나입니다.)
애초에 컴퓨터에서 문자를 표기할때 영어권 국가만 생각해서 만들었기 때문에,
전세계 각 나라들은 자기나라의 문자를 표현하기 위해 나름대로의 독자적인 꼼수를 사용해야 했습니다.
이러한 방법을 인코딩이라고 부릅니다.
우리나라는 한글을 표기하기 위해 EUC-KR라는 인코딩을 사용하였고,
일본은 Shift-JIS,중국은 GB2312,대만은 Big5,우크라이나는 KOI8-U..등등
결국 지구상에는 수십종류의 인코딩이 생기게 되었습니다.
하지만,이렇게 제각각의 길을 걷다 보니 문제가 되는 경우가 많았습니다.
흔히 ‘한글이 깨져 보인다‘거나 ‘이상한 글자가 보인다‘는 말은 이 과정에 문제가 생겼기 때문입니다.
외국에서 만든 프로그램이나 게임들은 한국어 환경에서 제대로 문자가 보이지 않는 경우가 많았고,
반대로 한글로 된 것들은 영문윈도우 등에서 제대로 표시되지 않습니다.
이것은 로마자 외의 문자를 가진 다른 나라도 마찬가지였습니다.
그래서 전세계의 수많은 기업들을 중심으로 이러한 문제와 혼란을 한큐에 해결하기 위한 노력이 진행되었습니다.
그리하여 탄생한 것이 유니코드(Unicode)입니다.
전세계 모든 글자들을 한곳에 몰아넣은 종합세트인 것이죠.
그 중에서 UTF-8이라는 방식이 가장 힘을 얻게 되었고,세계 표준으로 인정받고 있습니다.
UTF-8이 도입되면서 전세계 모든 문자를 동시에 표현할 수 있게 되었고,
따라서 서로간에 충돌이 일어나는 일이 없을 뿐만 아니라 다국어입력 또한 수월하게 되었습니다.
또한,UTF-8은 현존하고 있는 모든 문자를 포함할 뿐만 아니라,학술용도를 위해 인류 역사상 존재했던 문자들을 담을 수 있습니다.
한국어의 경우 현재 사용가능한 11172자의 한글 외에도
아래아,반치음 처럼,이제는 사라져 버린 옛날 문자인 한글고어도 표시할 수 있습니다.
윈도우의 경우 이미 윈도우98부터 유니코드를 채택하여 사용하고 있고,
앞으로도 점점 유니코드가 널리 사용될 것입니다.
하지만 여전히 문제가 되는 곳이 웹페이지 입니다.
흔히 한글파일명으로 된 그림이 보이지 않을때 ‘URL을 항상 UTF-8로 보냄‘ 옵션을 해제하라는 설명을 자주 봅니다.
물론 필요할 경우는 어쩔 수 없겠지만,이 방법은 단지 임시방편일 뿐이라는 사실을 알고 있어야 합니다.
아직까지 네이버를 비롯한 대부분의 사이트들은 UTF-8이 아닌 EUC-KR을 사용하고 있기 때문에 생기는 문제인데,
전세계 각 나라들이 서로간의 언어 충돌로부터 자유로워지기 위해서는
궁극적으로 UTF-8로 통일되어야 할 것입니다.
현재는 과도기에 있기 때문에 다소 불편함을 겪는 것입니다.
이상으로,UTF-8의 기본적인 개념에 대하여 설명하였습니다.
좀더 자세한 기술적인 것에 대해 알고 싶으시다면 아래의 페이지를 방문해 보십시오.
http://www.unicode.org (유니코드 공식 홈페이지)
http://kldp.org/Translations/html/UTF8-Unicode-KLDP/UTF8-Unicode- KLDP.html (UTF-8 및 유니코드에 관한 FAQ모음)
DOCTYPE HTML PUBLIC/....의 각 호환모드 (0) | 2007.11.03 |
---|---|
유니코드 vs UFT-8 (0) | 2007.11.03 |
URL과 URI의 간단한 비교 (0) | 2007.11.03 |
[HTML] 테이블 태그 와 속성 (table,tr,td) (0) | 2007.11.03 |
Form 객체 (0) | 2007.11.03 |
유니코드 vs UFT-8 (0) | 2007.11.03 |
---|---|
UTF-8(유니코드)란 무엇인가? (0) | 2007.11.03 |
[HTML] 테이블 태그 와 속성 (table,tr,td) (0) | 2007.11.03 |
Form 객체 (0) | 2007.11.03 |
Mouse Event (0) | 2007.11.03 |
웹문서 제작에 가장 숙련도를 요구하는 태그로 TABLE 태그가 있다. |
|
|
|
width | table ,tr, td 넓이 |
height | table ,tr, td 높이 |
bgcolor | table ,tr, td 바탕색 |
background | table ,tr, td 배경이미지 |
align | table ,tr, td 수평정렬 |
valign |
table ,tr, td 수직 |
|
border | 테이블 경계선 두께 |
bordercolor | 테이블 경계선 색상 |
bordercolorlight | 테이블 경계선 색상의 밝은 부분 |
bordercolordark | 테이블 경계선 색상의 어두운 부분 |
cellpadding | 열(셀) 내부에서의 내용물이 경계선으로부터 떨어져야 할 여백 |
cellspacing |
각 열(셀) 들간에 떨어져야 할 여백 |
|
colspan | 칸을 열로 합치기 |
rowspan | 칸을 행으로 합치기 |
UTF-8(유니코드)란 무엇인가? (0) | 2007.11.03 |
---|---|
URL과 URI의 간단한 비교 (0) | 2007.11.03 |
Form 객체 (0) | 2007.11.03 |
Mouse Event (0) | 2007.11.03 |
innerHTML 과 createElement의 성능비교 (0) | 2007.11.03 |
1.Form 객체란
document 객체의 하위 내장 객체로 <Form> 태그의 전반적인 정보를 얻어오는 데 사용된다.
document.폼이름.속성
2.Form 객체의 속성
action 폼태그의 action 속성 정보를 나타낸다.
elements 폼을 구성하는 각 요소들을 배열로 나타낸다.
encoding 폼을 통해 서버로 전송되는 MIME 타입을 나타낸다.
length 폼 태그에서 입력양식의 수를 나타낸다.
name 폼 태그의 name 속성을 나타낸다.
method 폼 태그의 method 속성을 나타낸다.
target 폼 태그의 target 속성을 나타낸다.
프로퍼티 | 설 명 |
---|---|
action | <FORM> 태그의 HTML action 속성에 대한 액세스 제공 |
button | GUI 컨트롤 버튼을 나타내는 객체 |
checkbox | 체크 박스 필드를 나타내는 객체 |
elements | 폼 안에 포함되어 있는 모든 필드와 GUI 컨트롤을 포함하는 배열 |
encoding | <FORM> 태그의 HTML enctype 속성에 대한 액세스 제공 |
FileUpload | 파일 업로드 폼 필드를 나타내는 객체 |
hidden | 숨겨진 폼 필드를 나타내는 객체 |
length | elements 배열의 길이에 대한 액세스 제공 |
method | <FORM> 태그의 HTML method 속성에 대한 액세스 제공 |
name | 폼의 이름 식별 |
password | 패스워드 필드를 나타내는 객체 |
radio | 라디오 버튼 필드를 나타내는 객체 |
reset | reset 버튼을 나타내는 객체 |
select | 선택 항목 리스트를 나타내는 객체 |
submit | submit 버튼을 나타내는 객체 |
target | <FORM> 태그의 HTML target 속성에 대한 액세스 제공 |
text | 텍스트 필드를 나타내는 객체 |
textarea | 텍스트 영역 필드를 나타내는 객체 |
3.Form 객체의 메소드
reset() 양식에 입력된 값을 초기화한다.
submit() 양식에 입력된 값을 전송한다.
메 소 드
설 명
handleEvent()
지정된 이벤트에 대한 폼의 이벤트 핸들러를 호출할 때 사용
submit()
폼을 제출시 사용
reset
폼의 엔트리를 디폴트 값으로 재설정시 사용
4.Form과 Form 요소 선택하기
document.폼네임.폼요소네임
document.forms[].elements[]
URL과 URI의 간단한 비교 (0) | 2007.11.03 |
---|---|
[HTML] 테이블 태그 와 속성 (table,tr,td) (0) | 2007.11.03 |
Mouse Event (0) | 2007.11.03 |
innerHTML 과 createElement의 성능비교 (0) | 2007.11.03 |
input 태그 총정리 (0) | 2007.11.03 |
<body bgproperties="fixed" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
바디 부분에 이렇게 써주시면 됩니다.
ondragstart 는 마우스의 드래그 설정을,
onselectstart는 페이지 내에서 드래그를 사용하여 페이지의 텍스트나 이미지는 선택하는 기능을,
oncontextmenu는 마우스 오른쪽을 클릭 했을 때 나타나는 팝업 메뉴를 컨트롤 하는 기능을 합니다.
사실, 마우스 우측클릭시 나타나는 팝업 메뉴는 oncontextmenu 이벤트에 의해서 제어가 되지요..
고로, 이 이벤트만 return false 로 지정해도 효과를 거둘 수 있답니다. ^^
해서, 알려드리면... MSDN에 나와있는 oncontextmenu 메뉴의 구체적인 설명은
MSDN에 나와있는 oncontextmenu에 대한 설명(영문, DHTML)
MSDN에 나와있는 oncontextmenu 예제(영문, DHTML)
이랍니다.. 꼭 한번 읽어보시고, 예제도 다루어 보도록 하세요 ^^
그리고, 막는 것과는 반대로 막혀있는 소스를 볼때는...
익스플로어 창에 view-source:http://막혀있는 주소
[HTML] 테이블 태그 와 속성 (table,tr,td) (0) | 2007.11.03 |
---|---|
Form 객체 (0) | 2007.11.03 |
innerHTML 과 createElement의 성능비교 (0) | 2007.11.03 |
input 태그 총정리 (0) | 2007.11.03 |
rel 속성에 대한 간단한 설명 (0) | 2007.11.03 |
이미지 출처 : http://ajaxian.com/archives/benchmark-dom-vs-innerhtml
Form 객체 (0) | 2007.11.03 |
---|---|
Mouse Event (0) | 2007.11.03 |
input 태그 총정리 (0) | 2007.11.03 |
rel 속성에 대한 간단한 설명 (0) | 2007.11.03 |
HTML 메타 태그를 수정해도 인코딩 지정이 안될때 (0) | 2007.11.03 |
input 태그 총정리
1. <input> : 평범하게 글자나 텍스트칸을 넣을 수있는 공간이 생기죠.
2. <input type=""> : 기존의 input에다가 type를 지정하여 type의 옵션을 넣으면, 다양한 모양이 됩니다. 단 입력이나 기타 등등의 모양 꼴로 변하죠.
3. <input type="text"> : 이건 <input>과 동일한 것인데, text를 넣을 수 있습니다.
4. <input type="password">: 이건 1번과 2번과 3번과 동일한데, 비밀번호로 지정되어 글자를 넣든 숫자를 넣든 **** <-이렇게 표시됩니다.
4. <input type="checkbox"> : 이건 체크박스로 나타납니다.
5. <input type="checkbox" checked> : 이건 체크박스의 선택된 것으로 나오죠.
6. <input type="checkbox" checked disabled> : 이건 체크되었다가 다시는 선택 못하게 하는거죠
7. <input type="radio"> : 이건 라디오 버튼으로 나타납니다.
8. <input type="radio" checked> : 이건 라디오 버튼의 선택된 것으로 나오죠.
9. <input type="radio" checked disabled> : 이건 선택되었다가 다시는 선택 못하게 하는거죠
10. <input type="hidden"> : 이건 숨김필드입니다. 값을 넘겨받을때 숨김속성으로 몰래 감춰지죠. 대부분 form태그의 중요한 속성을 사용할 때 하더군요.
11. <input type="image" src="이미지 경로및 주소"> 이건 이미지의 경로를 넣어 일반<img>태그 처럼 할 수 있습니다. 단 버튼이 이미지의 경로로 바뀌고,form 태그의 submit 태그와 함께 포함되어 있습니다.
12. <input type="reset"> : 이건 초기화 하는 버튼(영어로 submit 또는 초기화라고 나옴)
13. <input type="reset" value="초기화"> : value값에 초기화라고하면 초기화라고 만들어줌
14. <input type="submit"> : 이건 전송버튼
15. <input type="submit" value="전송함"> : 전송버튼인데다가 버튼이름을 전송함 이라고 할 수있음.
16. <input type="file"> : 파일을 첨부할 때 사용하며, CSS와 곁들어서 사용 가능
# 기타 1
1. <input type="text" value="텍스트"> : 이렇게 사용하면 텍스트 칸에 텍스트 라고 글자가 이미 나와버림
2. <input type="text" value="텍스트 사이즈 지정" size="20"> : 텍스트 사이즈를 20만큼 지정
3. <input type="text" value="" name="text"> : php이나, 자바스크립트를 사용할때 변수를 넘거나 받을때 text라는 값을 받도록 name의 갑을 text라 지정하고 이 버튼의 태그 이름을 text라고 지정함
4. <input type="text" value="" name="text" style="border:1;color;red"> : 이건 CSS인데 여러모로 사용 할수있음. 굳이 설명을 하지 않겠음 CSS에서 color;red 라고 지정해주면, 텍스트칸의 글자색을 빨간색으로 지정해줌
# 기타2
특히 value는 <input>태그의 텍스트의 이름을 부여 할때 사용함
예를 들면, <input>과 <input value="텍스트칸 이에요"> 와 차이점을 알게 될 것임
각버튼마다 name값을 부여 할 수있음(name값은 자기마음대로 지정가능)
예를 들면) <input name="button">
각버튼마다, type를 지정할수 있다. 위의 설명을 보면 알겠죠?
type="text/password/hidden/radio/checkbox/file/submit/reset/image"
# 기타3
버튼에 CSS를 첨가하여 이쁘게 꾸밀 수있다.
<input name="button" style="background-color:purple;border-color:red;font-face:굴림;font-size:9pt;">
↑위의 처럼
# 기타4
disabled의 속성과 maxlength="15"의 속성
disabled속성은 input의 선택을 못하게 막아준다
<input type="text" value="" disabled>
<input type="text" value="ㅋㅋㅋ 금지욧" disabled>
<input type="radio" value="" checked disabled>
<input type="checkbox" value="" checked disabled>
그리고 maxlength 속성은 최대 글자 입력넣을 수있는 제한수입니다.
<input type="text" value="" maxlength="20"> <--이렇게 하면 글자 입력수를 20자리만 입력가능
Mouse Event (0) | 2007.11.03 |
---|---|
innerHTML 과 createElement의 성능비교 (0) | 2007.11.03 |
rel 속성에 대한 간단한 설명 (0) | 2007.11.03 |
HTML 메타 태그를 수정해도 인코딩 지정이 안될때 (0) | 2007.11.03 |
태그 총 정리(태그 사전) (0) | 2007.11.03 |
rel="stylesheet"이란 것은 css와 연동되어 사용되는 소스입니다.
태그안에 href 속성을 추가한 후 웹 서버의 스타일 시트의 위치를 지정해 줘야 합니다.
또한 태그에 type="text/css" 속성과 rel="stylesheet" 속성을 추가시켜야 합니다.
innerHTML 과 createElement의 성능비교 (0) | 2007.11.03 |
---|---|
input 태그 총정리 (0) | 2007.11.03 |
HTML 메타 태그를 수정해도 인코딩 지정이 안될때 (0) | 2007.11.03 |
태그 총 정리(태그 사전) (0) | 2007.11.03 |
<a href> 언더바 없애는 방법 (0) | 2007.11.03 |
input 태그 총정리 (0) | 2007.11.03 |
---|---|
rel 속성에 대한 간단한 설명 (0) | 2007.11.03 |
태그 총 정리(태그 사전) (0) | 2007.11.03 |
<a href> 언더바 없애는 방법 (0) | 2007.11.03 |
HTML : 하이퍼 링크에 옵션달기 ( underline 없애기 & 방문한 링크 색 ) (0) | 2007.11.03 |
전체적으로 태그의 유형을 정리해 보았습니다. 어느 정도 부분적인 태그에 자신이 있으시면 대충 한 번만 보셔도 알 수 있을 겁니다. 보다 자세한 것은 따로 떼어서 알기 쉽게 정리해 놓았습니다. 태그의 사전처럼 이용하셔도 될 듯.
태그의 기본
태그 입력 형태 |
내용 설명 |
<HTML> </HTML> |
웹 브라우져에게 현재 전송받은 문서가 HTML 문서라는 것을 알려주는 태그 |
<HEAD> </HEAD> |
HTML 문서의 머리말 구조를 나타내는 태그로 문서에 직접적인 영향을 주지는 않지만, HTML 문서 자체에 대한 여러가지 정보를 가진다. |
<TITLE> </TITLE> |
브라우져 상단의 타이틀 바에 나타낼 HTML 문서의 제목을 정한다. |
<!DOCTYPE> |
이 태그가 사용된 문서가 기초한 HTML 언어의 버전을 설명할 때 사용. |
<LINK> |
스타일시트 파일을 불러오는 등 현재 문서와 다른 문서와의 관계를 설정할 때 사용. 독립 태그이며 머리말 부분에서만 사용된다. |
HREF="이동하려는 파일 또는 URL" | |
<!-- --> |
HTML 문서에 주석(설명 등..)을 포함시킬 때 사용하는 태그로써 문서에는 아무런 변화를 주지 않는다. (단 스크립트 등은 예외) |
<BODY> </BODY> |
HTML 문서의 본문의 시작과 끝을 알린다. |
BACKGROUND="파일명 또는 배경이미지가 있는곳의 URL" → 문서의 배경그림을 정한다. |
문단 , 선 등의 관련 태그 |
<H1~6> </H1~6> |
제목 문자열을 지정하는 태그로 H1 이 가장 작고 H6 이 가장 크다. (기본값 4) |
ALIGN="LEFT | CENTER | RIGHT" 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다. | |
<BR> |
HTML 문서에 줄 바꿈 효과를 주는 독립 태그. |
CLEAR="LEFT | RIGHT | ALL" 이미지 왼쪽, 오른쪽, 양쪽에 여백이 생길 때.. | |
<NOBR> </NOBR> |
문장이 긴 경우 브라우져가 자동으로 다음 줄에 표시해 주는 것을 막을 때 사용 |
<P> </P> 또는 <P> |
빈 줄을 하나 삽입하고 다시 줄을 바꿔서 다음의 문자열을 표시. |
ALIGN="LEFT | CENTER | RIGHT" 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다. | |
<CENTER> </CENTER> |
문단을 가운데로 정렬해 주는 태그 |
<PRE> </PRE> |
PREformat의 약자로 이 태그의 사이에 있는 문자열들은 여백, 줄간격 등이 보이는대로 출력된다. |
<XMP> </XMP> |
이 태그는 <PRE> </PRE> 와 유사하지만 태그 까지도 그대로 화면에 나타내 준다. |
<DIV> </DIV> |
단락 편집 태그로 각 문단 사이에 빈 줄을 추가되지 않는 것을 제외하고는 <P>태그의 기능과 동일. |
ALIGN="LEFT | CENTER | RIGHT" 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다. | |
<HR> |
가로 선(수평선)을 표시하는 독립 태그. |
ALIGN="LEFT | CENTER | RIGHT" → 선을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다. |
글 꼴에 관련된 태그 |
<MARQUEE> </MARQUEE> |
자바를 사용하지 않고 화면에 스크롤되는 문자열을 표시할 때 사용한다. |
ALIGN="LEFT | CENTER | RIGHT" → 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다. | |
<FONT> </FONT> |
문자열의 크기, 글꼴과 색등을 지정한다. |
COLOR="#RGB값 또는 색 이름" → 글자 색을 정한다. | |
<BASEFONT> </BASEFONT> |
기본 텍스트의 글꼴 크기를 정하는 독립 태그. |
COLOR="#RGB값 또는 색 이름" → 글자 색을 정한다. | |
<B> </B> |
태그에 포함된 문자열을 굵은 글자로 만들어준다. |
<I> </I> |
태그에 포함된 문자열을 이탤릭체로 만드는 태그. |
<U> </U> |
태그로 포함된 문자열에 밑줄을 넣을 때 사용되는 태그. |
<S> </S> |
태그에 포함된 문자열의 중간에 선을 그어 삭제 표시를 할 때 사용한다. |
<BLINK> </BLINK> |
태그에 포함된 문자열을 깜빡이게 하여 눈에 쉽게 띄도록 할 때 사용한다. |
목록 작성 시 사용하는 태그 |
<UL> </UL> |
Unordered List의 약자로 각 목록을 볼릿 기호를 사용하여 나열할 때 사용한다. |
TYPE="옵션" → 아래 <LI> 태그의 옵션과 같다. | |
<OL> </OL> |
Ordered List의 약자로 순차적인 목록을 작성할 때 사용한다 |
START="시작번호" | |
<LI> |
<UL>태그, <OL>태그, <DIR>태그, <MENU>태그 등의 사이에 들어가서 목록을 만드는 독립 태그. |
VALUE="n" → 설정된 숫자 부터 시작 | |
<DL> </DL> |
Definition List의 약자로 단어 또는 용어를 설명할 때 사용한다. |
COMPACT | |
<DT> |
Definition iTem의 약자로 정의 목록을 나타낸다. |
<DD> |
정의 내용을 서술한다. |
<DIR> </DIR> |
하나의 문자열이 20자 이하인 경우, 작은 목록을 만들 때 사용한다. |
<MENU> </MENU> |
문장을 열거 |
이미지에 관련된 태그 |
<IMG> |
HTML 문서에서 이미지를 포함시킬 때 사용하는 독립 태그이다. |
SRC="경로를 포함한 이미지 파일명" → 불러올 이미지파일의 위치와 이름을 지정한다. | |
<MAP> </MAP> |
이미지맵의 시작과 끝을 나타낸다. |
NAME="이미지맵 이름" → 이미지맵의 이름을 정한다. | |
<AREA> |
<MAP> 태그 안에 들어가서 이미지를 나누는 독립태그이다. |
SHAPE="RECT | CIRCLE | POLYGON" → 선택부분의 모양을 정한다. (사각형, 원형, 다각형) |
링크 관련 태그 |
<A> </A> |
이미지, 문서, 사운드 등 여러 객체를 문서 내에 연결시킬 때 사용. |
HREF="이동하고자 하는 문서 또는 주소" → 특정 문서를 열거나 특정 주소로 이동 |
테이블 관련 태그 |
<TABLE> </TABLE> |
표의 시작과 끝을 알리고 각종 속성을 정한다. |
BORDER="n" → 표의 테두리 굵기 (픽셀이나 % 단위로 지정할 수 있다.) | |
<TR> </TR> |
표의 한 수평 열을 정한다. <TABLE>태그 안에 들어 가야한다. |
BGCOLOR="#RGB값 또는 색상명" → 표 배경색 | |
<TH> </TH> |
표 머릿 말. <TR>태그 안에 들어 가야한다. |
WIDTH="n" → 셀의 가로크기 (픽셀이나 % 단위로 지정할 수 있다.) | |
<TD> </TD> |
표의 하나하나의 셀. <TR>태그 안에 들어 가야한다. |
WIDTH="n" → 셀의 가로크기 (픽셀이나 % 단위로 지정할 수 있다.) | |
<CAPTION> </CAPTION> |
표의 제목 행을 정한다. <TABLE>태그 안에 들어 가야한다. |
ALIGN="LEFT | CENTER | RIGHT" → 표 안의 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다. |
프레임 관련 태그 |
<FRAMESET> </FRAMESET> |
창틀 기본 설정 |
ROWS="n,n,n,n..." → 상하 크기 나누기 (픽셀이나 % 단위 또는 *로 지정할 수 있다.) | |
<FRAME> |
<FRAMESET> 에서 정한 각각의 창을 설정하는 독립태그 |
SRC="파일 경로 및 이름" → 각각의 창에 연결될 HTML 파일 경로 및 이름 | |
<NOFRAMES> </NOFRAMES> |
프레임을 지원하지 않는 브라우져에서 나타낼 내용 표시 |
폼(FORM) 관련 태그 |
<FORM> </FORM> |
양식의 시작과 끝을 나타내며 각종 속성을 정의한다. |
NAME="이름" → 폼의 이름 | |
<TEXTAREA> </TEXTAREA> |
<FORM> 태그 안에서 텍스트 영역을 만든다. |
NAME="이름" → 텍스트 상자의 이름 | |
<INPUT> |
<FORM> 태그 안에 들어가서 각종 폼을 구성하는 독립 태그. |
NAME="이름" → 폼 구성의 이름을 정한다. 반드시 필요. | |
<SELECT> </SELECT> |
<FORM> 태그 안에서 메뉴나 스크롤 형태의 선택 상자를 만든다. |
NAME=" " → 폼 구성의 이름을 정한다. | |
<OPTION> |
<SELECT> 태그 안에 들어가서 각각의 선택사항을 정하는 독립 태그. |
VALUE=" " → 각각의 값을 정한다. |
rel 속성에 대한 간단한 설명 (0) | 2007.11.03 |
---|---|
HTML 메타 태그를 수정해도 인코딩 지정이 안될때 (0) | 2007.11.03 |
<a href> 언더바 없애는 방법 (0) | 2007.11.03 |
HTML : 하이퍼 링크에 옵션달기 ( underline 없애기 & 방문한 링크 색 ) (0) | 2007.11.03 |
DIV+CSS 레이아웃과 웹 표준 코딩의 장점 (0) | 2007.11.03 |
== 방법 ① ==========================================================
<a href...><img src...></a>
처럼 엔터를 없애고 붙여 쓰세요. 아니면 스타일 시트를 이용해도 됩니다.
== 방법 ② ==========================================================
<STYLE TYPE='text/css'>
<!--
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:hover {color: red; text-decoration: underline}
.blinespace { line-height: 150%}
-->
</style>
<a href> = anchor hyper refference
<img src> = image source
공부하실때 실제 영어 단어로 읽어가며 하시면 더욱더 편하답니다.
HTML 메타 태그를 수정해도 인코딩 지정이 안될때 (0) | 2007.11.03 |
---|---|
태그 총 정리(태그 사전) (0) | 2007.11.03 |
HTML : 하이퍼 링크에 옵션달기 ( underline 없애기 & 방문한 링크 색 ) (0) | 2007.11.03 |
DIV+CSS 레이아웃과 웹 표준 코딩의 장점 (0) | 2007.11.03 |
Table CSS로 제어하기 (0) | 2007.11.03 |
<head> 와 </head> 사이에 아래 소스를 삽입하세요.
<style type="text/css">
<!--
A:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover { text-decoration: none; color: #ff0000; }
//-->
</style>
A:link - 방문한 적이 없는 링크
A:visited - 방문한 적이 있는 링크
A:active - 마우스를 눌렀을 때의 링크 상태
A:hover - 마우스가 링크 위에 올라갔을 때
--------------------------------------------------------------------------------
text-decoration: none; <--- none 밑줄을 없애는 문법
text-decoration: underline; <--- 언더라인 말안해도 알겠죠 ?
text-decoration: overline; <--- 오버라인 ( 윗줄이 생성 )
color : #ff0000; <--- #ff0000 = red
색상을 코드값으로 표현 할땐 # 을 꼭 기입하세요 !
색상명을 적을땐 # 이 들어가면 안되겠죠 ? red...black...
태그 총 정리(태그 사전) (0) | 2007.11.03 |
---|---|
<a href> 언더바 없애는 방법 (0) | 2007.11.03 |
DIV+CSS 레이아웃과 웹 표준 코딩의 장점 (0) | 2007.11.03 |
Table CSS로 제어하기 (0) | 2007.11.03 |
[HTML 태그]오브젝트 엘리먼트(Object element) HTML 태그 문서에 멀티미디어 삽입 (0) | 2007.11.03 |
1. 작고 가벼운 구조와 용량
Div 레이아웃의 경우 순수한 HTML 파일의 코드 라인 수와 파일의 용량은 Table 레이아웃에 비하여 대략 50%정도 절감됩니다. 이렇게 표준으로 코딩된 HTML 파일은 한개 사이트에서 수십 수천 페이지에 이르기 때문에 사용자의 트래픽으로 인한 서버의 부하를 경감할 수 있습니다. 유지보수 비용과 직결되는 문제죠.
Div 를 이용한 표준 코딩이 가벼워 질 수 밖에 없는 이유는 다음과 같습니다. 내용 하나를 원하는 위치에 표기하기 위하여 Table 로 코딩하려면 <table><tr><td>내용</td></tr></table> 이와 같이 3쌍의 태그로 둘러싸야 합니다. 하지만 Div 로 코딩하면 <div>내용</div> 1쌍의 태그로 족합니다. HTML 태그의 코드 라인수와 용량이 반으로 줄만 하죠.
CSS 코드가 조금 더 늘어나긴 하지만 CSS 파일은 해당 웹사이트에 접속시 최초 1회 다운로드 되어 사용자 PC의 캐시메모리에 저장되며, 해당 웹사이트를 빠져나갈 때까지 다시 다운로드 되는 일이 거의 없는 파일입니다. 따라서 CSS 파일의 용량이 늘어나면 HTML 코드가 줄어들어도 전체적인 트래픽량은 대동소이 하지 않을까 라고 생각하신다면 잘못된 계산 입니다. HTML코드는 페이지를 열때마다 새롭게 다운로드 하지만 CSS 파일은 한번만 다운로드 되는 파일이기 때문입니다.
2. XML포멧으로 확장가능,CSS의존도를 높여디자인개편 비용을 절감
웹 표준 코딩은 문서의 구조와 표현을 분리합니다. 구조는 HTML으로 정의하고, 표현은 CSS로 정의합니다. 예를 들면 문서의 제목을 표현함에 있어서 <h1>태그는 구조적으로 의미있는 태그 입니다. 하지만 <h1> 태그는 글자를 단지 구조적으로만 의미있게 표현할 뿐보여주기 위한 장식적인 디자인 표현은 CSS 에서 담당합니다. 이렇게 되면 HTML 태그는 문서의 구조만, CSS는 표현만 따로 분리하여 정의 한 것으로 이는XML 데이터 문서로의 확장을 용이하게 만들고디자인 변경시 HTML 파일의 편집비율은 줄어들고 CSS파일만 수정하면 됩니다.
비표준 웹문서의 디자인 개편시HTML 1,000 페이지를 모두 일일이 열어서 Find & Replace 방식으로 수정하여야했습니다. 또는 테이블 구조가 변경되는 경우기존의 페이지를 수정하는 것보다 다시 생산하는 방식이 훨씬 빠르기 때문에 디자인 개편은 곧 사이트의 재구축을 의미하였습니다. W3C에서 표준으로 권고하는 웹 표준방식으로 제작된 웹사이트는딸랑 CSS 1개 파일을 수정함으로서 HTML 1,000 페이지를 한꺼번에 디자인 개편하는 놀라운 경험을 할 수 있습니다. CSS의 본래 목적이 바로 그것입니다. 이것을 이해하려면 먼저 CSS의 디자인 표현 가능성과 한계에 대하여 알아두셔야 합니다. CSS의 디자인 표현 능력은 상상 그이상입니다.
3. 사람이나 로봇(컴퓨터)이이해하기 쉬운구조
둘러싸는 코드가 간결하고 코드 라인의 양이 줄기때문에 구조를 한눈에 파악하기 쉽습니다. 또한 그뿐만이 아닙니다. Div 레이아웃에서 h1, h2 태그를 사용한 것은 제목을 표기하기 위함이며 ul, li 태그를 사용한 것은 목록을구조적으로 의미있게 표현하기 위함 입니다. h1 태그 대신 제목을 <tr><td>...</td></tr>안에표현하는 것은 어떤 의미도 없으므로 사람이든 검색로봇이든 이해하기 어려운 정보 입니다. 하지만 h1 태그로 둘러싼 제목은 사람 뿐만 아니라 검색로봇도 의미있게 받아들이고 XML 데이터로 확장하기에도 용이합니다. 그동안 하찮게 여겼던 태그들이 얼마나 중요한지 모르실 껍니다.
4. Table 은 고지식 하고 Div 는 유연합니다
솔직히 저는 처음 Div 코딩을 제안 받았을때 이해하기 어려웠습니다. 왜 그래야 하는지. Table 태그도 분명 표준 태그이며 편하고 유용하게 사용해 왔는데 왜이제는 사용하면 안돼는지 의아해 했습니다. 하지만 Div 의 장점을 알게 되면서 부터는 더이상 그것이 궁금하지 않게 되었습니다. 물론 Div 레이아웃을 사용하는 것이 웹 표준 방식이며 소고기 맛을 처음 본 사람이 돼지고기는 쳐다보지도 않는 상황과 같다고 말씀드릴 수 있겠네요. 벽에 액자를 붙인다고 합시다. Table이 콘크리트 벽에 못을 깊숙히 때려박는 행위라면 Div 는 콘크리트 벽에 실리콘 접착행어를 달아주는 것과 같습니다. 언제든지 깔끔하게 떼어서 다른 위치에 붙일 수 있죠. 이게 가장 큰 장점 입니다. 게다가 레이아웃과 디자인 표현에 관한 코드가 CSS 파일안에서 모두 정의 되므로 문서의 구조와 내용은 변경하지 않고 디자인과 레이아웃만 바꾼다면 HTML 파일은 열어볼필요도 없어집니다. 레이아웃과 디자인을언제든지 쉽게 바꿀 수 있는 유지보수의 용이성이죠.
Table 은 현재 셀과 이웃셀이 연결되어 있습니다. 따라서 서로 높낮이나 크기를 완전히 다르게 하려면 따로 Table 태그를 한번 더 사용해야 합니다. 그리고 셀과 셀이 서로 연결되어 있기 때문에 특정부분의 레이아웃을 잘못 변경하면 페이지의 나머지 레이아웃도 함께 수정해야 합니다. 하지만 Div 태그는 각자 따로 노는 스타일 입니다. 물론 서로 밀어내고 붙어있는등 유기적인 관계를 가질 수도 있으며 이것을 변경하는 것은 매우 쉽습니다. css 코드의 position 속성만 변경하면 됩니다. 그럼 서로 함께 움직이거나 따로 놀도록 설정 할 수 있습니다. 다시 한번 말하지만 Div 태그는 둥둥 떠다니는 레이어의 성격을 함께 지니고 있으므로 언제든지 원하는 위치로 옮길 수 있어 유지보수가 매우 용이 합니다.
5. 접근성 문제는 웹 표준만 지키면 90% 이상 해결 됩니다
행정자치부에서 발표한 "홈페이지 구축운영 표준지침 2005" 문서에는 "한국형 웹 콘텐츠 접근성 지침 1.0" 이라는 별첨문서가 있는데 2005년부터 구축되기 시작한 행정기관 홈페이지는 해당 지침을 따르도록 되어 있는 말 그대로의 지침 입니다. 아직 강제성은 없지만 이 지침을 기준으로 평가하는 행위도 이루어 지고 있고 또 앞으로 강제될 활률이 높습니다.
이러한 접근성 지침의 근간이 되는 문서는 W3C에서 발표한 "웹 접근성 가이드" 입니다. 웹 표준은 접근성을 고려하여 제정된 것이기 때문에 웹 표준만 지키면 접근성 문제는 90%이상 자동으로 해결됩니다. 따로 떼어놓고 생각할 수 있는 문제가 아닙니다.
<a href> 언더바 없애는 방법 (0) | 2007.11.03 |
---|---|
HTML : 하이퍼 링크에 옵션달기 ( underline 없애기 & 방문한 링크 색 ) (0) | 2007.11.03 |
Table CSS로 제어하기 (0) | 2007.11.03 |
[HTML 태그]오브젝트 엘리먼트(Object element) HTML 태그 문서에 멀티미디어 삽입 (0) | 2007.11.03 |
Color Name을 이용한 HTML 색상표 (0) | 2007.11.03 |
cellspacing 셀간의 간격.
cellpadding 경계선과 컨텐츠의 간격.
기존에 사용하던 방식.
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td>example</td>
</tr>
</table>
자 이제부터는 CSS로 제어하자.
table { border-collapse: collapse; border: 1px solid #000000; }
table th, table td { padding: 0; }
<table>
<tr>
<td>example</td>
</tr>
</table>
<table> 엘리먼트는 기본적으로 복잡한 width calculation algorithm을 거쳐서 랜더링
되는데 이 알고리즘은 셀안의 컨텐츠와 셀에 지정된 width를 바탕으로 최적의 테이블 레
이아웃을 계산하는 것이다. 대부분 <table>과 <td>에 정확히 width를 지정을 해도 지정
한 대로 width가 나오지 않는 경험을 한 적이 있을 것이고 이때문에 <img
src="blank.gif" width="100"> 을 이용해서 width를 강제로 고정하는 방법도 본적이 있
을 것이다. 이렇게 정확한 폭을 지정하기가 힘들고 복잡한 알고리즘을 거쳐서 랜더링 속도
가 떨어지게 되는데 이를 table-layout이라는 속성을 이용해서 보완 할 수 있다.
table-layout 속성의 기본 값은 auto인데 기본 값일 때에는 테이블이 많이 중첩될 수록
랜더링 속도도 떨어지고 정확한 width 적용이 힘들다. 이 속성의 값을 fixed로 하게 되면
width 계산과정도 없고 정확하게 지정된 값으로 width가 정해지게 된다.
table {
table-layout: fiexd;
}
table-layout: fixed를 사용할때 주의 해야 할 점은 이 속성이 적용된 테이블은 셀의 너비
를 첫번째 줄의 셀의 너비에 맞게 강제로 정해진다는 것이다. 즉, 첫번째 줄의 속성 외의
다른 줄의 width 값은 무시가 되고, 특정 값이 정해 지지 않으면 정해지지 않은 셀의 너
비 만큼 균등하게 나누어서 셀의 너비가 정해진다. 만약에 첫번째 줄에 colspan등을 사용
하여서 모든 셀의 너비를 지정할 수 없을 때에는 <colgroup> 엘리먼트와 <col> 엘리먼
트를 이용해서 너비를 지정해 주게 된다.
<table style="width: 700px">
<colgroup>
<col style="width: 100px">
<col style="width: 200px">
<col style="width: 400px">
</colgroup>
<tr>
<td colspan="2" style="200px">
colspan이 적용되면 원하는 너비 지정을 못함. 그냥 무시됨 ...
</td>
<td>
Cell 1- 2
</td>
</tr>
<tr>
<td style="width: 200px">Cell 2- 1</td>
<td style="width: 200px">Cell 2- 2</td>
<td style="width: 300px">Cell 2- 3</td>
</tr>
</table>
HTML : 하이퍼 링크에 옵션달기 ( underline 없애기 & 방문한 링크 색 ) (0) | 2007.11.03 |
---|---|
DIV+CSS 레이아웃과 웹 표준 코딩의 장점 (0) | 2007.11.03 |
[HTML 태그]오브젝트 엘리먼트(Object element) HTML 태그 문서에 멀티미디어 삽입 (0) | 2007.11.03 |
Color Name을 이용한 HTML 색상표 (0) | 2007.11.03 |
Hex Code를 이용한 HTML 색상표 (0) | 2007.11.03 |
object element 는 문서내에 플래시나 동영상과 같은 개체(Object)를 삽입하는데 사용됩니다.
HTML 태그 문서에 개체를 삽입하는 태그는 여러가지가 있습니다. 동영상과 음악과 같은 멀티미디어를 삽입하는 embed, 자바 애플릿을 삽입하는 applet! 엘리먼트 등이 있습니다. 최근의 추세는 object 엘리먼트로 통합되는 방향입니다.
embed 와 object 의 차이점
embed 엘리먼트는 개채삽입으로 자신의 컴퓨터에 해당 미디어파일을 실행할수 있는 프로그램이 없다면 실행이 되지 않습니다. 그러나 object 엘리먼트는 웹에서 개채를 로드해서 재생되므로 프로그램이 없어도 실행이 가능합니다.
HTML 페이지에 멀티미디어를 추가하는데 embed 엘리먼트도 사용할 수 있지만 embed 엘리먼트를 사용하면 보다 다양한 미디어를 사용 가능합니다.
플래시 삽입
<object type="application/x-shockwave-flash" data="images/menu.swf" width="500" height="70"> <param name="movie" value="menu.swf" /> </object> |
슬라이더 삽입
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> <param name="Min" value="0" /> <param name="Max" value="10" /> </object> |
퀵타임 무비 삽입
<object width="160" height="144" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab>"> <param name="src" value="test.mov"> <param name="autoplay" value="true"> <param name="controller" value="false"> <embed src="sample.mov" width="160" height="144" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"></embed> </object> |
관련강좌 |
리얼 비디오 삽입
<object width="320" height="240" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"> <param name="controls" value="ImageWindow" /> <param name="autostart" value="true" /> <param name="src" value="test.ram" /> </object> |
DIV+CSS 레이아웃과 웹 표준 코딩의 장점 (0) | 2007.11.03 |
---|---|
Table CSS로 제어하기 (0) | 2007.11.03 |
Color Name을 이용한 HTML 색상표 (0) | 2007.11.03 |
Hex Code를 이용한 HTML 색상표 (0) | 2007.11.03 |
웹 색상표 (0) | 2007.11.03 |
관련강좌 |
Color Name | Color HEX | Color |
AliceBlue | #F0F8FF | |
AntiqueWhite | #FAEBD7 | |
Aqua | #00FFFF | |
Aquamarine | #7FFFD4 | |
Azure | #F0FFFF | |
Beige | #F5F5DC | |
Bisque | #FFE4C4 | |
Black | #000000 | |
BlanchedAlmond | #FFEBCD | |
Blue | #0000FF | |
BlueViolet | #8A2BE2 | |
Brown | #A52A2A | |
BurlyWood | #DEB887 | |
CadetBlue | #5F9EA0 | |
Chartreuse | #7FFF00 | |
Chocolate | #D2691E | |
Coral | #FF7F50 | |
CornflowerBlue | #6495ED | |
Cornsilk | #FFF8DC | |
Crimson | #DC143C | |
Cyan | #00FFFF | |
DarkBlue | #00008B | |
DarkCyan | #008B8B | |
DarkGoldenRod | #B8860B | |
DarkGray | #A9A9A9 | |
DarkGrey | #A9A9A9 | |
DarkGreen | #006400 | |
DarkKhaki | #BDB76B | |
DarkMagenta | #8B008B | |
DarkOliveGreen | #556B2F | |
Darkorange | #FF8C00 | |
DarkOrchid | #9932CC | |
DarkRed | #8B0000 | |
DarkSalmon | #E9967A | |
DarkSeaGreen | #8FBC8F | |
DarkSlateBlue | #483D8B | |
DarkSlateGray | #2F4F4F | |
DarkSlateGrey | #2F4F4F | |
DarkTurquoise | #00CED1 | |
DarkViolet | #9400D3 | |
DeepPink | #FF1493 | |
DeepSkyBlue | #00BFFF | |
DimGray | #696969 | |
DimGrey | #696969 | |
DodgerBlue | #1E90FF | |
FireBrick | #B22222 | |
FloralWhite | #FFFAF0 | |
ForestGreen | #228B22 | |
Fuchsia | #FF00FF | |
Gainsboro | #DCDCDC | |
GhostWhite | #F8F8FF | |
Gold | #FFD700 | |
GoldenRod | #DAA520 | |
Gray | #808080 | |
Grey | #808080 | |
Green | #008000 | |
GreenYellow | #ADFF2F | |
HoneyDew | #F0FFF0 | |
HotPink | #FF69B4 | |
IndianRed | #CD5C5C | |
Indigo | #4B0082 | |
Ivory | #FFFFF0 | |
Khaki | #F0E68C | |
Lavender | #E6E6FA | |
LavenderBlush | #FFF0F5 | |
LawnGreen | #7CFC00 | |
LemonChiffon | #FFFACD | |
LightBlue | #ADD8E6 | |
LightCoral | #F08080 | |
LightCyan | #E0FFFF | |
LightGoldenRodYellow | #FAFAD2 | |
LightGray | #D3D3D3 | |
LightGrey | #D3D3D3 | |
LightGreen | #90EE90 | |
LightPink | #FFB6C1 | |
LightSalmon | #FFA07A | |
LightSeaGreen | #20B2AA | |
LightSkyBlue | #87CEFA | |
LightSlateGray | #778899 | |
LightSlateGrey | #778899 | |
LightSteelBlue | #B0C4DE | |
LightYellow | #FFFFE0 | |
Lime | #00FF00 | |
LimeGreen | #32CD32 | |
Linen | #FAF0E6 | |
Magenta | #FF00FF | |
Maroon | #800000 | |
MediumAquaMarine | #66CDAA | |
MediumBlue | #0000CD | |
MediumOrchid | #BA55D3 | |
MediumPurple | #9370D8 | |
MediumSeaGreen | #3CB371 | |
MediumSlateBlue | #7B68EE | |
MediumSpringGreen | #00FA9A | |
MediumTurquoise | #48D1CC | |
MediumVioletRed | #C71585 | |
MidnightBlue | #191970 | |
MintCream | #F5FFFA | |
MistyRose | #FFE4E1 | |
Moccasin | #FFE4B5 | |
NavajoWhite | #FFDEAD | |
Navy | #000080 | |
OldLace | #FDF5E6 | |
Olive | #808000 | |
OliveDrab | #6B8E23 | |
Orange | #FFA500 | |
OrangeRed | #FF4500 | |
Orchid | #DA70D6 | |
PaleGoldenRod | #EEE8AA | |
PaleGreen | #98FB98 | |
PaleTurquoise | #AFEEEE | |
PaleVioletRed | #D87093 | |
PapayaWhip | #FFEFD5 | |
PeachPuff | #FFDAB9 | |
Peru | #CD853F | |
Pink | #FFC0CB | |
Plum | #DDA0DD | |
PowderBlue | #B0E0E6 | |
Purple | #800080 | |
Red | #FF0000 | |
RosyBrown | #BC8F8F | |
RoyalBlue | #4169E1 | |
SaddleBrown | #8B4513 | |
Salmon | #FA8072 | |
SandyBrown | #F4A460 | |
SeaGreen | #2E8B57 | |
SeaShell | #FFF5EE | |
Sienna | #A0522D | |
Silver | #C0C0C0 | |
SkyBlue | #87CEEB | |
SlateBlue | #6A5ACD | |
SlateGray | #708090 | |
SlateGrey | #708090 | |
Snow | #FFFAFA | |
SpringGreen | #00FF7F | |
SteelBlue | #4682B4 | |
Tan | #D2B48C | |
Teal | #008080 | |
Thistle | #D8BFD8 | |
Tomato | #FF6347 | |
Turquoise | #40E0D0 | |
Violet | #EE82EE | |
Wheat | #F5DEB3 | |
White | #FFFFFF | |
WhiteSmoke | #F5F5F5 | |
Yellow | #FFFF00 | |
YellowGreen | #9ACD32 |
Table CSS로 제어하기 (0) | 2007.11.03 |
---|---|
[HTML 태그]오브젝트 엘리먼트(Object element) HTML 태그 문서에 멀티미디어 삽입 (0) | 2007.11.03 |
Hex Code를 이용한 HTML 색상표 (0) | 2007.11.03 |
웹 색상표 (0) | 2007.11.03 |
테이블 테두리 (0) | 2007.11.03 |
관련강좌 |
000000 | 000033 | 000066 |
000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 |
003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 |
006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 |
009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 |
00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 |
00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 |
330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 |
333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 |
336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 |
339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 |
33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 |
33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 |
660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 |
663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 |
666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 |
669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 |
66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 |
66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 |
990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 |
993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 |
996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 |
999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 |
99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 |
99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 |
CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 |
CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 |
CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 |
CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 |
CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 |
CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 |
FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 |
FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 |
FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 |
FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 |
FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 |
FFFF99 | FFFFCC | FFFFFF |
[HTML 태그]오브젝트 엘리먼트(Object element) HTML 태그 문서에 멀티미디어 삽입 (0) | 2007.11.03 |
---|---|
Color Name을 이용한 HTML 색상표 (0) | 2007.11.03 |
웹 색상표 (0) | 2007.11.03 |
테이블 테두리 (0) | 2007.11.03 |
style 속성 (0) | 2007.11.03 |
※ 원하는 색깔을 드래그해서 복사하십시오. | |||||||||
#93DAFF | #98DFFF | #9DE4FF | #A2E9FF | #A7EEFF | #ACF3FF | #B0F7FF | #B4FBFF | #B9FFFF | #C0FFFF |
#87CEFA | #91D8FA | #A5D8FA | #AFDDFA | #B9E2FA | #C3E7FA | #CDECFA | #D7F1FA | #E1F6FA | #EBFBFF |
#00BFFF | #0AC9FF | #14D3FF | #1EDDFF | #28E7FF | #32F1FF | #3CFBFF | #46FFFF | #96FFFF | #C8FFFF |
#00A5FF | #00AFFF | #00B9FF | #00C3FF | #00CDFF | #00D7FF | #00E1FF | #00EBFF | #00F5FF | #00FFFF |
#1EA4FF | #28AEFF | #32B8FF | #3CC2FF | #46CCFF | #50D6FF | #5AE0FF | #6EE0FF | #6EEAFF | #78F3FF |
#1E90FF | #289AFF | #32A4FF | #3CAEFF | #46B8FF | #50C2FF | #5ACCFF | #64D6FF | #6EE0FF | #78EAFF |
#96A5FF | #A0AFFF | #AAB9FF | #B4C3FF | #BECDFF | #C8D7FF | #D2E1FF | #DCEBFF | #E8F5FF | #F4FFFF |
#86A5FF | #90AFFF | #9AB9FF | #A4C3FF | #AECDFF | #B8D7FF | #CCE1FF | #E0EBFF | #EBF5FF | #F9FFFF |
#6495ED | #6E9FED | #78A9ED | #82B3ED | #8CBDED | #96C7ED | #A0D1F7 | #AADBFF | #B4E5FF | #BEEFFF |
#0078FF | #0A82FF | #148CFF | #1E96FF | #28A0FF | #32AAFF | #3CB4FF | #46BEFF | #50C8FF | #5AD2FF |
#0064FF | #0A6EFF | #1478FF | #1E82FF | #288CFF | #3296FF | #3CA0FF | #46AAFF | #50B4FF | #5ABEFF |
#0000FF | #3232FF | #5050FF | #646EFF | #6478FF | #6482FF | #648CFF | #6496FF | #64A0FF | #64AAFF |
#4169E1 | #4B73E1 | #557DE1 | #5F87E1 | #6991E1 | #739BE1 | #7DA5E1 | #87AFEB | #91B9F5 | #9BC3FF |
#0064CD | #0A6ECD | #1478CD | #1E82CD | #288CD2 | #3296D7 | #3CA0E1 | #46AAEB | #50B4F5 | #5ABEF5 |
#5A5AFF | #6464FF | #6E6EFF | #7878FF | #8282FF | #8C8CFF | #A0A0FF | #B4B4FF | #C8C8FF | #D2D2FF |
#7B68EE | #8572EE | #8F7CEE | #9986EE | #A390EE | #AD9AEE | #B7A4EE | #C1AEEE | #CBB8EE | #D5C2EE |
#6A5ACD | #7E6ECD | #8878CD | #9282CD | #9C8CCD | #A696CD | #B0A0CD | #BAAAD7 | #C4B4E1 | #CEBEE1 |
#0000CD | #2828CD | #4646CD | #6464CD | #6E6ED7 | #7878E1 | #8282EB | #8C8CF5 | #9696FF | #A0A0FF |
#00008C | #14148C | #28288C | #3C3C8C | #50508C | #646496 | #7878AA | #8C8CBE | #A0A0C8 | #B4B4DC |
#483D8B | #52478B | #5C518B | #665B8B | #70658B | #7A6F95 | #84799F | #8E83A9 | #988DB3 | #A297BD |
#000069 | #1E3269 | #323C73 | #3C467D | #3C5087 | #3C5A91 | #46649B | #506EA5 | #5A78AF | #6482B9 |
#3DFF92 | #47FF9C | #51FFA6 | #5BFFB0 | #65FFBA | #6FFFC4 | #79FFCE | #75FFCA | #7AFFCF | #7FFFD4 |
#55EE94 | #5FEE9E | #69EEA8 | #73EEB2 | #7DEEBC | #87EEC6 | #91F8D0 | #9BFFDA | #A5FFE4 | #AFFFEE |
#66CDAA | #70D2B4 | #7AD7BE | #84DCC8 | #8EE1D2 | #98EBDC | #9DF0E1 | #A2F5E6 | #A7FAEB | #ACFFEF |
#AAEBAA | #B4F0B4 | #BEF5BE | #C8FAC8 | #D2FFD2 | #DCFFDC | #E1FFE1 | #E6FFE6 | #EBFFEB | #F0FFF0 |
#80E12A | #8AE634 | #94EB3E | #9EF048 | #A8F552 | #B2FA5C | #BCFF66 | #C1FF6B | #C6FF70 | #CBFF75 |
#52E252 | #5CE75C | #66EC66 | #70F170 | #7AF67A | #84FB84 | #89FB89 | #8EFB8E | #93FB93 | #98FB98 |
#64CD3C | #6ED746 | #78E150 | #82EB5A | #8CF064 | #96F56E | #9BFA73 | #A0FA78 | #A5FA7D | #AAFA82 |
#13C7A3 | #18CCA8 | #1DD1AD | #22D6B2 | #27DBB7 | #2CE0BC | #31E0C1 | #36E0C6 | #3BE0CB | #40E0D0 |
#46B4B4 | #50BEBE | #5AC8C8 | #64D2D2 | #6EDCDC | #73E1E1 | #78E6E6 | #7DEBEB | #82F0F0 | #87F5F5 |
#20B2AA | #2ABCB4 | #34C6BE | #3ED0C8 | #48DAD2 | #52E4DC | #57E9E1 | #5CEEE6 | #61F3EB | #66F8F0 |
#5F9EA0 | #69A8AA | #73B2B4 | #7DBCBE | #87C6C8 | #91D0D2 | #96D5D7 | #9BDADC | #A0DFE1 | #A5E3E6 |
#3CB371 | #46BD7B | #50C785 | #5AD18F | #64DB99 | #6EE5A3 | #73EAA8 | #78EFAD | #7DF4B2 | #82F9B7 |
#2E8B57 | #389561 | #429F6B | #4CA975 | #56B37F | #60BD89 | #65C28E | #6AC793 | #6FCC98 | #74D19D |
#228B22 | #2C952C | #369F36 | #40A940 | #4AB34A | #54BD54 | #5EC75E | #63CC63 | #68D168 | #6DD66D |
#497649 | #538053 | #5D8A5D | #679467 | #719E71 | #7BA87B | #80AD80 | #85B285 | #8AB78A | #8FBC8F |
#006400 | #0A6E0A | #147814 | #1E821E | #288C28 | #329632 | #3CA03C | #41A541 | #46AA46 | #4BAF4B |
#008C8C | #0A9696 | #14A0A0 | #1EAAAA | #28B4B4 | #32BEBE | #37C3C3 | #3CC8C8 | #41CDCD | #46D2D2 |
#008080 | #0A8A8A | #149494 | #1E9E9E | #28A8A8 | #32B2B2 | #37B7B7 | #3CBCBC | #41C1C1 | #46C6C6 |
#FFB6C1 | #FFBBC6 | #FFC0CB | #FFC5D0 | #FFCAD5 | #FFCFDA | #FFD4DF | #FFD9E4 | #FFDEE9 | #FFE3EE |
#FFAAAF | #FFB4B9 | #FFBEC3 | #FFC8CD | #FFD2D7 | #FFDCE1 | #FFE1E6 | #FFE6EB | #FFEBF0 | #FFF0F5 |
#FF9E9B | #FFA8A5 | #FFB2AF | #FFBCB9 | #FFC6C3 | #FFD0CD | #FFD5D2 | #FFDAD7 | #FFDFDC | #FFE4E1 |
#FF7A85 | #FF848F | #FF8E99 | #FF98A3 | #FFA2AD | #FFACB7 | #FFB1BC | #FFB6C1 | #FFBBC6 | #FFC0CB |
#FF5675 | #FF607F | #FF6A89 | #FF7493 | #FF7E9D | #FF88A7 | #FF92B1 | #FF9CBB | #FFA6C5 | #FFB0CF |
#FF82FF | #FF8CFF | #FF96FF | #FFA0FF | #FFAAFF | #FFB4FF | #FFBEFF | #FFC8FF | #FFD2FF | #FFDCFF |
#FF7DB4 | #FF87BE | #FF91C8 | #FF9BD2 | #FFA5DC | #FFAFE6 | #FFB4EB | #FFB9F0 | #FFBEF5 | #FFC3FA |
#FF69B4 | #FF73BE | #FF7DC8 | #FF87D2 | #FF91DC | #FF9BE6 | #FFA5F0 | #FFAAF5 | #FFAFFA | #FFB4FF |
#FF1493 | #FF1E9D | #FF28A7 | #FF32B1 | #FF3CBB | #FF46C5 | #FF50CF | #FF5AD9 | #FF64E3 | #FF6EED |
#DB7093 | #DB7A9D | #DB84A7 | #E08EB1 | #E598BB | #EAA2C5 | #EAB1D4 | #EFACCF | #F4BBDE | #F4B6D9 |
#D7567F | #DC6089 | #E16A93 | #E6749D | #EB7EA7 | #F088B1 | #F592BB | #FA9CC5 | #FFA6CF | #FFB0D9 |
#C71585 | #C71F8F | #C73399 | #C73DA3 | #CC47AD | #D151B7 | #D65BC1 | #E065CB | #EA6FD5 | #F479DF |
#CD1039 | #CD1F48 | #CD2E57 | #CD3861 | #CD426B | #D24C75 | #D7567F | #DC6089 | #E16A93 | #E6749D |
#B9062F | #B91A4D | #BE2457 | #C32E61 | #C8386B | #CD4275 | #D24C7F | #D75689 | #DC6093 | #E16A9D |
#FAEB78 | #FAF082 | #FAF58C | #FAFA96 | #FAFAA0 | #FAFAAA | #FAFAB4 | #FAFABE | #FAFAD2 | #FAFAD2 |
#FFDC3C | #FFE146 | #FFE650 | #FFEB5A | #FFF064 | #FFF56E | #FFFA78 | #FFFA82 | #FFFF8C | #FFFF96 |
#FFC81E | #FFD228 | #FFD732 | #FFDC3C | #FFE146 | #FFE650 | #FFEB5A | #FFF064 | #FFF56E | #FFF978 |
#FFB400 | #FFBE0A | #FFC314 | #FFC81E | #FFCD28 | #FFD232 | #FFD73C | #FFDC46 | #FFE150 | #FFE65A |
#FDCD8C | #FDD296 | #FDD7A0 | #FDDCAA | #FDE1B4 | #FDE6BE | #FDEBC8 | #FDF5D2 | #FDF5DC | #FDF5E6 |
#FAC87D | #FACD87 | #FAD291 | #FAD79B | #FADCA5 | #FAE1AF | #FAE6B9 | #FAEBC3 | #FAEBCD | #FAEBD7 |
#FFA500 | #FFAF0A | #FFB914 | #FFC31E | #FFCD28 | #FFD732 | #FFDC37 | #FFE13C | #FFE641 | #FFEB46 |
#FF9100 | #FF9B00 | #FFA500 | #FFAF00 | #FFB900 | #FFC300 | #FFC800 | #FFCD00 | #FFD200 | #FFD700 |
#FF8200 | #FF8C0A | #FF9614 | #FFA01E | #FFAA28 | #FFB432 | #FFB937 | #FFBE3C | #FFC341 | #FFC846 |
#FFA98F | #FFB399 | #FFBDA3 | #FFC7AD | #FFD1B7 | #FFDBC1 | #FFE0C6 | #FFE5CB | #FFEAD0 | #FFEFD5 |
#FFA374 | #FFAD7E | #FFB788 | #FFC192 | #FFCB9C | #FFD0A1 | #FFD5A6 | #FFDAAB | #FFDFB0 | #FFE4B5 |
#FF9473 | #FF9E7D | #FFA887 | #FFB291 | #FFBC9B | #FFC6A5 | #FFD0AF | #FFD0AF | #FFD5B4 | #FFDAB9 |
#FF7F50 | #FF895A | #FF9364 | #FF9D6E | #FFA778 | #FFB182 | #FFBB8C | #FFC091 | #FFC596 | #FFCA9B |
#CD853F | #CD8F49 | #D29953 | #D7A35D | #DCAD67 | #E1B771 | #E6C17B | #EBC680 | #F0CB85 | #F5D08A |
#D2691E | #D27328 | #D27D32 | #D7873C | #DC9146 | #E19B50 | #E6A55A | #EBAA5F | #EBAF64 | #F0B469 |
#AE5E1A | #B86824 | #C2722E | #CC7C38 | #D68642 | #E0904C | #E59551 | #EA9A56 | #EF9F5B | #F4A460 |
#8B4513 | #8B4F1D | #8B5927 | #8B6331 | #906D3B | #957745 | #9F814F | #A48654 | #A98B59 | #AE905E |
#FF9696 | #FFA0A0 | #FFAAAA | #FFB4B4 | #FFBEBE | #FFC8C8 | #FFD2D2 | #FFDCDC | #FFE6E6 | #FFF0F0 |
#F08080 | #F08A8A | #F09494 | #F59E9E | #FAA8A8 | #FAB2B2 | #FAB7B7 | #FABCBC | #FAC1C1 | #FAC6C6 |
#F56E6E | #F57878 | #F58282 | #F58C8C | #F59696 | #F5A0A0 | #F5AAAA | #FAB4B4 | #FABEBE | #FAC8C8 |
#F06464 | #F06E6E | #F07878 | #F08282 | #F08C8C | #F09696 | #F4A0A0 | #F4AAAA | #F4B4B4 | #FEBEBE |
#FF0000 | #FF3232 | #FF4646 | #FF5050 | #FF5A5A | #FF6464 | #FF6E6E | #FF7878 | #FF8282 | #FF8C8C |
#EB0000 | #EB3232 | #EB4646 | #EB5050 | #EB5A5A | #EB6464 | #F06E6E | #F57878 | #FA8282 | #FA8C8C |
#CD0000 | #CD3C3C | #CD4646 | #CD5050 | #D25A5A | #D76464 | #DC6E6E | #E17878 | #E68282 | #EB8C8C |
#CD5C5C | #CD6666 | #CD7070 | #CD7A7A | #D28484 | #D78E8E | #DC9898 | #E6A2A2 | #EBACAC | #F0B6B6 |
#B90000 | #B93232 | #B93C3C | #B94646 | #B95050 | #BE5A5A | #C35F5F | #C86464 | #CD6969 | #D26E6E |
#B22222 | #B24040 | #B24A4A | #B25454 | #B75E5E | #BC6868 | #C17272 | #CB7776 | #CB7C7C | #D08180 |
#A52A2A | #AA3E3E | #AF4848 | #B45252 | #BE5C5C | #C36666 | #CD7070 | #CD7A7A | #D28484 | #D78E8E |
#800000 | #803232 | #853C3C | #8F4646 | #945050 | #9E5A5A | #A36464 | #AD6E6E | #B77878 | #C18282 |
#CD853F | #CD8B45 | #CD904A | #D2954F | #D29A54 | #D79F59 | #D7A45E | #E1A963 | #E1AE68 | #E6B36D |
#DB631F | #E56D29 | #E57733 | #EA813D | #EF8B47 | #EF904C | #F49551 | #F49A56 | #F49F5B | #F4A460 |
#D2691E | #D27328 | #D77D32 | #D7873C | #DC9146 | #E19B50 | #E6A055 | #EBA55A | #F0AA5F | #F5AF64 |
#A0522D | #A05C37 | #A06641 | #A5704B | #AA7A55 | #B4845F | #B98E69 | #C39873 | #CDA27D | #D7AC87 |
#8B4513 | #8B4F1D | #8B5927 | #8B6331 | #906D3B | #9A7745 | #A4814F | #AE8B59 | #B89563 | #C29F6D |
#DA70D6 | #DF75DB | #E47AE0 | #E97FE5 | #EE84EA | #F389EF | #F88EF4 | #FD93F9 | #FF98FE | #FF9DFF |
#BA55D3 | #BF5AD8 | #C45FDD | #C964E2 | #CE69E7 | #D36EEC | #D873F1 | #DD78F6 | #E27DFB | #E782FF |
#9932CC | #9E37D1 | #A33CD6 | #A841DB | #AD46E0 | #B24BE5 | #B750EA | #BC55EF | #C15AF4 | #C65FF9 |
#9400D3 | #9905D8 | #9E0ADD | #A30FE2 | #A814E7 | #AD19EC | #B21EF1 | #B723F6 | #BC28FB | #C12DFF |
#942894 | #9E329E | #A83CA8 | #B246B2 | #BC50BC | #C65AC6 | #D064D0 | #DA6EDA | #E478E4 | #EE82EE |
#8c008c | #960a96 | #a014a0 | #aa1eaa | #b428b4 | #be32be | #c83cc8 | #d246d2 | #dc50dc | #e65ae6 |
#800080 | #8a0a8a | #941494 | #9e1e9e | #a828a8 | #b232b2 | #bc3cbc | #c646c6 | #d050d0 | #da5ada |
#834683 | #8d508d | #975a97 | #a164a1 | #ab6eab | #b578b5 | #bf82bf | #c98cc9 | #d396d3 | #dda0dd |
#828282 | #8c8c8c | #969696 | #a0a0a0 | #aaaaaa | #b4b4b4 | #bebebe | #c8c8c8 | #d2d2d2 | #dcdcdc |
#000000 | #282828 | #323232 | #3c3c3c | #464646 | #505050 | #5a5a5a | #646464 | #6e6e6e | #787878 |
사용방법은 아시죠^^
맘에 드는 색상 코드에 범위를 지정한 뒤 마우스 오른쪽 클릭후
복사 후 글자색이나 배경색에 붙여넣기(마우스오른쪽클릭이나 Ctrl+V) 하세요~
그럼 이쁘게 사용하세요
Color Name을 이용한 HTML 색상표 (0) | 2007.11.03 |
---|---|
Hex Code를 이용한 HTML 색상표 (0) | 2007.11.03 |
테이블 테두리 (0) | 2007.11.03 |
style 속성 (0) | 2007.11.03 |
css 테두리관련 스타일 (0) | 2007.11.03 |
Html 에서 CSS를 이용해서
Table 의 테두리선 굵기와 색, 지정
Hex Code를 이용한 HTML 색상표 (0) | 2007.11.03 |
---|---|
웹 색상표 (0) | 2007.11.03 |
style 속성 (0) | 2007.11.03 |
css 테두리관련 스타일 (0) | 2007.11.03 |
border-collapse: collapse (0) | 2007.11.03 |
<FONT 속성>
font : font에 관한 모든 속성들을 결정한다.
font-family : font family 이름 리스트 또는 generic 폰트. (cursive, fantasy 등)
font-style : Normal, italic, oblique 등
font-size : 절대크기(small, medium, large등)와 상대크기(larger, smaller등), 수(pt), 퍼센트(%)등을 사용.
font-weight : Normal, bold, lighter 또는 9개의 수(100, 200, 300, ... , 900)중 하나를 사용.
<HTML 속성>
color : 요소의 텍스트 색 또는 전경색을 결정한다. (#FFFFFF 또는 black)
background : 배경에 관한 모든 속성들을 결정한다.
background-color : 요소의 배경색을 결정한다.
background-image : 배경 이미지를 결정한다. (URL)
background-repeat : 이미지를 페이지의 수평과 수직으로 반복할 내용을 결정 (repeat-x:수평반복, repeat-y:수직반복, repeat:양쪽반복)
background-attachment : 페이지의 나머지 부분을 기준으로 요소의 행동을 결정한다. (scroll : 나머지 내용을 스크롤할 때 함께 스크롤한다. fixed : 스크롤하지 않는다.)
background-position : 요소의 배경 이미지를 지정한 뒤 이것을 사용해서 그 요소내 이미지의 시작 위치를 지정할 수 있다. top, center, bottom등을 조합하여 사용 가능하다.
<TEXT 속성>
word-spacing : 단어 사이의 거리를 늘리거나 줄인다.
letter-spacing : 문자간의 거리를 늘리거나 줄인다.
text-decoration : 요소 텍스트에 장식을 추가한다. (underline, overline, line-through, blink등 여러 개 동시 사용가능.)
text-transform : 텍스트를 변형시킨다. (capitalize:첫문자만 대문자로, uppercase, lowercase)
text-indent : 텍스트 라인의 들여 쓰기를 한다. (%, 길이)
text-align : 요소 내 텍스트를 정돈한다.(left, right, center, justify)
vertical-align : 요소의 수직 배치를 결정한다. (baseline, wub, super, top, text-top, middle,
bottom, text-bottom, 요소 높이의 퍼센트를 사용할 수 있다.)
line-height : 텍스트 라인의 baseline간 거리를 결정한다. (수, %)
<BOX 속성>
margin : 박스내 지정된 공간을 확보.
margin-top : 박스의 위에서부터의 공간을 확보. (수, %)
margin-right : 박스의 오른쪽부터의 공간을 확보. (수, %)
margin-left : 박스의 왼쪽부터의 공간을 확보. (수, %)
margin-bottom : 박스의 밑에서부터의 공간을 확보. (수, %)
padding : margin의 속성과 동일하다.
border : 박스의 모든 부분을 정의한다.
border-width : 박스의 경계의 두께를 결정한다.
border-top-width : 박스의 경계의 위 부분의 두께를 결정한다.
border-right-width : 박스의 경계의 오른쪽의 두께를 결정한다.
border-bottom-width : 박스의 경계의 밑 부분의 두께를 결정한다.
border-left-width : 박스의 경계의 왼쪽의 두께를 결정한다.
border-color : 박스의 경계의 색을 결정한다. (색이름 또는 코드)
border-style : 박스의 경계의 모양을 결정한다. (dotted, dashed, solid, double, groove, ridge, inset, outset, none)
border-left : 왼쪽 부분의 폭, 색, 스타일의 내용을 결정할 수 있다.
border-top : 위 부분의 폭, 색, 스타일의 내용을 결정할 수 있다.
border-right : 오른쪽 부분의 폭, 색, 스타일의 내용을 결정할 수 있다.
border-bottom : 아랫부분의 폭, 색, 스타일의 내용을 결정할 수 있다.
width : 박스의 내부 폭을 결정한다. (수, %)
height : 박스의 내부 높이를 결정한다. (수, %)
http://www.w3.org/tr/css21
웹 색상표 (0) | 2007.11.03 |
---|---|
테이블 테두리 (0) | 2007.11.03 |
css 테두리관련 스타일 (0) | 2007.11.03 |
border-collapse: collapse (0) | 2007.11.03 |
textarea (0) | 2007.11.03 |
테이블,이미지 테두리 스타일 ................................................. 테이블 태그나 이미지등 테두리선에 대한 스타일을 ! 특히 점선이나 한편을 다르게 표현하고자 할 때는 CSS를 사용할 수 있다. |
■ border-style |
border-style:none |
| |
border-style:dotted |
| |
border-style:dashed |
| |
border-style:solid |
| |
border-style:double |
| |
border-style:groove |
| |
border-style:ridge |
| |
border-style:inset |
| |
border-style:outset |
|
|
■ border-color |
border-color:#006699 border-style:dotted |
| |
border-color:tomato border-style:dashed |
| |
border-color:orange border-style:solid |
|
|
■ border-width |
border-width:1px border-color:#006699 border-style:dotted |
| ||
border-width:1px border-color:tomato border-style:dashed |
| ||
border-width:1px border-color:orange border-style:solid |
|
|
■ margin (바깥쪽 여백) |
margin:3px border-width:1px border-color:#006699 border-style:dotted |
|
|
■ width, height |
width=300 height=40 border-width:1px border-color:#006699 border-style:dotted |
|
■ padding (안쪽 여백) |
padding:5px width=300px border-width:1px border-color:#006699 border-style:dotted |
|
|
■ 이미지에 적용하기 |
border-style:dotted; border-color:orange; border-width:3px |
border-style:dashed; border-color:orange; border-width:3px |
border-style:outset; border-color:orange; border-width:3px |
테이블 테두리 (0) | 2007.11.03 |
---|---|
style 속성 (0) | 2007.11.03 |
border-collapse: collapse (0) | 2007.11.03 |
textarea (0) | 2007.11.03 |
스타일시트로 말줄임 표시 (0) | 2007.11.03 |
<table border="1" style="border-collapse: collapse" >
보더가 좀더 맘에 들게 보여진다..
가끔 개발자들이 html로 레이아웃을 잡을때가 있다.
폰트는 그렇다 하더라도.. 보더가 제일 투박하게 보인다..
- 미적용
test1 | test2 |
test3 | test4 |
- 적용
test1 | test2 |
test3 | test4 |
style 속성 (0) | 2007.11.03 |
---|---|
css 테두리관련 스타일 (0) | 2007.11.03 |
textarea (0) | 2007.11.03 |
스타일시트로 말줄임 표시 (0) | 2007.11.03 |
스타일 시트(Style Sheets) (0) | 2007.11.03 |
style="line-height:50px;height:70px;'
line-height : textarea 안의 라인들의 간격
height : textarea 자체 높이.
css 테두리관련 스타일 (0) | 2007.11.03 |
---|---|
border-collapse: collapse (0) | 2007.11.03 |
스타일시트로 말줄임 표시 (0) | 2007.11.03 |
스타일 시트(Style Sheets) (0) | 2007.11.03 |
word-spacing 과 letter-spacing (0) | 2007.11.03 |
<div STYLE='width:120;overflow:hidden;text-overflow:ellipsis'>
<NOBR>
<a href="./mentorListView.jsp?cmSeq=<%=cmSeq %>">
<%=common.cutStr(cmcTitle,15,"..") %>
</a>
</NOBR>
</div>
css 테두리관련 스타일 (0) | 2007.11.03 |
---|---|
border-collapse: collapse (0) | 2007.11.03 |
textarea (0) | 2007.11.03 |
스타일 시트(Style Sheets) (0) | 2007.11.03 |
word-spacing 과 letter-spacing (0) | 2007.11.03 |