Netscape 4 제외시키기
Netscape 4은 media속성값에 "screen"이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
이나
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />
라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio's hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.
p { /*/*/ color:white; /* */ }

Mac IE 4.5, Netscape 4 제외시키기
@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.
@import url("/css/style.css")

Mac IE 5 제외시키기
CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.
p { /* \*/ color:white; /* */ }

Win IE 4~5 제외시키기
셀렉터 바로 뒤에 /**/라고 적는다.
p/**/ { color:white;}

Win IE 4~5, Mac IE 4.5~5 제외시키기
프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.
p { color/* */:white;}

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기
셀렉터 앞에 html>body를 붙인다.
html>body p { color:white;}

Win IE 6 제외시키기
프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.
p { color /**/:white;}

star hack
셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.
*html p { color:white; }

underscore hack
프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
p { _color:white; }

hash hack
프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.
p { #color:white; }
 
star 7 hack
셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.
html*p { color:white; }

xmlns hack
속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
html[xmlns] h1 { color:red; }

:root hack
셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
:root h1 { color:red; }

Tantek box model hack

voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.
div#content { width:500px; voice-family: ""}""; voice-family:inherit; width:400px; }

Win IE 5용 패스필터
@media tty { i{content:"";/*" "*/}}; @import '/css/style.css'; {;}/*";} }/* */
Win IE 5.5용 패스필터
@media tty { i{content:"";/*" "*/}}@m; @import '/css/style.css';/*";} }/* */
Win IE 5-5.5용 패스필터
@media tty { i{content:"";/*" "*/}}@import '/css/style.css';/*";} }/* */
모던브라우저용 패스필터
@import "null?"{"; @import "/css/style.css"; @import "null?"}";

이 이외에도 많은 핵(hack)이 존재합니다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길 바랍니다.

2006년 7월 18일, IE7용의 핵(hack)을 추가.
IE7에만 적용
*+html body

IE7를 포함한 모든 IE에만 적용하는 방법은
*+html body, * html body

IE7을 포함한 모던브라우저에 적용(IE6이하를 제외)
html>body

IE7을 제외한 모던브라우저에만 적용
html>/**/body
<select name="language">
    <optgroup label="선택하세요" style="color:orange"></optgroup>
    <optgroup label="Web" style="color:green">
        <option>ASP</option>
        <option>PHP</option>
        <option>JSP</option>
    </optgroup>
    <optgroup label="Window" style="color:blue">
        <option>VB</option>
        <option>C++</option>
        <option>JAVA</option>
    </optgroup>
</select>







출처: [http]Creating different CSS style selector
[http]css-design-concerns-for-ie6-ie7-and-firefox

IE7 의 렌더링 방식이 IE6과 다르다.
CSS testing of Selector and Pseudo selectors 를 보면 IE7 은 FF 에 더 가까와 지고 있다.
그래서 바야흐로 브라우저 3개를 켜고 코딩을 해야하는 시대가 온 것이다.

이를 해결하기 위한 방법 중 하나는 Selector Hack 을 이용하는 것이다.

.context_bar_form_field
{
height: 15px; // 모든 브라우저
#height: 15px; // IE 전용
_height: 21px; // IE6.0 과 이전버젼용
}
우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 해준다.
다음에 IE6 을 열고 수정하면서 _ 를 접두어로 붙여 새로 재설정 한다. IE7 은 '-' 가 붙은 것을 무시한다.
 
또 다른 방법은,
.title h3 {height: 21px; }
.title > h3 {height: auto; min-height: 21px; }

이렇게 하는 방법도 있다. 맨 아래줄은 파이어폭스와 IE7만 적용된다.

한가지 주의할 점은

body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}
속성 키워드 자체가 다른 것이 많다. 주의 할 것!
위에서 처럼 속성값 자체가 다른 경우가 있다. 그러니 안된다고 hack 만 쳐다보고 있으면 밤세야 한다.

내가 보기에 가장 좋은 방법은 Conditional Comments 를 사용하는 것이다.
복잡하게 한 파일에 구질구질 작성하지 말고 파일을 분리해 버리는 것이다.

참고 :http://webborg.blogspot.com/2007/01/css-compatibility-ie6-ie7-firefox-and.html

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iehacks.css">
<![endif]-->
<body>
  <div class="watermark">....</div>...

이렇게 분리해서 각개격파하는 것이 좋을 듯 싶다.

참고글
w3cschools.com 브라우저 접속률
CSS Hacks

onClick

onClick은 객체를 클릭했을때 이벤트를 발생합니다.

즉, onClick를 사용한곳에 마우스로 클릭을 해야만 이벤트가 실행되고


onmouseup

이것은 클릭 이벤트와는 조금 다릅니다.

객체를 마우스로 눌렀다가 놓을때 이벤트가 발생하는데

클릭이벤트와 유사하지만 객체에 포커스가

있는 상태에서 마우스 오른쪽 왼쪽 구분이없이 눌렀다 놓으면 이벤트가 발생합니다.


onmousedown

마우스로 누르는 순간 이벤트가 발생합니다.

즉, onmouseup은 마우스를 눌렀나 놓을때이고 onmousedown은 마우스를 누를때 발생합니다.

이것 또한 마우스 오른쪽 왼쪽 구분없이 객체에 포커스가 있는 상태에서 마우스를

누르면 양쪽 모두에서 이벤트 발생합니다.


onkeydown  /onKeyUp

키보드를 조작하므로써 이벤트를 발생하는데요

onkeydown은 키보드의 키를 누를때 이벤트를 발생시킵니다.


즉, 키를 눌렀다 놓을때가 아닌 키를 눌렀을때 이벤트를 발생하느데 바로

그 순간에만 이벤트를 처리하고(키를 누르고 있더라도 한번만 발생)

onkeyup은 키보드의 키를 뗄때 이벤트를 발생시킵니다.



onkeypress

는 위에 onkeydown과 비슷하지만 키를 누르고 있더라도 한번만 이벤트를 발생하는 것이

아니라 누르고 있는 순간에도 계속해서 이벤트를 반복 수행 합니다.

예를 들어 텍스트 박스에 글을 쓸때 동일키를 계속해서 눌러야할경우가 있을때

onkeypress를 사용했다면 키를 누르고 있는동안 이벤트가 반복되어 짜증이 나겠지요!!

* 스크립트 목적
  - 기존의 셀렉트박스를 스타일의 적용이 가능한 레이어 형태(실제로는 테이블과 Popup Object)로 자동 변환

* 주요 기능 및 특징
  - 기존 셀렉트박스 태그의 수정 없이 스타일 시트에 정의하는 것만으로 모든 셀렉트박스 변환 가능
  - 셀렉트박스를 기준으로 아래위의 여백을 비교하여 옵션 항목 창의 출력 방향 결정
  - 기존 셀렉트박스처럼 변환된 셀렉트박스도 포커스를 가질 수 있음
    <script>document.getElementById('SelectBox_Name').focus();</script>
  - 변환된 셀렉트박스가 포커스를 가지고 있을 경우 휠을 움직이거나 키보드의 Home, End, Page Up, Page Down,
    Up Arrow, Down Arrow 등을 누름에 따라 값의 변경이 가능
    또한 열려진 옵션 항목 창에서도 가능함
  - 위의 이벤트 시에 문서의 스크롤을 제어하여 문서의 움직임이 없음
  - 아이프레임 및 프레임에 삽입된 상황에서도 프레임에 영향을 받지 않고 정상적으로 출력
    (Layer가 아닌 Popup Object를 이용)
  - 셀렉트박스의 항목이 동적으로 변경할 경우를 위한 메소드 제공
    <script>document.getElementById("SelectBox_Name").reInitializeSelectBox();</script>
  - 옵션 항목 창에 출력될 항목의 갯수를 지정(setDisplayCount() 메소드 이용)할 수 있으며 항목이 출력될
    갯수보다 많을 경우 자동으로 스크롤바 생성 (기본값은 10)
  - 셀렉트박스 및 옵션 항목에 대해 툴팁 메세지 설정 가능
  - 특정 셀렉트박스의 색상 및 화살표 이미지 변경 가능
  - 변환된 레이어를 텍스트처럼 취급 (연속적인 출력이 가능, 하단 여백 없음)
  - HTC 가 지원되는 브라우져에서만 변환 (HTC는 5.0 이상에서 가능하나 createPopup() 메소드가 5.5부터
    지원되어 IE 5.5 이상에서만 변환)
  - 옵션 항목 창 출력시 일시적으로 문서가 길어져 스크롤바가 출력되는 일이 없음

* 사용 방법
  - 스타일시트에 미리 정의하는 방법
  <style>select{ behavior: url('./selectBox.htc');}<style>
  - 특정 SelectBox 폼필드에만 적용하는 방법
  <select style="behavior: url('./selectBox.htc');"></select>


* 셀렉트박스 포커스 처리
  - 일반적인 SelectBox와 동일하게 처리 -> <script> document.getElementById('selectbox').focus();</script>
  - 셀렉트박스가 포커스를 가진 상황에서 휠을 움직이거나 Home, End, Page Up, Page Down,
    Up Arrow, Down Arrow 등의 키를 누르면 포커스를 가진 셀렉트박스의 값을 변경 함
  - 동적 처리 ->

<body onLoad="document.getElementById('selectbox_focus').focus();">
1번 항목

* 셀렉트박스 동적 변경 처리
  - 셀렉트박스의 항목을 동적으로 변경할 경우 reInitializeSelectBox() 메소드를 이용하여 재변환 가능
  - 셀렉트박스의 항목을 동적으로 추가 및 삭제할 경우 변환된 셀렉트박스를 제거 후 다시 변환함
    <script>document.getElementById("SelectBox_Name").reInitializeSelectBox();</script>

<script>
function addItem(selected_index){
  var objSB = document.getElementById("selectbox_dc_1");
  for(i=0; i<10; i++){
    objNewOption = new Option();
    objNewOption.text = "추가된 "+i+"번째 항목";
    objSB.add(objNewOption,objSB.length);
  }
  if(selected_index) objSB.selectedIndex = selected_index;
  objSB.reInitializeSelectBox();
}
</script>

1번 항목

<script>
function changeItem(selected_index){
  var objSB = document.getElementById("selectbox_dc_2");
  for(i=0; i<10; i++){
    objSB.add = new Option("변경된 "+i+"번째 항목",i);
  }
  if(selected_index) objSB.selectedIndex = selected_index;
  objSB.reInitializeSelectBox();
}
</script>
1번 항목

* 색상 및 화살표 이미지 설정
  setColor="일반폰트색상,일반배경색상,롤오버폰트색상,롤오버배경색상,일반보더색상,롤오버보더색상"
  setImage="./arrow_image.gif" (14*16 이하 사이즈)
<select> (기본형)
1번 항목
<select setColor="#000000,#FFFFFF,#000000,#E6E4E4,#C0C0C0,#000000">
1번 항목
<select setColor="white,red,black,white,blue,yellow">
1번 항목
<select setImage="./arrow_image2.gif">
1번 항목
setColor와 setImage 동시 적용
1번 항목

* 툴팁 메세지 설정
  - 셀렉트박스 및 옵션 항목에 툴팁 메세지를 설정하는 것이 가능 함
  - 셀렉트박스 태그 및 옵션 항목 태그에 tooltip="툴팁 메세지" 와 같이 프로퍼티 추가

    <select name='selectbox_tooltip' tooltip='필수 항목이니 꼭 선택하세요'>
     <option value='1' tooltip='첫번째 항목'>1번 항목</option>
     <option value='2' tooltip='두번째 항목'>2번 항목</option>
     <option value='3' tooltip='세번째 항목'>3번 항목</option>
     <option value='4' tooltip='네번째 항목'>4번 항목</option>
     <option value='5' tooltip='다섯번째 항목'>5번 항목</option>
    </select>
1번 항목

* 최대 출력 갯수 설정
  - 옵션 항목 창에 출력될 항목의 갯수를 설정 가능
  - setDisplayCount="출력될 갯수" 를 이용하여 설정

<select name="selectbox_count_1" setDisplayCount="5">
1번 항목
<select name="selectbox_count_2" setDisplayCount="10">
1번 항목
<select name="selectbox_count_3" setDisplayCount="15">
1번 항목

* SelectBox의 넓이 설정
  - style="width:200px" 와 같이 설정 가능
  - 별도의 넓이 설정이 없을 경우에는 변환 전의 셀렉트박스의 넓이 값(this.style.offsetWidth)으로 설정 함
    (offsetWidth 값을 못 읽을 경우 이전 버전에서 사용하던 문자열의 넓이를 픽셀로 구하는 함수 이용)

<select style="width:200px" >
스타일을 200px로 설정함
자동 설정 ( 옵션 내용이 한글만 )
옵션 텍스트가 한글만 있을 경우
자동 설정 ( 옵션 내용이 영문만 )
This option text is english...
자동 설정 ( 옵션 내용이 한글 + 영문 + 숫자 )
한글 + English + 1234567890

* 테이블 안에서의 정렬
  - 테이블 안에서 셀의 정렬에 따라 자동 적용

왼쪽 정렬
왼쪽 정렬
중앙 정렬
중앙 정렬
오른쪽 정렬
오른쪽 정렬

* onChange 이벤트 처리
  - 일반적인 SelectBox와 동일하게 처리

<select onChange="alert('선택값 : '+this.options[this.selectedIndex].value)">
1번 항목
<select onChange="location.href=this.options[this.selectedIndex].value;">
:: 검색 사이트로 이동 ::

* 스크롤바 및 레이어 위치 테스트
  - 셀렉트박스의 문서에서의 위치에 따라 옵션 항목 창을 위로 보여주거나 아래로 보여줌.
  - 또한 한쪽으로 모두 못 보여줄 경우에는 자동으로 스크롤바가 생성됨.
  - 기본적으로는 셀렉트박스를 기준으로 아래위의 공간을 비교하여 더 넓은 공간쪽으로 옵션 항목 창이 출력되나
    공간이 10개 항목이 나올 정도의 높이(204px)가 되면 아래로 나옴
  - 단, 하단 여백이 204px보다 적을 경우에도 하던 여백과 항목의 갯수에 비례해 공간이 될 경우에는 아래로 출력됨
  - 문서를 스크롤하여 아래의 셀렉트박스를 기준으로 아래위의 공간을 조절한 후 셀렉트박스를 클릭하면 알 수 있음

테스트용 1 (항목이 2개)
1번 항목
테스트용 2 (항목이 5개)
1번 항목
테스트용 3 (항목이 10개)
1번 항목
테스트용 4 (항목이 15개)
1번 항목
테스트용 5 (항목이 100개)
1번 항목

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2007.12.22
onClick // onmouseup // onmousedown // onkeydown / onKeyUp // onkeypress  (0) 2007.12.05
XHTML이란?  (0) 2007.11.03
HTML 4.01 DTD  (0) 2007.11.03
META태그란?  (0) 2007.11.03
1) 모든 엘리먼트들은 반드시 완벽하게 중첩되어야 합니다.
일반 HTML문서라면 <b><i>테스트</b></i> 처럼 쓰더라도 아무 문제가 없습니다만, XHTML 문서는 반드시 <b><i>테스트</i></b>처럼 중첩구조가 완벽해야합니다. HTML에서는 가끔 닫는 태그를 빼먹어도 별 문제없이 동작하지만, XHTML에서는 </xxx>처럼 닫는 태그들을 반드시 사용해야 합니다. 특히 <p>태그를 사용할 때라든가, 문서 마지막에 </html>쓰는 것 같을 때 주의해야겠지요.


