html basic

Edit

Tag 분류

참고 자료

Doc type

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

공백문제

태그 관련 팁

이미지 반투명처리하기

<img src="그림주소" style="filter:alpha(opacity=100,style=2,finishopacity=0)">

재로딩시 페이지 안 깜빡이게

<META http-equiv="Page-Enter" content="blendTrans(Duration=0.0)">
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.0)">

HTML 샘플

<meta http-equiv="refresh" content="0;url= />

HTML Editor

참고도서

HTML5

WebSocket

LocalStorage

CSS

참고자료

CSS 포함 하기

html 내에

<style type="text:css"> </style>

별도의 파일로

<link href="/css/text.css" type="text/css" rel="stylesheet">

@import - 구버전의 웹브라우져에서는 인식 안 됨

CSS 유효성 검사기

선택자

여러개의 element 선택

h1, h2 { }

class 선택자

p.greentea { } /* class가 greentea인 <p/> 선택 */
.greentea{ } /* class가 greentea인 모든 태그 */

id 선택자

#footer { } /* id가 footer인 모든 태그 */
p#footer{}

자식(Child) element 선택

div h2{ color:red} /* <div/> 하위에 있는<h2/> 선택  */
.detail p {}   /* class가 "detail"로 지정되어 있는 하위의 <p/> 선택 */

상태에 따른 선택자

a:visited{}
a:link {}

상태는 active, hover, link, visited, first-child 등

의사(Psdudo) element 선택자

p:first-letter {}
p:first-line {}

속성(Attribute) 선택자

img[width] {border:black thin solid;} /* width 속성을 가진 모든 이미지 선택 */
img[height="300"] {border:red thin solid; } /* 값이 300인 height 속성을 가진 모든 이미지 선택 */
image[alt~="flowers"]  {border:red thin solid; }  /* "flowers"라는 단어를 포함하는 alt 속성을 가진 모든 이미지 */

형제(Sibling) element 선택자

h1+p {}  /* <h1> 다음에 오는 <p> 선택 */

선택자 결합

div#greentea > blockquote {}  /* <blockquote/>의 부모가 되어야하는 "greentea" id를 가진 <div/> 자손 선택자 */
div#greentea > blockquote p {} /* <blockquote/>의 자손이자 "greentea" id를 가진 <div/>의 자손인 <p/> 선택 */
div#greentea > blockquote p:first-line /* 그 <p/>의 첫 줄 */