카테고리 글 보관함: HTML/CSS

HTML/CSS

Meta tag

댓글 달기

Meta tag는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의 하는데 사용

1) meta tag 종류, 기능, 설명

태그 값 설명
<meta name=”robots” content=”ALL”>
모두 수집 : ALL (기본값)
검색 봇의 검색 허용
모두 수집불가 :NONE
본문서 : 수집가능(index), 수집불가(noindex)
링크문서 : 수집가능(follow), 수집불가(nofollow)
예)본문서 수집불가/링크문서 수집가능 “noindex,follow”
<meta name=”googlebot” content=”noarchive”>
NOARCHIVE (구글이 페이지 저장을 하지 못하도록함)
Google참조
구글 검색 봇
<meta name=”keywords” content=””>
any value
검색어 ( ‘,’ 를 단어 사이에 넣어 나열 )
<meta name=”subject” content=””>
any value
주제 혹은 제목
<meta name=”description” content=””>
any value
설명문
<meta name=”author” content=””>
any value
만든사람
<meta name=”writer” content=””>
any value
제작자
<meta name=”copyright” content=””>
any value
저작권
<meta name=”reply-to” content= “”>
메일주소
메일주소
<meta name=”Imagetoolbar” content= “”>
no
이미지 툴바
<meta name=”content-language” content=”kr”>
ISO 639 문자코드 참조
문서의 언어를 지정 쉼표로 구분(예: en,fr)
<meta http-equiv=”Content-Type” content=”text/html; charset=euc-kr”>
Mime-Type 참조, charset 참조
문서의 타입(Mime-Type), 문서의 언어를 설정
<meta name=”build” content=”2006. 07. 06″>
GMT(UMT), RFC 1123 format
갱신일 (갱실 할때마다 검색 봇이 재 수집)
<meta name=”Last-Modified” content=”Mon,20 Jul 2007 19:30:30″>
GMT(UMT), RFC 1123 format
최종 수정일
<meta http-equiv=”Cache-Control” content=”No-Cache”>
Public(공개된 Cache사용)
Private(개인적인 Cache사용)
no-Cache(캐쉬 사용안함)
no-Store(캐쉬 사용하지만 저장되지 않는다.)
http 버전 1.1에서 지원
(no-Cache의 경우 캐쉬를 사용하지 않기때문에 매번 접속시 데이터를 내려받아서 속도는 느리지만 반영이 빠름)
<meta http-equiv=”Pragma” content=”No-Cache”>
http 버전 1.0에서 지원
<http-equiv=”expires” content=”Mon, 22 Jul 2002 11:12:01 GMT”>
GMT(UMT), RFC 1123 format
Cache 만료일 설정
HTML/CSS

x(HTML)

댓글 달기

1) XHTML 과 HTML차이점

구분 XHTML HTML
종료태그
종료태그 필수
빈 element
<br />
비어있지 않은 element
<ul>
<li>  내용</li>
</ul>
종료태그 불필요
빈 element
<br>
비어있지 않은 element
<ul>
<li> 내용
</ul>
작성 문자
Element, Attribute 반드시 소문자
(value 제외)
대소문자 무관
(대소문자 값의 인식은 서버 환경에 따라 다를 수 있음)
Well-formed
준수
<span><strong>내용</strong></span>
제약 없음
<span><strong>내용</span></strong>
속성 값
모든 값은 항상 쌍(홀)따움표(“) 안에 들어가야 한다.
제한 없음
Minimization
속성최소화(minimization) 지원 불가
<input  readonly = “readonly” /> (O)
<input readonly  /> (X)
사용 가능
<input  readonly = “readonly”> (O)
<input readonly> (O)
PCDATA
스크립트와 스타일 엘레멘트들은 #PCDATA 내용을 갖고 선언
예)<과 &는 “마크업의 시작”으로 처리, <과 &와 같은 글자(entities)들은 각각 <과 &의 “글자(entity) 참조”attribute 값이 ‘&’를 포함하면, 이는 글자 참조(character entity reference)로 표현되어야 한다(예:”&”).
예를 들어, a element의 href attribute 가 parameter들를 받는 CGI script를 참조하면,
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user로 하지 말고,
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user로 기술하여야 한다.
제약 없음
Language
lang과 xml:lang attribute들을 둘 다 사용
xml:lang attribute 값 이 우선한다.
제약 없음

