주요사이트 정리
- character entity 문자 속성 참조 사이트 : http://www.w3schools.com/tags/ref_entities.asp
유니코드 사이트 : http://www.unicode.org/charts - 도메인 찾는 사이트 : http://www.internic.net
- 모질라 개발 사이트 : https://developer.mozilla.org/ko/
- HTML 페이지 유효성 검사 사이트 공식(영문) : http://validator.w3.org
- HTML 페이지 유효성 검사 사이트 공식(한글) : http://validator.kldp.org/
- CSS 유효성 검사 사이트 공식 : http://jigsaw.w3.org/css-validator/
- charset 관련 사이트 : http://www.w3.org/international/O-charset.html
- HTML -> XHTML 으로 변환하는 도구 tidy 관련 도구 사이트 : http://tidy.sourceforge.net
- web color 사이트 : http://en.wikipedia.org/wiki/Web_colors
약어 정리
- HTML : HyperText Markup Language
- CSS : Cascading Style Sheet
- HTTP : HyperText Transfer Protocol
- URL : Uniform Resource Locators
- PNG : Portable Network Graphics
주요 반복 구문
- style 태그 구문 : <head> 태그 하위에 추가
<style type=”text/css”> ...내용</style> - css 파일 외부 링크 : <head> 태그 하위에 추가
<link type=”text/css” rel=”stylesheet” href=”$url”/> - css link 속성 중 media 값 항목 :
- screen : 컴퓨터 화면
- print : 프린터 출력용 화면
- handheld : 모바일 장치 와 휴대전화
- tty : 텔레타이프와 터미널
- tv : 텔레비젼
- voice : 스피치 브라우저
- projection : 슬라이드
주요 문자 속성
- > : >
- < : <
- & : &
주요 HTML Tag
- <html> : 최상위
- <title> : 페이지 제목
- <head> : 머릿말
- <body> : 내용
- <h1> ~ <h6> : 제목1 - 제목6 , 블록 head
- <p> : 문단 , 인라인 , paragraph
- <style> : css 관련
- <img> : 이미지를 표시하는 태그,빈태그 src=”url” , image,인라인
- <em> : 강조 , emphasize,인라인
- <a> : 링크, anchor (닻,앵커),인라인
- <q> : 인용, quote (인라인)
- <blockquote> : 인용 , 블록
- <br> : 라인 브레이크 태그,빈 태그 , line break
- <ul> : 순서화되지 않는 리스트 , unordered list
- <ol> : 순서화된 리스트, ordered list
- <li> : 리스트 항목, list item
- <dl> : 정의 목록 , definition list
- <dt> : 정의 용어 , definition term
- <dd> : 정의 설명 , definition description
- <address> : 연락처, 주소 정보를 알려주는 태그
- <code> : 컴퓨터 프로그램 코드과 정보를 알려주는 태그
- <pre> : 타이핑 한 결과 대로 보여주는 태그
- <strong> : 특별한 강조를 하는 태그,(인라인)
- <hr> : 수평선 ,horizontal rule
- <div> : 블록를 그룹화 시킴
- <span> : 인라인 그룹화 시킴
- <table> : 테이블 태그
- <th> : 테이블 제목 , table header
- <tr> : 행 , table row
- <td> : 정보 , table date
- <caption> 테이블 캡션
주요 HTML 태그 속성
- img의 src : 이미지 자원 위치를 알려 준다. URL 형식 ,source
- style의 type : 종류, 관용구형태로 text/css 형태를 사용
- href : 링크 위치를 알려줌. URL형식 , hyper reference
- 모든 태그의 id : 엘리먼트를 구분 식별자,사용자가능 유형(A-z,하이픈,밑줄,콜론,..그러나 공백문자 제외)
- 모든 태그의 class : 엘리먼트 그룹의 선택하기 위해서
- a의 target : _blank 일 경우 새로운 창으로 링크 결과를 보여준다.
- img의 alt : 이미지를 찾을 없을 때 설명 (alternative text describing)
- img의 width,height : 이미지의 실제 크기를 넣어 줌.
주요 CSS 속성
- margin : 밖쪽 여백 (top right bottom left)
- margin-left : 왼쪽 바깥 여백 , 값 형태는 20px, 20%
- margin-right : 오른쪽 바깥 여백
- padding : 안쪽 여백 (top right bottom left) , 반시계 반향
- color : 폰트색 변경 가능(전경색)
- font : 관련 설정 (단일 설정: style weight size/line-height family)
- font-family : 폰트 설정 , 값은 다중으로 가능 하면 ‘맑은 고딕'
- font-size : 폰트 크기 (px,em,%)
- font-weight : 폰트 굵기
- font-style : 폰트 스타일 (italic,oblique)
- line-height : 줄 간격 (em)
- text-decoration : underline
- text-align : 블록엘리먼트에 속한 텍스트를 정렬하기 위해서 정렬
- center : 가운데 정렬
- right : 오르쪽 정렬
- left : 왼쪽 정렬
- border : 경계선 관련 설정 , 선 두께,형식, 색
- border-color : 경계선 색
- border-width : 경계선 두께
- thin , medium , thick
- 1-6px
- border-style : 경계선 종류(실선,점선)
- solid : 실선
- double : 이중선
- groove : 홈이 있는 선
- dotted : 점선
- dashed : 긴 점선
- inset : 안쪽들어간 3차원 느낌선
- outset : 반쪽들어간 3차원 느낌선
- ridge : 페이지 돌출형 느낌선
- background : 관련 설정들 (단일 설정: color image repeat)
- background-color : 바탕색 , 속성값은 #rr,gg,bb , white,gray,black
- background-image : 배경 이미지 값예) url(images/background.gif)
- background-repeat : 반복 여부 (
- repeat : 기본값
- no-repeat : 반복 없음
- repeat-x : x 축으로 반복
- repeat-y : y 축으로 반복
- inherit : 부모 상속
- background-position : 이미지 위치 (top left) 위쪽 왼쪽
- width : block 엘리먼트의 경우는 content의 너비만 설정함.
- 속성값 중 !important : 저자 스타일을 재 정의 가능 함.
- float : 흐름에 대한 정의 배치
- clear : 흐름을 막는 역할을 수행한다.
- 위치관련 속성
- position : 위치 속성
- static : 기본값 , float 속성을 사용가능 해짐.
- absolute : 절대 좌표값을 잡을 수 있다.
- fixed : 고정-브라우저 상대적 좌표 , 주로 광고를 표시 할때
- relative : ?
- top : 위로 부터 위치
- left : 왼쪽으로 부터 위치
- z-index : 층을 의미 값이 높을 수록 위쪽에 있음.
- caption-side : 캡션 위치 설정 (bottom, top)
- border-spacing : 셀사이의 공간
- border-collapse : 테두리 혼합(collapse)
- 리스트 관련 속성
- list-style-type : 리스트의 marker 꾸미기
- disc : 꽉찬동그라미
- circle : 떵빈 동그라미
- square : 네모난 상자
- none : 없음.
- list-style-image : 사용자 정의 marker url(URL)
- list-style-position : 마커과의 위치
- inside : 마커 밑
- outside : 텍스트 밑에 마커가 옮
CSS 선택자 예제
- 선택된 요소의 하위 요소까지 선택됨.
- p : 단일 요소
- h1,h2 : 여러 요소 선택
- p.$className : p 요소 class가 $className인것
- .$className : $className인 모든 요소
- p.#$id : p 요소 중 id가 $id인것
- #$id : 모든 요소중 id가 $id인것
- div h2 : div h2 의미는 div가 부모 , h2 자식 즉 div요소중 h2 자식을 선택
- #$id $emName : $id를 요소중에 엘리먼트 이름이 $emName를 선택(직계 자손은 아님)
#$id > $emName - 이렇게 하면 직계 자손됨. - a:$status : $status에 선택 가능 , 아래 이외 상태들 focus , active
예) a:link , a:visited , a:hover
HTML 문서 타입 정의
- HTML 4.01 이전 호환성 과도적인 :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> - HTML 4.01 엄격한 :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”
“http://www.w3.org/TR/html4/strict.dtd”> - XHTML 1.0 엄격한 :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> - HTML 컨텐츠 타입 명시 하기
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”>