2)모든 태그와 속성들은 소문자를 사용합니다.
<DIV NAME="xxx"> 처럼 쓰면 안되고 반드시 <div name="xxx">처럼 써야합니다. 물론 대문자로 쓰더라도 해석은 됩니다만 어플리케이션 호환성을 위해 반드시 소문자로 쓰는 습관을 들입시다.


3)홀로 쓰이는 단독 태그들도 반드시 닫겨야 합니다.
Empty Element라고 불리우는 단독 태그들 - br, hr, img 등등... - 은 쌍으로 열리고 닫기지 않는데 어떻게 하냐구요... <br />, <hr />, <img src="xxx" />처럼 써야합니다. /앞의 공백은 붙여주시는 쪽을 권장합니다.


4)속성값을 줄 때에는 반드시 겹따옴표로 묶어줍니다.
즉, <table width=100>은 틀린 XHTML 문법이며, <table width="100"> 처럼 써야만 합니다.


5)단축형 속성값은 쓸 수 없습니다.
즉 <option selected> 대신 <option selected="selected">처럼 써야만 합니다.


6) name 속성대신 id 속성을 사용합니다.
<input name="password" /> 대신 <input id="password" />처럼 사용합니다. name과 id의 가장 큰 차이점은 하나의 문서내에서 동일한 name값을 가지는 엘리먼트들이 있어도 상관없지만, id값은 같은 문서에서 동일한 id값을 가질 수 없습니다.
조금 다른 이야기지만 JavaScript에서 문서내의 객체에 접근할 때, 이런 엘리먼트의 name을 바로 오브젝트나 프로퍼티처럼 쓰는 경우가 있는데, 잘못된 습관입니다. (IE가 나쁜 버릇은 전부 들이게 만든다는... -_-a) 예를 들어 password.value 처럼 쓰는 것은 옳지 않습니다. 이럴 경우에는 getElementsByName이나 getElementById 같은 메쏘드를 써서 해당 오브젝트를 반환받아 써야합니다. 즉, getElementById('password').value 처럼 쓰는 것이 옳습니다.


