카테고리 글 보관함: MARKUP

MARKUP

IE 특정 브라우저 이하 버전 구별하기

댓글 달기

IE특정 브라우저 이하 버전 구별하기
<script type=“text/javascript”>
    var rv = –1;
    var browser_state = false;
     if (navigator.appName == ‘Microsoft Internet Explorer’) { 
        var ua = navigator.userAgent;
        var re = new RegExp(“MSIE ([0-9]{1,}[\.0-9]{0,})”);
        if (re.exec(ua) != null) rv = parseFloat(RegExp.$1);
        if (rv > –1 && rv < 9){ browser_state = true; }
    }
    if(browser_state == false){ alert(browser_state); }
</script>

TECH&TIP

firstClass, lastClass 사용하지 않고 제작 하기

댓글 달기

이번에는 제가 2007년 11월 29일에 강의할때 알려드렸던 가상 선택자를 사용하지 않은 활용 방법입니다.

  • 내용
  • 내용
  • 내용

로 많이 들 사용하고 계십니다. 이렇게 사용하는
이유는 IE 구 버전에 수도 클래스인 “first-child”(IE6 미지원), last-child(미지원) 이 되기 때문에 일일히 클래스명을 삽입할 경우가 생깁니다.

고정인 경우 “first”같은 클래스를 넣어도 상관없지만 유동적인 부분에서 사용하면 개발에서 조건문을 한번더 사용해야하는 번거로움이 있습니다. 이를 해결하기 위해서 margin의 음수 값과 overflow:hidden; 을 이용하여 제작을 할수 있습니다.

단점 : div를 한번더 감싸고 overflow:hidden; 속성 때문에 외부로(클릭시 레이어) element가 빠져 나가지 않는다.
사용처 : 위의 조건이 아닌경우는 사용하여도 무방하다.

1. 최근 게시물 형태의 갤러리
디자인

HTML –

  • 갤러리1
  • 갤러리2
  • 갤러리3

CSS – 

1
2
3
4
5
6
7
8

.gallery {width: 300px;position:relative; overflow: hidden; /* 레이아웃 넓이 */ }
.gallery ul {margin-left: -11px; /* 여백만큼 이동 */ width: 400px; /* 컨텐츠 총 넓이 */ }
.gallery ul li {  
 float: left;  
 width: 80px; height: 20px;
 padding-left: 20px; 
 border-left: 1px solid #666;
}

2. 상하로 디자인된 형태 입니다

디자인

보통은 아래의 코드와 같이 사용합니다.

HTML –

  • 갤러리1
  • 갤러리2
  • 갤러리3
  • 갤러리1
  • 갤러리2
  • 갤러리3
  • 갤러리1
  • 갤러리2
  • 갤러리3

CSS – 

1
2
3
4
5
6
7
8

