'2007/12'에 해당되는 글 11건
2007/12/27 14:39
[웹표준/문서구조]
1. 제목 : <h1></h1> ~ <h6></h6>
- h1~h6 까지의 계층구조를 지켜서 표현해주는 것이 바람직하다.
2. 문단 : <p>~</p>
- 레벨, 인라인 요소와 텍스트 포함, 블록레벨 포함 불가
- * 강제 줄 바꿈할 때는 <br /> 사용
3. 구분선 : <hr / >
- 전 후의 내용을 명확히 구분짓는 의미.
hr {display:none;}
- h1~h6 까지의 계층구조를 지켜서 표현해주는 것이 바람직하다.
2. 문단 : <p>~</p>
- 레벨, 인라인 요소와 텍스트 포함, 블록레벨 포함 불가
- * 강제 줄 바꿈할 때는 <br /> 사용
3. 구분선 : <hr / >
- 전 후의 내용을 명확히 구분짓는 의미.
hr {display:none;}
Trackback Address :: http://marie1114.tistory.com/trackback/11
2007/12/27 14:29
[웹표준/문서구조]
블록레벨 요소 (block-level elements)
- 독립된 블록덩어리
- 인라인, 텍스트 요소, 일부요소는 블록 레벨 포함 가능
<div>, <p>, <h1>~<h6>, <form>, <ul>, <ol>, <dl> 등
인라인 요소 (inline elements)
- 행 안의 일부
- 인라인 요소와 텍스트 포함가능, 블록 레벨 포함 불가
- 반드시 블록 레벨 안에 포함시켜야한다.
<span>, <strong>, <em>, <a>, <img> 등
- 독립된 블록덩어리
- 인라인, 텍스트 요소, 일부요소는 블록 레벨 포함 가능
<div>, <p>, <h1>~<h6>, <form>, <ul>, <ol>, <dl> 등
인라인 요소 (inline elements)
- 행 안의 일부
- 인라인 요소와 텍스트 포함가능, 블록 레벨 포함 불가
- 반드시 블록 레벨 안에 포함시켜야한다.
<span>, <strong>, <em>, <a>, <img> 등
Trackback Address :: http://marie1114.tistory.com/trackback/10
2007/12/21 11:36
[웹표준/레이아웃]
여백, 중앙정렬
1. 여백
body 요소의 여백
- Opera 에서는 padding 으로 조절하고, 그 외 브라우저에서는 margin 으로 조정하므로,
body 여백을 설정할때에는 margin 값과 padding 값을 동시에 지정해야한다.
body {margin:0; padding:0;}
2. 중앙정렬
블록 요소 : 좌우 마진값에 auto 지정
인라인 요소 : 부모 블록 요소에 text-align:center; 를 지정
* Win IE 6 에서는 marin:auto 로 지정해도 적용이 안되므로, body에 text-align:center; 를 준다.
이 때에는 그 안의 요소까지 중앙정렬이 되므로, 직접적인 자식 요소에 text-align:left; 를 동시에 지정해 준다.
body {text-align:center;}
div#wrap {margin:0 auto; text-align:left;}
1. 여백
body 요소의 여백
- Opera 에서는 padding 으로 조절하고, 그 외 브라우저에서는 margin 으로 조정하므로,
body 여백을 설정할때에는 margin 값과 padding 값을 동시에 지정해야한다.
body {margin:0; padding:0;}
2. 중앙정렬
블록 요소 : 좌우 마진값에 auto 지정
인라인 요소 : 부모 블록 요소에 text-align:center; 를 지정
* Win IE 6 에서는 marin:auto 로 지정해도 적용이 안되므로, body에 text-align:center; 를 준다.
이 때에는 그 안의 요소까지 중앙정렬이 되므로, 직접적인 자식 요소에 text-align:left; 를 동시에 지정해 준다.
body {text-align:center;}
div#wrap {margin:0 auto; text-align:left;}
Trackback Address :: http://marie1114.tistory.com/trackback/9
2007/12/21 11:19
속성을 지정하는 순서 제안
(특별히 규정화된것은 아님.)
1. 표현, 위치
2. 마진, 패딩
3. 배경, 색상
4. 폰트
display
list-style
position
float
clear
width
height
margin
padding
border
background
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
(특별히 규정화된것은 아님.)
1. 표현, 위치
2. 마진, 패딩
3. 배경, 색상
4. 폰트
display
list-style
position
float
clear
width
height
margin
padding
border
background
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
Trackback Address :: http://marie1114.tistory.com/trackback/8
2007/12/20 14:33
브라우저 배제를 위한 CSS핵
1. Win IE 4-6, Mac IE 4, Netscape 4의 배제 방법
: 선택자 앞에 ' html>body' 를 붙인다.
html>body h1 {color:red;}
2. Win IE 6의 배제 방법
:속성과 값을 구분 짓는 콜론(;) 앞에 공백문자와 빈 주석을 '/**/' 형식으로 기술한다.
h1 {color/**/:red;}
유명한 CSS 핵
1. 스타핵 (star hack)
:선택자 앞에 '*html' 을 붙이면 Win IE 4-6, Mac IE 4-5 등에 스타일이 적용되고 다른 브라우저에는 적용되지 않는다.
*html h1 {color:red;}
2. 스타 7 핵 (star 7 hack)
: 선택자 앞에 'html*' 을 붙이면 Win IE 5.5-6, Mac Ie 5, Safari 등에서 스타일이 적용되고 다른 브라우저에서는 적용되지 않는다.
html*h1 {color:red;}
1. Win IE 4-6, Mac IE 4, Netscape 4의 배제 방법
: 선택자 앞에 ' html>body' 를 붙인다.
html>body h1 {color:red;}
2. Win IE 6의 배제 방법
:속성과 값을 구분 짓는 콜론(;) 앞에 공백문자와 빈 주석을 '/**/' 형식으로 기술한다.
h1 {color/**/:red;}
유명한 CSS 핵
1. 스타핵 (star hack)
:선택자 앞에 '*html' 을 붙이면 Win IE 4-6, Mac IE 4-5 등에 스타일이 적용되고 다른 브라우저에는 적용되지 않는다.
*html h1 {color:red;}
2. 스타 7 핵 (star 7 hack)
: 선택자 앞에 'html*' 을 붙이면 Win IE 5.5-6, Mac Ie 5, Safari 등에서 스타일이 적용되고 다른 브라우저에서는 적용되지 않는다.
html*h1 {color:red;}
Trackback Address :: http://marie1114.tistory.com/trackback/7
2007/12/12 17:47
Ever wanted to test your website in various versions of Internet Explorer?
완전 좋은게 있었네. 익스플로러 7.0으로 업데이트하고 엄청 후회했었는데..
다른 버젼의 익스플로러에서 작업한걸 확인할때.... 완전 좋다.
요기서 다운로드 받아서 깔면.. 각 버젼별로 확인할 수 있다.
http://tredosoft.com/Multiple_IE
완전 좋은게 있었네. 익스플로러 7.0으로 업데이트하고 엄청 후회했었는데..
다른 버젼의 익스플로러에서 작업한걸 확인할때.... 완전 좋다.
요기서 다운로드 받아서 깔면.. 각 버젼별로 확인할 수 있다.
http://tredosoft.com/Multiple_IE
Trackback Address :: http://marie1114.tistory.com/trackback/6
2007/12/07 13:53
문서형 선언 (Document Type Declaration)
1. HTML 2.0 표준 문서 형식
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
2. HTML 3.2 표준 문서 형식
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
3. HTML 4.01 표준 문서 형식
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
4. XHTML 1.0 표준 문서 형식- 현재 상태에서 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!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 XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
5. XHTML 1.1 표준 문서 형식
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
※ 코딩에 알맞은 DOCTYPE 를 지정해주는 것이 중요하다. XHTML 1.0 이 최근에 점점 많이 쓰는 방식이기는 하나 HTML 4.01 형식에 맞는 코딩이라면 HTML 4.01 로 DOCTYPE 를 지정해주는 것이 바람직하다.
1. HTML 2.0 표준 문서 형식
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
2. HTML 3.2 표준 문서 형식
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
3. HTML 4.01 표준 문서 형식
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
4. XHTML 1.0 표준 문서 형식- 현재 상태에서 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!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 XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
5. XHTML 1.1 표준 문서 형식
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
※ 코딩에 알맞은 DOCTYPE 를 지정해주는 것이 중요하다. XHTML 1.0 이 최근에 점점 많이 쓰는 방식이기는 하나 HTML 4.01 형식에 맞는 코딩이라면 HTML 4.01 로 DOCTYPE 를 지정해주는 것이 바람직하다.
Trackback Address :: http://marie1114.tistory.com/trackback/5
2007/12/07 13:48
1. 모든 태그와 속성은 반드시 소문자로 작성.
2. 속성 값은 큰 따옴표 안에.
3. 모든 태그는 올바르게 닫아줘야 한다.
빈 요소 (br, area, col, hr, img 등)에는 종료 태그가 포함되거나 시작태그가 /> 로 끝나야 한다.
2. 속성 값은 큰 따옴표 안에.
3. 모든 태그는 올바르게 닫아줘야 한다.
빈 요소 (br, area, col, hr, img 등)에는 종료 태그가 포함되거나 시작태그가 /> 로 끝나야 한다.
<p>…</p>
<br></br> 혹은 <br />
<img src=“img/sample.gif” alt="샘플" />
<br></br> 혹은 <br />
<img src=“img/sample.gif” alt="샘플" />
5. 스크립트, 스타일 요소에는 type 속성이 포함되어야 한다.
<style type=“text/css”></style >
<script type=“text/javascrips” language=“javascript”> </script>
<style type=“text/css”></style >
<script type=“text/javascrips” language=“javascript”> </script>
Trackback Address :: http://marie1114.tistory.com/trackback/4
2007/12/07 13:36
웹 표준을 선택해야 하는 이유
1. 마크업 용량이 줄어든다
- 불필요한 코드량이 줄어들므로 페이지 로딩 시간이 빨라진다. → 서버 공간이나 처리 능력에 들어가는 비용 절감
2. 페이지 수정에 용이
- CSS를 사용해 사이트를 디자인함으로 디자인 수정, 리뉴얼이 쉬워진다.
3. 웹 접근성(유지 비용의 감소 및 재 생산성 확대)
- 대부분의 브라우저, 휴대폰, PDA, 장애인 지원용 페이지에서도 컨텐츠를 읽을 수 있다.
4. 향후 호환성
- 향후에도 그 문서를 무리 없이 볼 수 있다.
1. 마크업 용량이 줄어든다
- 불필요한 코드량이 줄어들므로 페이지 로딩 시간이 빨라진다. → 서버 공간이나 처리 능력에 들어가는 비용 절감
2. 페이지 수정에 용이
- CSS를 사용해 사이트를 디자인함으로 디자인 수정, 리뉴얼이 쉬워진다.
3. 웹 접근성(유지 비용의 감소 및 재 생산성 확대)
- 대부분의 브라우저, 휴대폰, PDA, 장애인 지원용 페이지에서도 컨텐츠를 읽을 수 있다.
4. 향후 호환성
- 향후에도 그 문서를 무리 없이 볼 수 있다.
Trackback Address :: http://marie1114.tistory.com/trackback/3
2007/12/07 11:03
1997.10월 12일.
유니버샬 스튜디오 놀러가서.
찰리채플린이 아직 살아있따. 크허허허허.
어렸네..어렸어~~ 와~10년전.
Trackback Address :: http://marie1114.tistory.com/trackback/2