당분간은 옛날 브라우저와의 호환을 위해 id와 name을 동시에 쓰는 쪽을 권장합니다.


7)lang 속성의 사용
만약 문서내에 특정 언어로 쓰여진 부분이 있다면, lang 속성을 이용해 언어를 구분해줍니다.
<div lang="no" xml:lang="no">Heia Norge!</div>
노르웨이어로 쓰여진 부분이라면 이런 식으로 처리한다는 예입니다.


8)<!DOCTYPE>의 사용.
실제로 이 <!DOCTYPE>은 XHTML 문법에는 포함되지 않습니다. 이것은 해석기나 브라우저로 하여금 이후 이어지는 문서가 XHTML이며 어떤 DTD(Document Type Definition)에 의해 해석되어야하는 지를 지정해주는데 이용됩니다. 통상 Strict, Transitional, Frameset의 세 종류가 있으며, Strict는 엄격한 XHTML문법을 따르고 CSS와 같이 이용될 때 쓰입니다. Transitional은 틀린 XHTML 문법이 있어도 HTML문법에 준해서 오류를 허용할 때 쓰입니다. Frameset은 말그대로 HTML의 frame을 이용할 때 쓰입니다. 각각의 경우에 대해 아래의 내용을 문서의 가장 첫줄에 적어주시면 됩니다. (기왕 XHTML을 만드는 것, 되도록이면 Strict를 쓰도록 합시다.)

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에서도 삭제되었죠. ^_^)

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">