2) xhtml lang Attribute 선언

해당언어의 검색 결과 및 음성장치(정확한 음성출력)에 활용된다.

ISO 639-1은 languages에 대한 abbreviations (약어)를 정의한다. HTML 과 XHTML에서 lang 과 xml:lang attributes에 사용될 수 있다.

 2-1. 각 국가별 language code

language iso code
  abkhazian ab
  afar aa
  afrikaans af
  albanian sq
  amharic am
  arabic ar
  armenian hy
  assamese as
  aymara ay
  azerbaijani az
  bashkir ba
  basque eu
  bengali (bangla) bn
  bhutani dz
  bihari bh
  bislama bi
  breton br
  bulgarian bg
  burmese my
  byelorussian (belarusian) be
  cambodian km
  catalan ca
  cherokee
  chewa
  chinese (simplified) zh
  chinese (traditional) zh
  corsican co
  croatian hr
  czech cs
  danish da
  divehi
  dutch nl
  edo
  english en
  esperanto eo
  estonian et
  faeroese fo
  farsi fa
  fiji fj
  finnish fi
  flemish
  french fr
  frisian fy
  fulfulde
  galician gl
  gaelic (scottish) gd
  gaelic (manx) gv
  georgian ka
  german de
  greek el
  greenlandic kl
  guarani gn
  gujarati gu
  hausa ha
  hawaiian
  hebrew he, iw
  hindi hi
  hungarian hu
  ibibio
  icelandic is
  igbo
  indonesian id, in
  interlingua ia
  interlingue ie
  inuktitut iu
  inupiak ik
  irish ga
  italian it
  japanese ja
  javanese jv
  kannada kn
  kanuri
  kashmiri ks
  kazakh kk
  kinyarwanda (ruanda) rw
  kirghiz ky
  kirundi (rundi) rn
  konkani
  korean ko
  kurdish ku
  laothian lo
  latin la
  latvian (lettish) lv
  limburgish ( limburger) li
  lingala ln
  lithuanian lt
  macedonian mk
  malagasy mg
  malay ms
  malayalam ml
  
  maltese mt
  maori mi
  marathi mr
  moldavian mo
  mongolian mn
  nauru na
  nepali ne
  norwegian no
  occitan oc
  oriya or
  oromo (afan,galla) om
  papiamentu
  pashto (pushto) ps
  polish pl
  portuguese pt
  punjabi pa
  quechua qu
  rhaeto-romance rm
  romanian ro
  russian ru
  sami (lappish)
HTML/CSS

Reset CSS

4 댓글

1. Reset CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/* reset CSS
---------------------------------------------------------------- */
	html, body {
		margin:0; padding:0; 
		font-family:Arial, "굴림", Gulim,"돋움", Dotum; 
		font-size: 12px; 
		color:#000; 
		height: 100%;
	}
	dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,tbody,tfoot,thead,th,td {
		margin:0; padding:0;
	}
	input,textarea,select,td,th {
		font-size: 12px;
	}
	table { 
		border-spacing: 0; border-collapse: collapse;
	}
	ol,ul ,li { 
		list-style: none; 
	}
	h1,h2,h3,h4,h5,h6 { 
		font-size: 100%; 
	}
	abbr,acronym { 
		border:0; 
	}
	hr,legend, caption{
		position:absolute;top:0;left:-3000px;
		visibility:hidden;overflow:hidden;
		line-height: 0.1%;
		font-size: 0.1%;
		width:0.1%;height:0.1%;
	}
	img, fieldset{border:0 none;}
	label{cursor:pointer;}
 
	a{color:#000;text-decoration:none;}
	a:link,a:visited{color:#686868;text-decoration:none;}
	a:hover{text-decoration:none;}
	a:active{text-decoration:none;}

 (본 리셋은 최소의 버전으로 제작한 것입니다. 본인에 맞게 추가 하셔서 사용하시기 바랍니다. 개성적인 reset보다는 여러명이 사용해도 문제 없는 리셋을 제작하셔야합니다.
마이그레이션이나 특수한 목적으로 페이지를 삽입하였을때  reset으로 인하여 깨지는 경우가 생기면 후임자가 더 힘들어질수 있으니깐요)

2) 제작 목적

브라우저별로 엔진이 다르기 때문에 페이지 랜더링도 다르게 표현이 된다. 다르게 표현되는 padding과 margin등을 초기화 시켜 크로스 브라우징을 쉽게 한다.

3) 제작시 주의 사항