.gallery {width: 300px; /* 레이아웃 넓이 */ }
.gallery ul {border-bottom: 1px solid #000;}
.gallery ul li {  
 float: left;  
 width: 80px; height: 20px;
 padding:10px; 
}
.gallery ul.end {border-bottom:0;}

변경된 형태

준비할 이미지

갤러리의 높이+라인과 같이 자른다 라인을 자를때 라인을 제외한 배경은 투명으로 처리하는게 좋습니다. (위에 이미지 있음)

HTML –

  • 갤러리1
  • 갤러리2
  • 갤러리3
  • 갤러리1
  • 갤러리2
  • 갤러리3
  • 갤러리1
  • 갤러리2
  • 갤러리3

CSS – 

1
2
3
4
5
6
7
8
9
10
11
12

.gallery {
   width: 300px; 
   position: relative; 
   overflow: hidden; /* 레이아웃 넓이 */ }
.gallery ul {background: url('이미지') 0 0 repeat; margin-top: -1px /* 라인만큼 위로 당겨줍니다. */}
.gallery ul li {  
 float: left;  
 width: 80px; 
 height: 31px; /* 라인을 포함한 높이를 줍니다. */
 padding:10px; 
}
.gallery ul.end {border-bottom:0;}

이제 적용하시면 원하는 효과를 얻을 수 있습니다.

주의 : 소스에 overflow:hidden; 과 position: relative;를 같이 사용하였는데
position: relative;를 사용하지 않으면 컨텐츠가 밖으로 노출이 됩니다.

overflow:hidden과 margin음수값을 이용하면 보다 편리하게 퍼블리싱이 가능합니다.
하지만 너무 많은 남발의 경우 많은 버그 및 사용성의 불편함이 생길수 있습니다. 확실한 테스트후에 응용하세요

처음에 적은 글 처럼 컨텐츠가 확대 되거나 특정 이벤트 후 absolute로 동작되는 element가 있으면 overflow:hidden;때문에 컨텐츠가 사라지니
충분한 주의를 기울여서 사용하셔야 합니다.

다른 참고글 : http://blog.naver.com/skell83/150021523403

TECH&TIP

naming

댓글 달기

네이밍

오랜만에 포스팅이네요

다름이 아닌 이번포스팅은 네이밍에 관해서 입니다. 대부분 class명이나 ID명을 지을 때 아래의 방법을 많이 사용합니다.

예시(1)

1
2
3
4
5
6
7
8

<div class="news">
     <h1 class="news_tit">뉴스</h1>
     <div class="news_con">내용</div>
</div>
<div class="notice">
     <h1 class="notice_tit">공지</h1>
     <div class="notice_con">내용</div>
</div>

예시(2)

1
2
3
4
5
6
7
8
9

<div class="news">
	<h1 class="newsTit">뉴스</h1>
	<div class="newsCon">내용</div>
</div>
 
<div class="notice">
	<h1 class="noticeTit">공지</h1>
	<div class="noticeCon">내용</div>
</div>

위의 방법으로 css를 제작하면

예시(1-1)

1
2
3
4
5
6
7

.news {}
.news .news_tit {}
.news .news_con {}
 
.notice {}
.notice .notice_tit {}
.notice .notice_con {}

예시(1-2)

1
2
3
4
5
6
7

.news {}
.news_tit {}
.news_con {}
 
.notice {}
.notice_tit {}
.notice_con {}

예시(2-1)

1
2
3
4
5
6
7

.news {}
.news .newsTit {}
.news .newsCon {}
 
.notice {}
.notice .noticeTit {}
.notice .noticeCon {}

예시(2-2)

1
2
3
4
5
6
7

.news {}
.newsTit {}
.newsCon {}
 
.notice {}
.noticeTit {}
.noticeCon {}

이런 형태를 띕니다.

위 상황에서 문제점

클래스명이 불필요하게 길어 질수 있고,
활용성이 떨어져서 매번 새로운 클래스명을 생각해야합니다.

위의 방법 같은 경우는 그나마 이름을 상속받아서 사용하는 경우이지만 그렇지 않은 경우는 더 네이밍 제작에 더 심각해지는것이죠

그럼 아래의 방법을 하나 제시 해보겠습니다.

1
2
3
4
5
6
7
8
9

<div class="news">
	<h1 class="tit"></h1>
	<div class="con"></div>
</div>
 
<div class="notice">
	<h1 class="tit"></h1>
	<div class="con"></div>
</div>

보시다 시피 동일 한 클래스명을 사용하고 있습니다. 이러면 나중에 무엇이 무엇인지 알수 없다 라는 분들고 계실 수 있습니다.
하지만 css를 활용하면 충분히 관리가 된다는것이죠

1
2
3
4
5
6
7

.news {}
.news .tit {}
.news .con {}
 
.notice {}
.notice .tit {}
.notice .con {}

위처럼 css를 관리 하고 제작한다면 가독성도 뛰어날 뿐더러 어디에 무엇이 사용되었는지 한번에 알수 있는 장점을 가집니다.
물론 css나 class명도 줄어 들어서 최적화도 약간(?)된다는거죠

템플릿

1
2
3
4

.유니크_네임
.유니크_네임 .tit
.유니크_네임 .con
.유니크_네임 .more

다음은 섹션에 관한 네이밍입니다. 이부분은 스스로의 규칙을 정하시는게 좋습니다.

대 wrap “이름_container”
예) header_container
소 wrap “이름_content”
예) left_content, main_content
소규모 wrap “이름_wrap” 예) notice_wrap
디자인필요에 의한 내부 wrap “이름_inner”
예) header_inner, notice_inner
필요에 따라서 + 숫자
예) header_inner01, header_bg01
wrap 내의 단순 좌우 정렬 .rtl { float: left; }
.ltr { float: right;}

그럼 전체 적으로 퍼블리싱된 결과물을 한번 보겠습니다.

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 
<style>
/* 레이아웃 */
#header_container {}
#header_container .header_inner {}
 
#body_container {}
#body_container .body_inner {}
#body_container .left_content {}
#body_container .main_content {}
 
#footer_container {}
 
/* 메인 컨텐츠 */
/* 공지 사항 */
.notice_wrap {}
.notice_wrap .tit {}
.notice_wrap .con {}
.notice_wrap .more {}
 
/* 뉴스 */
.news_wrap {}
.news_wrap .tit {}
.news_wrap .con {}
.news_wrap .more {}
 
/* 갤러리 */
.gallery_wrap {}
.gallery_wrap .tit {}
.gallery_wrap .con {}
.gallery_wrap .more {}
</style>
 
 
 </head>
 
 <body>
<!-- s: header -->
<div id="header_container">
  <div class="header_inner">
   <h1 class="logo">네이밍 예제</h1>
   <ul class="gnb">
    <li>메뉴</li>
   </ul>
  </div>
</div>
<!-- e: header -->
 