참고: http://www.htmlhelp.com/tools/validator/doctype.html

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

드롭다운 메뉴 변환 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태그의 이름을 입력하는 부분
② : META태그의 값을 입력하는 부분

 

 

META태그의 여러기법

 

◈ 한글 폰트로 페이지 나타내기
<★META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=euc-kr">

웹 페이지를 기본적으로 한글 폰트로 인코딩할 때 사용됩니다. 홈페이지를 만들때 우리가 자주 사용하는 태그에서 글자체를 돋움으로 지정해도 브라우저에서 한글속성을 인식못해 아무 반응도 나타나지 않는 경우가 있는데 이 경우 사용합니다. 그리고 자바애플릿 실행시 한글이 깨져 나올때도 이 태그를 사용하여 해결하기도 합니다. 만약 깨지지 않을 경우 이 태그 사용시 반대의 결과가 발생하기도 합니다.

◈ 검색엔진 키워드 검색에서 내 사이트 맨 위에 뜨게 하기
<★META HTTP-EQUIV="keywords" CONTENT="홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지">

검색엔진에서 키워드 검색을 해보면 출력되는 자료가 수없이 많습니다. 그 중에서 상위 리스트에 출력이 된다면 아마도 여러분의 홈페이지에 방문자수가 약간 늘어 날 것입니다. 그래서 위와 같은 태그를 홈페이지내에 삽입하면 "홈페이지"라는 키워드로 검색을 하면 일치도가 100%가 되어 리스트의 상위에 위치하게 됩니다. 홈페이지 홍보를 위한 좋은 방법이라고 생각이 됩니다.

◈ 일정 시간 경과 후 자동으로 다음 페이지 로딩하기
<★META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.ibm.com">

자신의 홈페이지가 다른 곳으로 이동해 방문자가 이전의 홈페이지에 방문했을때 자동으로 바뀐 주소로 이동하게 하거나 첫 화면에 회사 로고를 몇 초 보여준 후 회사 메인 홈페이지로 들어가게 하거나 여러 장의 웹 문서를 슬라이드 효과를 나타내는 데 이용되는 태그 입니다. 위의 태그의 경우 5초후 IBM(http://www.ibm.com)사의 홈페이로 이동한다는 뜻 입니다.

◈ TRANS META 태그 효과
<★META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans (Duration=3, Transition=23)">

메타태그는 페이지를 나갈때나 들어올때 여러가지 효과로 페이지를 나타나게 하는 Trans Meta 태그입니다. 이 메타태그는 넷스케이프에서는 지원을 하지 않고 프레임을 가진 문서에도 지원을 하지 않는 단점이 있습니다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

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">

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

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의 경우도 마찬가지이긴 합니다.)


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>페이지 제목</title>
</head>

... 이하 생략 ...

컴퓨터를 사용하면서 종종 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모음)

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

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
클라이언트가 서버에게 자원을 요청할 때 자원의 위치는 일반적으로 URL을 사용해서 나타낸다. 그러나 Altavista와 같은 검색엔진을 검색한 결과와 같이 동적으로 생성된 정보는 URL로 표현할 수 없다. 따라서 동적문서를 요청하는 경우, URL과 사용자 질의를 합쳐서 URI(Uniform Resource Identifier)로 표시한다.
URL과 URI의 분명한 구별은 힘들지만 일반적으로 URL은 자원의 위치만을 나타내는 반면 URI는 자원의 위치에 전달될 인자까지 포함한다는 점에서 차이가 있다. 즉, URL은 URI의 특수한 형태로 볼 수 있다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

유니코드 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 태그가 있다.
웹문서에서 TABLE 태그는 내용물 전체의 배치를 위한 뼈대를 제공하고,
내용물을 직접 나타내기도 하며, 이미지와 더불어 디자인의 중요한 한 요소를 차지하고 있다.

웹문서 제작에 있어 많은 시간을 들이는 부분이기도 하고 문서내 태그중에 대부분을 차지하기도 한다.

실제 서비스되는 웹문서에서 모든 내용물은 테이블 속에 담겨져 있다고 가정하면 된다.



table 태그는 표의 시작과 끝을 정의하고
tr 태그는 표의 행을 정의하며
td 태그는 행을 이루는 열을 정의한다.

따라서 위의 태그들은 홀로 사용될 수 없고
<td> ~</td> 가 모여 <tr> ~ </tr> 을 구성하고
<tr> ~ </tr> 가 모여 </table>~</table> 을 이루게 된다.


가장 간단한 표라도 다음과 같이 한줄 한칸 짜리 표로 이루어지며 표에 들어갈 내용은 <td> ~</td> 사이에만 들어갈 수 있다.

<table>          
  <tr>       한줄
    <td>   한칸
      * 표 속에 들어갈 내용은 여기!!!
    </td>  
  </tr>      
</table>          



■ table ,tr, td 공통 속성

width table ,tr, td 넓이
height table ,tr, td 높이
bgcolor table ,tr, td 바탕색
background table ,tr, td 배경이미지
align table ,tr, td 수평정렬
valign
table ,tr, td 수직



■ table~ /table 에만 있는 속성

border 테이블 경계선 두께
bordercolor 테이블 경계선 색상
bordercolorlight 테이블 경계선 색상의 밝은 부분
bordercolordark 테이블 경계선 색상의 어두운 부분
cellpadding 열(셀) 내부에서의 내용물이 경계선으로부터 떨어져야 할 여백
cellspacing
각 열(셀) 들간에 떨어져야 할 여백



■ td ~ /td * Table Data, 열

colspan 칸을 열로 합치기
rowspan 칸을 행으로 합치기

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

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[]

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

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://막혀있는 주소

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