1. 리셋이 필요 없는 요소는 리셋을 적용하지 마라

다음은 Eric Meyer’s CSS와 yahoo에서 제공되는 CSS이다 붉은색 부분을 참조하라

Eric Meyer’shtml, body, div, span, applet, object, iframe, table, caption, tbody,tfoot,thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; }
기타등등 -_-;;

yahoo

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }

위의 reset은 padding과 margin이 존재 하지 않은 녀석들은 리셋을 할필요 없는데 Eric Meyer’s의 같은경우에는 * {padding: 0; margin: 0; } 과 다를게 없고 오히려 * {margin: 0; paddnig:0;} 이 글자수가 적어서 용량면에서 더 좋을지 모른다.

2. 재 리셋을 하게 하지말라

th, dt, hn 태그의 디자인이 bold형태가 많을 경우 reset css를 제작 할 때 font-weight: normal; 의 선언을 피해야한다. 그 이유는 reset선언 보다 font-weight: bold; 의 선언이 더 많아 질수있기 때문이다.
hn 태그에 css를 설정할경우

수정전
h1 { width: 200px; height: 100px; background: url(‘aa.gif’) 0 0 no-repeat; padding: 20px 10px; font-weight: bold;}
h1.title01 { width: 100px; background: none; padding: 10px; font-weight: normal; }
h1.title02 { width: auto !important; height: auto !important; background: url(‘bb.gif’) 0 0 no-repeat; padding: 10px; font-weight: normal; }
수정후
.h1_title01 { width: 200px; height: 100px; background: url(‘aa.gif’) 0 0 no-repeat; padding: 20px 10px; font-weight: bold;}
.h1_title02 { width: 100px; height: 100px; padding: 10px; }
.h1_title03 { background: url(‘bb.gif’) 0 0 no-repeat; padding: 10px; }

input 태그에 css를 설정할경우

