47367 Members __ Online

정렬
HOME스터디[s]웹표준

웹표준 강좌 02 _List

posted by 라부
date : , update :
hit : 27150, scrab : 0 , recommended : 17

웹표준 강좌 02 _List

시작전 (Doctype) <?xml:namespace prefix = o />

DOCument TYPE Declaration (문서 형식 선언)

본문서가 어떤형식에 의해 만들어졌다라는 선언을 말한다.

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”

http://www.w3.org/TR/HTML4/loos.dtd”>

:"이 문서는 HTML 문서로 국제적이며 W3C라는 ISO비공인인증기관 에서 HTML DTD 4.0을 기준으로 Transitional방식으로 영어 공용어로 출력한다."

<!DOCTYPE 최상위엘리먼트네임 (국제적,공용||내부적,제한용) "(ISO공인인증기관 || ISO비공인인증기관)//기관명//DTD type //인코딩언어(ISO)" "DTD 주소">

----------------------------------------------------------------------------------------------------------

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이 사용가능. 하지만 넷스케이프.. FF(파이어폭스)쪽의 frame은 전혀 작동 되지 않음

  

XHTML 1.0 엄격모드

코드:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

----------------------------------------------------------------------------------------------------------

영문 <meta http-equiv="Content-Type" c"text/html; charset=ISO-8859-1" />

한글 <meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />

일어 <meta http-equiv="Content-Type" c"text/html; charset=shift_JIS" />

모든언어 <meta http-equiv="Content-Type" c"text/html; charset=UTF-8" />

유니코드(전 세계의 문자들을 표시하기 위한 표준 코드)16진수문자로 한글등 특수문자깨짐

 

 

1.     DOCTYPE 선언 :웹문서의 준수해야할 기준선언

2.     HTML문서선언

3.     HEAD

-       타이틀

-       META

-       STYLE

-       SCRIPT

4.     BODY (웹문서)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />

<title> </title>

<style type="text/css">

 

</style>

</head>

<body>

</body>

</html>

 

01.리스트 < 들여쓰기 / 순서형, 비순서형>

<li>공혜림</li>

<li>공병주</li>

>>

l  개나리 꽃이 피었습니다.

l  무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다.

무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다.

무궁화 꽃이 피었습니다.

 

 

<ul>

           <li>공혜림</li>

           <li>공병주</li>

</ul>

>>

l  개나리

l  무궁화

 

<ol>

           <li>개나리</li>

           <li>무궁화</li>

</ol>

>>

1.     개나리

2.     무궁화

 

02. 어떠한 용어정리나 제목 내용으로 표현하기위한 표현

<p>정의형 문서</p>

<ol>

           <dt>소주</dt>

                     <dd>강희가 못먹는것</dd>

           <dt>맥주</dt>

                     <dd>강희가 좋아하는것</dd>

</ol>

 

>> 자동들여쓰기

정의형문서

           소주

                     강희가 못먹는것

           맥주

                     강희가 좋아하는 것

 

<p>정의형 문서</p>

<ol>

           <li>html</li>

                     <p>하이퍼 텍스트 마크업 렝귀지</p>

           <li>css</li>

                     <p>캐스캐이딩 스타일 시트</p>

</ol>

>> 단어와 같이시작

정의형문서

1.     Html

하이퍼 텍스트 마크업 랭귀지

2.     Css

캐스캐이딩 스타일 시트

 

##### 변형

Ul { list-style:none; } 블릿이 사라짐

Ul { list-style:none; padding-left:0;} 블릿이 사라지고 들여쓰기 삭제

Ul {list-style-image:url(images/dot.gif);} 블릿을 이미지로 바꿈

 

 

Ul {list-style:none;}

Li {background:url(dot.gif) no-repect 0 6px; padding-left:17px;}

블릿은 삭제 li 백그라운드이미지를 left 0px 위에서 6px 에서 시작하여 깔고 한번만

글자는 left에서 17px떨어져서 시작하라

 

03. h1~h6

 

<h>테그를 사용하는이유

<h1> ~<h6> 까지 있으며 타이틀을 나타낼 때 쓴다. 32px, 24px, 18px, 16px, 13px, 10px

기존방식은 <B></B> <span></span> 으로 css를 사용하였으나 2.0에서는 지양한다.

 

1.     검색엔진은 <B></B> <span></span>를 본문으로 인식한다.

2.     Css를 적용하지 못하는 브라우져에서는 타이틀과 본문을 구분할수없다.

3.     텍스트에 의미를 부여한다.

4.     시각 음성 브라우저가 모두 머리글로 인식한다.

5.     css적용이 쉽다









웹표준, 강좌
댓글 5 | 엮인글 0

웹표준 강좌 03 _Table
웹표준 강좌 01





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D69%22%3E%EC%9B%B9%ED%91%9C%EC%A4%80%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E