[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
Gleb Lebedev 라는 사람이 아주 재미난 실험을 해서 소개 한다.
그는 간단한 페이지를 통해(구글메인같은) 자바스크립트의 성능테스트 를 하고 싶어했다.
그리고 그 결과를 오페라9, 파이어폭스 1.5, 익스플로러 6 에서 비교했다.

테스트는 이렇다.
그는 구글 메인페이지전체(라고해봐야 몇줄 안되지만..)를 innerHTML 속성과 document.createElement를 이용해 생성하는 함수를 짰다.(소스 )
그리고 그걸 1초동안 반복해서 실행한다.
결국 초당 구글 메인페이지를 몇번이나 만들어 낼수 있느냐를 테스트 한거다.

사용자 삽입 이미지
 

이미지 출처 : http://ajaxian.com/archives/benchmark-dom-vs-innerhtml


결과가 아주 놀랍다.
오페가 9.01 는 innerHTML로 돌리리때 1초에 1320번이라는 경의적인 수치를 보여준다!
요즘 한참 잘나가는 불여우에 비해서도 3배가 넘는 수치다.
자바스크립트처리 성능만 놓고 볼때는 왜 오페라가 3브라우저중 밀리는지 이해불가다.
IE6은 초라하기 그지 없다. 더군다나 32비트, 64비트 버전이 별만 차이가 없다. (IE 7.0이 출시 됬으니 따로 한번 해봐야겠다. ^^)

브라우저별 성능은 이쯤하고..

중요한건 DOM과 innerHTML과의 비교다.
createElementinnerHTML은 모든 브라우저가 가각 3배 가까이 차이가 난다.
왜 이렇게 차이나 나는 것일까?
createElement는 W3C에서 정한 HTML DOM을 다루는 표준방식이며 HTML의 요소를 객체로 접근도록 해서 프로그램을 좀더 프로그램답게 무언가 '짜고 있다는' 느낌이 들게 하는 반면,  innerHTML은 HTML을 몽창 문자열로 넘겨서 무언가를 '쓰고 있다는'느낌들 들게하는데  말이다.
하지만 이건 조금만 생각해보면 당연한 결과다.
위의 소스를 보면 알겠지만, innerHTML은 이 속성을 한번 호출하는 것으로 끝나지만,
createElement는 그렇지 않다. 개별 HTML 요소를 모두 생성하여 해당 style과 property 값을 넣어주어야 하고, 그걸 형태에 맞게 append를 시켜야 한다.
위의 구글 메인을 만들어내는데 createElement는 자그마치 69번이나 호출된다.
느린게 당연한거다.

결국 용도에 맞게 쓰는것이 중요하단 무미건조한 결론을 내릴 수 밖에 없다.
이런 테스트가 별 근거없이 개발자가 자신의 기호에 따라 한쪽에 편향하기 보다, 성능과 객체 컨트롤의 용의함을 잘 저울질 해서 적절히 쓸 수 있었으면 좋겠다.

p.s. Ajaxian 에 가서 Comment를 보면 사람들이 자신의 PC에서 테스트 한 다양한 결과를 볼 수 있다. ^^

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

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자리만 입력가능

rel="stylesheet"이란 것은 css와 연동되어 사용되는 소스입니다.

태그안에 href 속성을 추가한 후 웹 서버의 스타일 시트의 위치를 지정해 줘야 합니다.

또한 태그에 type="text/css" 속성과 rel="stylesheet" 속성을 추가시켜야 합니다.

예전에 euc-kr을 사용하여 만든 홈페이지가 있었는데..

html내부에 매타 태그에 있는 iocharset을 바꾸어도.. 인코딩이 항상 UTF-8 고정 되어서 변경할 수 없었다.

원인이 뭔가 알아 봤더니..

아파치에 설정이 Default Charset이 지정되어 있었다..

/ect/httpd/conf/httpd.conf
파일은 열면 다음과 같은 부분을 찾을 수 있다.

#
# Specify a default charset for all content served; this enables
# interpretation of all content as UTF-8 by default.  To use the
# default browser choice (ISO-8859-1), or to allow the META tags
# in HTML content to override this choice, comment out this
# directive:
#
AddDefaultCharset UTF-8


이 부분에서 AddDefaultCharset이 설정되어 있으면 HTML내부의 선택을 무시하고 항상 웹브라우져에서 항상 해당 인코딩으로 설정된다. 만약 페이지에 있는 메타 태그에 따라 인코딩 설정을 바꾸고 싶다면 위 한줄을 주석 처리 하면 된다.
태그 총 정리(태그 사전)

전체적으로 태그의 유형을 정리해 보았습니다. 어느 정도 부분적인 태그에 자신이 있으시면 대충 한 번만 보셔도 알 수 있을 겁니다. 보다 자세한 것은 따로 떼어서 알기 쉽게 정리해 놓았습니다. 태그의 사전처럼 이용하셔도 될 듯.

태그의 기본

태그 입력 형태

내용 설명

<HTML> </HTML>

웹 브라우져에게 현재 전송받은 문서가 HTML 문서라는 것을 알려주는 태그
HTML 문서의 맨 처음과 끝에 시작 태그와 종료 태그를 각각 쓴다.

<HEAD> </HEAD>

HTML 문서의 머리말 구조를 나타내는 태그로 문서에 직접적인 영향을 주지는 않지만, HTML 문서 자체에 대한 여러가지 정보를 가진다.

<TITLE> </TITLE>

브라우져 상단의 타이틀 바에 나타낼 HTML 문서의 제목을 정한다.
머리말부분(<HEAD></HEAD>사이)에서만 사용되는 태그.

<!DOCTYPE>

이 태그가 사용된 문서가 기초한 HTML 언어의 버전을 설명할 때 사용.
독립태그이며 머리말 부분에서만 사용된다.

<LINK>



스타일시트 파일을 불러오는 등 현재 문서와 다른 문서와의 관계를 설정할 때 사용. 독립 태그이며 머리말 부분에서만 사용된다.

HREF="이동하려는 파일 또는 URL"
TITLE="제목"
REL="옵션"

<!--   -->

HTML 문서에 주석(설명 등..)을 포함시킬 때 사용하는 태그로써 문서에는 아무런 변화를 주지 않는다. (단 스크립트 등은 예외)

<BODY> </BODY>







HTML 문서의 본문의 시작과 끝을 알린다.

BACKGROUND="파일명 또는 배경이미지가 있는곳의 URL" → 문서의 배경그림을 정한다.
BGCOLOR="#RGB값 또는 색상명" → 문서의 배경색을 정한다.
LINK="#RGB값 또는 색상명" → 링크로 연결된 텍스트의 색을 정한다. 기본색 파랑.
TEXT="#RGB값 또는 색상명" → 문서의 기본 글자색을 정한다. 기본색 검정.
ALINK="#RGB값 또는 색상명" → 링크로 연결된 부분을 클릭할때의 색을 정한다. 기본색 빨강.
VLINK="#RGB값" 또는 "색상명" → 방문했던 링크의 색을 정한다. 기본색 보라.
LEFTMARGIN="n" → 화면 외쪽 여백을 정한다.
RIGHTMARGIN="n" → 화면 오른쪽 여백을 정한다.
TOPMARGIN="n" → 화면 상단 여백을 정한다.
BOTTOMMARGIN="n" → 화면 아래의 여백을 정한다.
STYLE=" " → 특정모양을 정한다.
BGPROPERTIES → 화면을 스크롤할 때 배경그림이 함께 스크롤되지 않게 한다.



문단 , 선 등의 관련 태그

<H1~6> </H1~6>



제목 문자열을 지정하는 태그로 H1 이 가장 작고 H6 이 가장 크다. (기본값 4)
제목이기 때문에 독립된 줄에 나타난다. (<BR>태그를 사용한 것과 같음)

ALIGN="LEFT | CENTER | RIGHT"

문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.

<BR>


HTML 문서에 줄 바꿈 효과를 주는 독립 태그.

CLEAR="LEFT | RIGHT | ALL"  이미지 왼쪽, 오른쪽, 양쪽에 여백이 생길 때..

<NOBR> </NOBR>

문장이 긴 경우 브라우져가 자동으로 다음 줄에 표시해 주는 것을 막을 때 사용

<P> </P> 또는 <P>



빈 줄을 하나 삽입하고 다시 줄을 바꿔서 다음의 문자열을 표시.
이것은 <BR> 태그를 두번 사용한 것과 동일하다.

ALIGN="LEFT | CENTER | RIGHT"

문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.

<CENTER> </CENTER>

문단을 가운데로 정렬해 주는 태그
<P ALIGN="CENTER"></P> 등을 여러 번 쓸 필요 없이 <CENTER>태그를 사용하여 한번에 여러 문단을 가운데 정렬시킬 수 있다.

<PRE> </PRE>

PREformat의 약자로 이 태그의 사이에 있는 문자열들은 여백, 줄간격 등이 보이는대로 출력된다.

<XMP> </XMP>

이 태그는 <PRE> </PRE> 와 유사하지만 태그 까지도 그대로 화면에 나타내 준다.

<DIV> </DIV>



단락 편집 태그로 각 문단 사이에 빈 줄을 추가되지 않는 것을 제외하고는 <P>태그의 기능과 동일.

ALIGN="LEFT | CENTER | RIGHT"  

문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.

<HR>



가로 선(수평선)을 표시하는 독립 태그.

ALIGN="LEFT | CENTER | RIGHT" → 선을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
WIDTH="n" → 선의 길이를 픽셀이나 % 단위로 정한다.
SIZE="n" → 선의 두께를 포인트로 정한다.
NOSHADE → 선에 입체감을 없앤다. (테두리가 없어지고 검게 채워진다.)




 

글 꼴에 관련된 태그

<MARQUEE> </MARQUEE>






자바를 사용하지 않고 화면에 스크롤되는 문자열을 표시할 때 사용한다.

ALIGN="LEFT | CENTER | RIGHT" → 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
BEHAVIOR="옵션"
HEIGHT="픽셀 값 또는 비율 값" → 문자열 가로 범위
WIDTH="픽셀 값 또는 비율 값" → 문자열 세로 범위
BGCOLOR="#RGB값 또는 색 이름" → 배경색
DIRECTION="옵션" → 이동 방향
LOOP="값" → 반복횟수
SCROLLAMOUNT="픽셀 수" → 한번에 스크롤되는 시간
SCROLLDELAY="밀리초" → 스크롤 지연 시간
HSPACE="픽셀값" → 스크롤 문자열 가로 좌표
VSPACE="픽셀값" → 스크롤 문자열 세로 좌표

<FONT> </FONT>



문자열의 크기, 글꼴과 색등을 지정한다.

COLOR="#RGB값 또는 색 이름" → 글자 색을 정한다.
SIZE="글자크기" → 글자크기를 정한다. (기본크기 3)
FACE="글자 체" → 글자 체를 정한다.

<BASEFONT> </BASEFONT>



기본 텍스트의 글꼴 크기를 정하는 독립 태그.

COLOR="#RGB값 또는 색 이름" → 글자 색을 정한다.
SIZE="글자크기" → 글자크기를 정한다. (기본크기 3)
NAME="글꼴" → 글꼴을 정한다.

<B> </B>

태그에 포함된 문자열을 굵은 글자로 만들어준다.

<I> </I>

태그에 포함된 문자열을 이탤릭체로 만드는 태그.

<U> </U>

태그로 포함된 문자열에 밑줄을 넣을 때 사용되는 태그.

<S> </S>

태그에 포함된 문자열의 중간에 선을 그어 삭제 표시를 할 때 사용한다.

<BLINK> </BLINK>

태그에 포함된 문자열을 깜빡이게 하여 눈에 쉽게 띄도록 할 때 사용한다.




 

목록 작성 시 사용하는 태그

<UL> </UL>


Unordered List의 약자로 각 목록을 볼릿 기호를 사용하여 나열할 때 사용한다.

TYPE="옵션" → 아래 <LI> 태그의 옵션과 같다.

<OL> </OL>


Ordered List의 약자로 순차적인 목록을 작성할 때 사용한다

START="시작번호"
TYPE="옵션" → <LI> 태그의 옵션과 같다.

<LI>





<UL>태그, <OL>태그, <DIR>태그, <MENU>태그 등의 사이에 들어가서 목록을 만드는 독립 태그.

VALUE="n" → 설정된 숫자 부터 시작
TYPE="a" → 소문자 a부터 시작
TYPE="I" → 그리스 대문자 I부터 시작
TYPE="i" → 그리스 소문자 i부터 시작
TYPE="1" → 숫자 1부터 시작
TYPE="CIRCLE" → 검은 원 표시
TYPE="DISK" → 흰 원 표시
TYPE="SQUARE" → 검은 사각형 표시

<DL> </DL>

Definition List의 약자로 단어 또는 용어를 설명할 때 사용한다.

COMPACT

<DT>

Definition iTem의 약자로 정의 목록을 나타낸다.
<DL> 태그 안에서만 사용되는 독립태그이다.

<DD>

정의 내용을 서술한다.
<DL> 태그 안에서만 사용되는 독립 태그.

<DIR> </DIR>

하나의 문자열이 20자 이하인 경우, 작은 목록을 만들 때 사용한다.

<MENU> </MENU>

문장을 열거




 

이미지에 관련된 태그

<IMG>







HTML 문서에서 이미지를 포함시킬 때 사용하는 독립 태그이다.

SRC="경로를 포함한 이미지 파일명" → 불러올 이미지파일의 위치와 이름을 지정한다.
LOWSRC="작은 이미지 파일의 경로 및 이름" → 불러올 이미지가 클 경우 큰 이미지가
    완전히 로드될 때까지 작은 이미지를 먼저 나타내서 화면상의 공백을 없앤다.
ALIGN="LEFT | CENTER | RIGHT" → 그림을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
VALIGN="TOP | MIDDLE | BOTTOM" → 그림을 위, 가운데, 아래로 각각 정렬한다.
HSPACE="픽셀값" → 그림의 좌우여백을 정한다.
VSPAVE="픽셀값" → 그림의 상하여백을 정한다.
BORDER="픽셀값" → 그림 테두리의 두께를 정한다.
HEIGHT="픽셀값" → 그림의 가로길이를 정한다.
WIDTH="픽셀값" → 그림의 세로길이를 정한다.
ALT="문자열" → 그림에 마우스를 댔을때 나오는 설명문자열을 정한다.
UseMap="#이미지맵 이름" → <MAP NAME="이미지맵 이름">태그에서 정한 이름을 불러온다.

<MAP> </MAP>


이미지맵의 시작과 끝을 나타낸다.

NAME="이미지맵 이름" → 이미지맵의 이름을 정한다.

<AREA>





<MAP> 태그 안에 들어가서 이미지를 나누는 독립태그이다.

SHAPE="RECT | CIRCLE | POLYGON" → 선택부분의 모양을 정한다. (사각형, 원형, 다각형)
SHAPE="DEFAULT" → 지정 영역 외의 부분을 클릭한 경우
COORDS="n,n,n" → 선택부분의 위치를 정한다.
HREF="링크경로명" → 선택영역 또는 영역외의 부분을 클릭했을때 연결할 문서등을 정한다.
NOHREF → 링크연결하지 않음을 나타낸다.
TARGET="창이름" → 연결 문서등을 나타낼 창의 이름을 정한다.
ALT="문자열" → 그림에 마우스를 댔을때 나오는 설명문자열을 정한다.




 

링크 관련 태그

<A> </A>







이미지, 문서, 사운드 등 여러 객체를 문서 내에 연결시킬 때 사용.
문서의 특정한 위치 또는 다른 문서로 이동하거나 다른 파일에 연결하는 역할을 한다.

HREF="이동하고자 하는 문서 또는 주소" → 특정 문서를 열거나 특정 주소로 이동
HREF="파일이름#이동하고자 하는 위치이름" → 특정 HTML문서의 특정 위치로 이동
HREF="MailTo:ID@주소" → E-Mail 바로 기재 후 보내기.
NAME="위치의 이름" → 현재위치를 지정한 후 나중에
    <A href="파일이름#위치이름">문자열</A> 로 연결하여 지정한 위치로 이동하게 한다.
TITLE="설명문자열" ==> 마우스를 대었을 때 나오는 설명 문자열을 정한다.
TARGET="_BLANK" ==> 새로운 창으로 열기
TARGET="_PARENT" ==> 상위문서 창으로 열기
TARGET="_SELF" ==> 현재의 창으로 열기 (기본 값)
TARGET="_TOP" ==> 새로운 창으로 열기 (Flame 없어짐)
TARGET="이름" ==> 자기가 설정한 창으로 열기
HREF SRC=" " ==> 소리파일 연결
REL="관계옵션"
NODE
PATH




 

테이블 관련 태그

<TABLE> </TABLE>





표의 시작과 끝을 알리고 각종 속성을 정한다.

BORDER="n" → 표의 테두리 굵기 (픽셀이나 % 단위로 지정할 수 있다.)
WIDTH="n" → 표의 가로크기 (픽셀이나 % 단위로 지정할 수 있다.)
HEIGHT="n" → 표의 세로 크기 (픽셀이나 % 단위로 지정할 수 있다.)
CELLSPACING="n" → 표 안의 셀 사이의 간격. (기본 값 2)
CELLPADDING="n" → 표의 내용과 테두리 사이의 간격. (기본 값 1)
BACKGROUND="파일명" → 표의 배경그림 넣기
BGCOLOR="#RGB값 또는 색상 명" → 표 배경색
RULES=" " → 구획 선

<TR> </TR>




표의 한 수평 열을 정한다. <TABLE>태그 안에 들어 가야한다.

BGCOLOR="#RGB값 또는 색상명" → 표 배경색
ALIGN="LEFT | CENTER | RIGHT" → 표 안의 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
VALIGN="TOP | MIDDLE | BOTTOM" → 표 안의 문자열을 위, 가운데, 아래로 각각 정렬한다.

<TH> </TH>




표 머릿 말. <TR>태그 안에 들어 가야한다.

WIDTH="n" → 셀의 가로크기 (픽셀이나 % 단위로 지정할 수 있다.)
HEIGHT="n" → 셀의 세로 크기 (픽셀이나 % 단위로 지정할 수 있다.)
BGCOLOR="#RGB값 또는 색상 명" → 표 배경색
ALIGN="LEFT | CENTER | RIGHT" → 표 안의 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
VALIGN="TOP | MIDDLE | BOTTOM" → 표 안의 문자열을 위, 가운데, 아래로 각각 정렬한다

<TD> </TD>





표의 하나하나의 셀. <TR>태그 안에 들어 가야한다.

WIDTH="n" → 셀의 가로크기 (픽셀이나 % 단위로 지정할 수 있다.)
HEIGHT="n" → 셀의 세로 크기 (픽셀이나 % 단위로 지정할 수 있다.)
COLSPAN="n" → 셀 열을 n개 만큼 합친다.
ROWSPAN="n" → 셀 행을 n개 만큼 합친다.
BGCOLOR="#RGB값 또는 색상 명" → 표 배경색
ALIGN="LEFT | CENTER | RIGHT" → 표 안의 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
VALIGN="TOP | MIDDLE | BOTTOM" → 표 안의 문자열을 위, 가운데, 아래로 각각 정렬한다.

<CAPTION> </CAPTION>



표의 제목 행을 정한다. <TABLE>태그 안에 들어 가야한다.

ALIGN="LEFT | CENTER | RIGHT" → 표 안의 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
VALIGN="TOP | MIDDLE | BOTTOM" → 표 안의 문자열을 위, 가운데, 아래로 각각 정렬한다.




 

프레임 관련 태그

<FRAMESET> </FRAMESET>





창틀 기본 설정

ROWS="n,n,n,n..." → 상하 크기 나누기 (픽셀이나 % 단위 또는 *로 지정할 수 있다.)
COLS="n,n,n,n..." → 좌우 크기 나누기 (픽셀이나 % 단위 또는 *로 지정할 수 있다.)
BORDER="n" → 창틀 두께 크기
FRAMEBORDER="yes | no" → 창틀 테두리 유무
FRAMESPACING="n" → 창틀 내부 간격
NORESIZE → 브라우져가 프레임 크기를 변경하는 것을 금지
BORDERCOLOR="색상 값" → 경계선의 색을 설정한다. (넷스케이프에서)

<FRAME>





<FRAMESET> 에서 정한 각각의 창을 설정하는 독립태그

SRC="파일 경로 및 이름" → 각각의 창에 연결될 HTML 파일 경로 및 이름
NAME=" " → 창의 이름 설정. 나중에 TARGET 속성으로 링크연결할 때 사용
MARGINWIDTH="n" → 창에 들어갈 넓이 여백
MARGINHEIGHT="n" → 창에 들어갈 높이 여백
SCROLING="YES | NO | AUTO" → 스크롤 바(bar) 선택, 무시, 자동. (기본 값은 자동)
NORESIZE → 창틀 크기 고정

<NOFRAMES> </NOFRAMES>

프레임을 지원하지 않는 브라우져에서 나타낼 내용 표시




 

폼(FORM) 관련 태그

<FORM> </FORM>





양식의 시작과 끝을 나타내며 각종 속성을 정의한다.

NAME="이름" → 폼의 이름
METHOD="POST | GET" → 양식의 처리 방법
ACTION=" " → 양식의 내용을 처리할 CGI Script 등을 지정
ENC TYPE=" " → 양식 내용 형태
TARGET="_BLANK" → 새로운 창으로 열기
TARGET="_PARENT" → 상위문서 창으로 열기
TARGET="_SELF" → 현재의 창으로 열기 (기본 값)
TARGET="_TOP" → 새로운 창으로 열기 (Flame 없어짐)
TARGET="이름" → 자기가 설정한 창으로 이동

<TEXTAREA> </TEXTAREA>



<FORM> 태그 안에서 텍스트 영역을 만든다.

NAME="이름" → 텍스트 상자의 이름
WRAP="OFF | PHYSICAL | VIRTUAL" → 열을 자동으로 바꿀지 설정한다. (워드랩)
COLS="n" → 가로 크기
ROWS="n" → 세로 크기

<INPUT>







<FORM> 태그 안에 들어가서 각종 폼을 구성하는 독립 태그.

NAME="이름" → 폼 구성의 이름을 정한다. 반드시 필요.
VALUE="값" → 각각의 값을 정한다.
TYPE="TEXT" → 텍스트 박스 작성
  SIZE="n" → 텍스트박스의 길이
  MAXLENGTH="n" → 텍스트박스의 입력가능 최대문자수 지정
TYPE="PASSWORD" → 비밀번호 입력 상자 작성. TEXT 와 같으나 입력문자가 * 로 표시된다.
TYPE="IMAGE" → 그림보기
TYPE="HIDDEN" → 숨기기
TYPE="RADIO" → 라디오 버튼(여러 사항 중에 하나만 체크되는 것) 작성
TYPE="CHECKBOX" → 체크박스(여러 개를 선택할 수 있는 것) 작성
TYPE="SUBMIT" → 제출 버튼 작성 (스크립트가 실행됨)
TYPE="RESET" → 취소 버튼 작성 (폼이 초기화됨)
CHECKED → 미리 체크되어있는 항목 표시

<SELECT> </SELECT>


<FORM> 태그 안에서 메뉴나 스크롤 형태의 선택 상자를 만든다.

NAME=" " → 폼 구성의 이름을 정한다.
SIZE="n" → 리스트에 들어가는 선택메뉴 갯수

<OPTION>



<SELECT> 태그 안에 들어가서 각각의 선택사항을 정하는 독립 태그.

VALUE=" " → 각각의 값을 정한다.
SELECTED → 옵션 중 선택되어져 있는 항목을 정한다. 정하지 않으면 처음 것이 기본이 된다.


== 방법 ① ==========================================================

<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


공부하실때 실제 영어 단어로 읽어가며 하시면 더욱더 편하답니다.

<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...

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%이상 자동으로 해결됩니다. 따로 떼어놓고 생각할 수 있는 문제가 아닙니다.

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 태그]오브젝트 엘리먼트(Object element) HTML 태그 문서에 멀티미디어 삽입

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>


관련강좌

HTML 고급강좌

테이블을 이용한 레이아웃(Layout)

CSS를 이용한 레이아웃(Layout)으로의 전환

메타(Meta) 태그

이미지맵(image map)

점선 테이블1


리얼 비디오 삽입

<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>

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

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을 이용한 HTML 색상표 입니다.

관련강좌

HTML 기본 강좌

줄바꾸는 기능을 하는 p태그와 br태그

표제(Heading)

HTML문서를 구성하는 기본태그

텍스트 관련 태그

링크(Link)


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  

Hex Code를 이용한 HTML 색상표입니다.

관련강좌

HTML 기본 강좌

줄바꾸는 기능을 하는 p태그와 br태그

표제(Heading)

HTML문서를 구성하는 기본태그

텍스트 관련 태그

링크(Link)


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

※ 원하는 색깔을 드래그해서 복사하십시오.
#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) 하세요~

 

그럼 이쁘게 사용하세요

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

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
테두리선 굵기와 색, 지정



사용자 삽입 이미지

사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

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

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

웹 색상표  (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

+ Recent posts