수정전
input {border: 1px solid #ddd; width: 100px; height: 20px; padding: 2px 5px 0; }
.input_radio, input_checkbox{ width: 13px; height: 13px; border: 0; padding: 0; }
수정후
.input_text {border: 1px solid #ddd; width: 100px; height: 20px; padding: 2px 5px 0; }
.input_radio, input_checkbox{width: 13px; height: 13px; }
HTML/CSS

DTD(Document Type Definition)

10 댓글

 

1. DTD(Document Type Definition) 선언

DTD (Document Type Definition)는 SGML (Standard Generalized Markup Language) 계열 마크업 언어의 문서 타입을 정의

– HTML –

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01 엄격한 모드다.
프레임과 링크타겟은 허용되지 않는다. 그리고 다음 요소도 사용할수 없다.
Element Style : basefont, center, font, s, strikr, u
Element : applet, dir, isindex, menu
HTML 4.01 Strict는 Mac용 Explorer 5이상 네스케이프 6과 같은 최신 브라우저에서 사용이 가능하다.
이 브라우저 이전의 버전은 쿽스 모드로 랜더링을 한다.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
HTML 4의 모든 요소를 포함한다. 권장하지 않는 요소의 사용은 가능하나 frame은 사용할수 없다.
HTML 4.01 Strict는 Mac용 Explorer 5이상 네스케이프 6과 같은 최신 브라우저에서 사용이 가능하다.
쿽스 모드로 랜더링을 원할경우 URI를 생략하면 된다.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
HTML 4.01프레임셋으로 HTML 4.01 Transitional 과 유사하면서 frame을 사용가능할 수 있다.

– XHTML –

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
HTML 4.01 Strict와 같이 허용되지 않은 요소는 사용할수 없는 HTML 4의 XML버전의 문서이다.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
HTML 4의 모든 요소를 포함한다. 권장하지 않는 요소의 사용은 가능하나 frame은 사용할수 없다. HTML 4의 XML버전의 문서이다.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
HTML 4.01 Transitional 과 유사하면서 frame을 사용가능할 수 있다. HTML 4의 XML버전의 문서이다.

1) 사용 목적

– 브라우저마다 각기 다른 엔진을 가지고 있기 때문에 Cross browsing이 잘되지 않는다. 하지만 DTD를 선언하여 CSS코드를 작성하면 모든 브라우저에 동일한 표현효과를 줄 수 있다. 그리고 문서에 대한 정보를 내장하고 있기 때문에 표준형태의 문서에는 필수로 규정하고 있다.

 

2) 담겨진 정보

  • – 문서 버전
  • – 문서 기술 규칙
  • – 사용할 수 있는 속성
  • – 허용되는 속성 값
  • – 문서에서 사용되는 문자 코드 세트 지정

 

3) DTD 동작 및 선언 규칙

브라우저는 선언된 doctype에 따라 렌더링할 모드를 선택게 되는데 이 과정을 Doctype Sniffing(또는 Doctype Wwitching)이라고 하며 브라우저가 출력하고자 하는 문서가 최신이라고 판단을 하면 표준모드(Standard Mode)로 렌더링을 한다. 만약 브라우저가 예전 문서라고 판단을 하면 쿽스모드(Quirks Mode)로 렌더링을 한다.

Doctype sniffing은 MIME타입이 text/html인 문서에서만 적용이 되고 application/xhtml+xml을 포함한 XML MIME타입의 스펙은 자동적으로 표준모드로 동작하게 된다.

HTML과 XHTML에서 DTD에 대한 레퍼런스는 “PUBLIC”문자열과 Formal Public Idendtifier(FPI), Formal System Identifier(FSI) 순으로 기술이 된다. 이때 FSI는 Optional이며 DTD에 대한 URL이 됨.

 

다음은 FPI와 FSI 모두를 포함하는 doctype선언 예

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3c.org/TR/html4/strict.dtd”>

다음은 FPI에 대한 예

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

Doctype sniffing은 doctype선언에 이들 중 어떤 것이 기술되어 있느냐를 감지해내는 것이다. 만약 FPI가 기술되어 있고 FSI가 기술되어 있지 않다면 브라우저는 일반적으로 쿽스모드를 선택한다. 왜냐하면 예전에는 doctype선언할 때 일반적으로 사용된 방법이었기 때문이다. 또한 브라우저는 doctype선언부분 까지 기술되지 않았을 경우 또는 기술되더라도 doctype의 문법이 틀렸을 경우에도 쿽스모드를 선택한다.

 

4) 주의

IE6는 Doctype선언이 문서에서 첫 번째 줄에 존재하는 것으로 가정하고 Doctype Sniffing을 수행한다. 그로 인하여 DTD는 문서 제일 상단에 위치 하여야 하고 DTD문서 이전에는 어떤 문구도 작성하여서는 안 된다. (여백 무시)

FSI 기술되어있지 않으면 Quirks mode로 랜더링 된다.

다음은 Quirks Mode 랜더링 되는 예이다

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” >
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

 

5) Standards Mode vs Quicks mode

http://www.w3.org/International/articles/serving-xhtml/Overview.en.php#quirks