<!-- s: body -->
<div id="body_container">
 <div class="body_inner">
   <div class="left_content"> lnb 및 배너</div>
   <div class="main_content">
 
 
   <!-- s: notice -->
   <div class="notice_wrap">
    <h2 class="tit">공지사항</h2>
    <ul class="con">
     <li><a href="#">어쩌구 저쩌구</a></li>
    </ul>
    <a href="#" class="more">공지 더보기</a>
   </div>
   <!-- e: notice -->
 
   <!-- s: news -->
   <div class="news_wrap">
    <h2 class="tit">뉴스</h2>
    <ul class="con">
     <li><a href="#">어쩌구 저쩌구</a></li>
    </ul>
    <a href="#" class="more">뉴스 더보기</a>
   </div>
   <!-- e: news -->
 
   <!-- s: gallery -->
   <div class="gallery_wrap">
    <h2 class="tit">갤러리</h2>
    <ul class="con">
     <li><a href="#">사진</a></li>
    </ul>
    <a href="#" class="more">갤러리 더보기</a>
   </div>
   <!-- e: gallery -->
  </div>
 </div>
</div>
<!-- e: body -->
 
 
<!-- s: footer -->
<div id="footer_container"></div>
<!-- e: footer -->
 </body>
</html>

* 네이밍이 중요한 이유는 코드의 재활성, 가독성이 좋아 지고 유지보수가 좀더 편해지는데에 있습니다.

좀더 복잡한 케이스

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

<div class="section_wrap"> 
  <div class="section_inner"> <!-- 디자인요소를 위한 DIV inner혹은 숫자 혹은 bg명시 -->
   <!-- tit은 필요에 따라 사용 예)텝이나 여러개 추가 될경우 숫자등 이용 -->
   <hn>내용</hn>   
   <!-- 주 설명 --> 
   <p class="m_txt">아래의 내용은 예제 입니다.</p>  
   <!-- 컨텐츠 왼쪽 정렬 동일한 컨텐츠의 영역 나누기일경우 단순 의미만 부과된 class명사용 -->
   <div class="rtl"> 
        <p class="txt01">내용1</p>
   </div> 
   <!-- 컨텐츠 우측 정렬 -->
   <div class="ltr">
     <!-- 클래스 네임이 변경되는 이유는 동일한 센션의 내용이고 단분 좌우 배치일뿐 -->
     <p class="txt02">내용2</p> 
   </div>
  </div>
</div>
<style>
.section_wrap {}
.section_wrap hn {}
.section_wrap .m_txt  {}
.section_wrap .rtl  {디자인요소}
.section_wrap .ltr  {디자인요소}
.section_wrap .txt01 {}
.section_wrap .txt02 {}
</style>

위의 예제 처럼 컨텐츠의 의미와 구조를 파악하고 class명을 명시하면 더욱 더 활용 성이 높아 집니다. 네이밍은 안된다 된다가 없습니다 활용하기 나름 일뿐

JAVASCRIPT

jquery .bind(), .live()

댓글 달기

bind()
– http://api.jquery.com/bind/

————————————————————————————————————————————–

Description: Attach a handler to an event for the elements.

  • version added: 1.0.bind( eventType,  [eventData,] handler(eventObject) )

    eventTypeA string containing one or more JavaScript event types, such as “click” or “submit,” or custom event names.

    eventDataA map of data that will be passed to the event handler.

    handler(eventObject)A function to execute each time the event is triggered.

  • version added: 1.4.3.bind( eventType,  [eventData,] preventBubble )

    eventTypeA string containing one or more JavaScript event types, such as “click” or “submit,” or custom event names.

    eventDataA map of data that will be passed to the event handler.

    preventBubbleSetting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling. The default is true.

  • version added: 1.4.bind( events )

    eventsA map of one or more JavaScript event types and functions to execute for them.

————————————————————————————————————————————–

– 사용 방법

  1. 단일
    $(“input”).bind(“click”, function(){  ……… });
  2. 2개 이상
    $(“input”).bind(“click”, function(){ ……… }).bind(“blur”,function(){ …… });
  3. 2개이상
    $(“input”).bind({
    click: function() { ……. },
    blur: function() { …….. }
    });

 

live()
– http://api.jquery.com/live/

————————————————————————————————————————————–
Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

  • version added: 1.3.live( eventType, handler )

    eventTypeA string containing a JavaScript event type, such as “click” or “keydown.” As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.

    handlerA function to execute at the time the event is triggered.

  • version added: 1.4.live( eventType, eventData, handler )

    eventTypeA string containing a JavaScript event type, such as “click” or “keydown.” As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.

    eventDataA map of data that will be passed to the event handler.

    handlerA function to execute at the time the event is triggered.

  • version added: 1.4.3.live( events )

    eventsA map of one or more JavaScript event types and functions to execute for them

————————————————————————————————————————————–

– 사용 방법 bind()와 동일


– 차이점 속도

– http://www.ravelrumba.com/blog/event-delegation-jquery-performance/

 

– 각종 이벤트

마우스 키보드 기타
  click   focus   resize
  dbclick   keydown   scroll
  mousedown   keypress   select
  mousemove   keyup   submt
  mouseout   blur   unload
  mouseover   –   error
  mouseup   –   load
  –   –   change
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