웹표준 준수사항 몇가지

font
font-family : [폰트이름]     (폰트를 지정한다)
font-style : [normal/italic/oblique]     (문자의 형태를 지정한다)
font-variant : [normal/small-cap]     (소문자를 대문자로 표시)
font-weight : [normal/bold/bolder/lighter/100/200/…/900]      (문자의 두께를 조절한다)
font-size : [사이즈]     (글자의 크기를 지정한다)

color
color : [컬러값]     (요소의 텍스트색을 지정한다)

background
background-color : [색갈값/transparent]     (요소의 배경색을 기술한다)
background-image : [url(주소)/none]     (요소의 배경 이미지를 설정한다)
background-repeat : [repeat/repeat-x/repeat-y/no-repeat]     (배경이미지의 반복을 지정한다)
background-attachment : [scroll/fixed]     (배경의 고정과 스크롤을 설정한다)
background-position : [위치/top/center/bottom/left/right]     (배경이미지의 위치를 지정한다)

text
word-spacing : [길이]     (단어간 간격설정)
letter-spacing : [길이]     (문자간 간격설정)
text-decoration : [none/underline/overline/line-though/blink]     (text에 효과를 준다)
vertical-align : [baseline/sub/super/top/text-top/middle/text-bottom]     (세로방향 정렬을 지정한다)
text-transform : [capitalize/uppercase/lowcase/none]     (단어를 대소문자로 바꾸어준다)
text-align : [left/right/center/justify]     (텍스트의 정렬방법을 정한다)
text-indent : [길이]     (들여쓰기를 지정한다)
line-height : [길이]     (라인과 라인간의 간격을 정한다)
text-justify : [newspaper/distribute-all-lines]     (라인폭 자동정렬을 설정한다)
white-space : [normal/per/nowrap]     (공백 처리 방법 설정)

boxmodel (margin, padding, border)
margin-top : [길이]     (요소상부의 마진을 설정한다)
margin-right : [길이]     (요소우측의 마진을 설정한다)
margin-bottom : [길이]     (요소하부의 마진을 설정한다)
margin-left : [길이]     (요소좌측의 마진을 설정한다)
padding-top : [길이]     (요소상부의 padding을 설정한다)
padding-right : [길이]     (요소우측의 padding을 설정한다)
padding-bottom : [길이]     (요소하부의 padding을 설정한다)
padding-left : [길이]     (요소좌측의 padding을 설정한다)
border-top-width : [길이]     (요소상부의 선두께를 설정한다)
border-right-width : [길이]     (요소우측의 선두께를 설정한다)
border-bottom-width : [길이]     (요소하부의 선두께를 설정한다)
border-left-width : [길이]     (요소좌측의 선두께를 설정한다)
border-color : [색갈값]     (선색갈을 설정한다)
border-style : [none/dotted/dashed/solid/double/groove/inset/outset]     (선 양식을 설정한다)

position
html상에서 x,y,z축으로 각 block의 위치를 레이어처럼 겹치고 세밀한 위치를 지정할수있다.
[absolute][relative]

float
float : [left/right/none]     (요소의 위치를 기존 자리에서 분리시킨다)

display
display : [block/inline/list-item/none]     (브라우져에 디스플레이 되는 방법을 결정한다)

list
list-style-type : [disk/circle/square/decimal/lower-roman/upper-roman/lower-alpha/upper- alpha/none]
 (list의 스타일을 정의한다)
list-style-image : [url(주소)/none]     (list마커로 사용할 이미지 선택)
list-style-position : [outside/inside]     (마커가 표시될 위치 지정)
cursor : [hand/move/wait/ne-resize/nw-resize/sw-resize/se-resize]     (커서의 형태를 지정한다)

 

- 마크업 및 CSS 구현 팁

1. 전체적인 컨텐트를 파악 및 제작 후, 구조를 위한 마크업에 들어간다.
2. 제목테그 및 구조적 마크업과 동시에 HyperText 링크가 걸려있는 컨텐트에 마크업을 진행한다.
<h1~h6>  <a href=””></a>  <ul><dl><ol><p>..  <div><span>디자인요소
* 기본적인 구조 설계 후, xHtml작업 진행 시
* id&class 네임은 컨텐트의 의미에 맞게 사용한다.

3. <div> 그룹핑을 통한 id&class 네이밍 후, 이미지를 제작한다.
4. 제작된 이미지 중 컨텐트의 구성요소는 html에 삽입 한 후, css 배경을 넣는다.
5. CSS로 디자인 레이아웃을 잡을 경우, 마진값과 패딩값은 반드시 한쪽 방향으로만 사용한다.
*  CSS파일 생성시 전제 선택자를 통해 마진값과 패딩값을 “0”으로 지정하고, ol, ul, li, hr의 스타일을 모두 없음으로 선택한다. 전체적인 폰트 및 링크에 대한 속성 및 폼 요소는공통영역에서 선언 후, CSS제작하면, 같은 속성을 여러 번 사용하지 않아도 된다.
* CSS디자인 시 공간에 관한 버그가 발생하면, background-color로 공간이 어떻게 잡혀있는지 파악 후 IE, FF에 동일한 화면을 만든 후, 버그를 수정한다.
* IE 6에서 마진값이 두배로 적용될 경우, “display:inline” 속성으로 마진겹침 현상을 없앤다.
* FF에서 클릭하는 공간이 왼쪽 공간 모두 클릭이 될 경우, 넓이, 높이값 지정 후,
overflow:hidden;값을 준다.
* IE6, IE7에서 overflow:hidden값을 주지 않고 넓이 값을 잡을 경우, 컨텐트의 크기가 늘어나게 되면, 넓이값+패딩값이 적용되지만, FF에서는 컨텐트크기+패딩값으로 인식되어 크기가 늘어나게 된다. 이 경우에는 컨텐츠의 크기만큼 넓이값을 지정하고 패딩값을 주게 되면 동일한 화면을 유지할 수 있다.
* IE 6 Hack은 “* html” 작성 후, id&class 네임을 붙여주면 IE6에만 적용된다.
브라우저 별 Hack 정리 : http://www.nmindplus.com/2006/06/28/css-hack/

6. 제작이 끝난 작업파일은 반드시 유효성 검사를 한다.
마크업 : http://validator.w3.org/#validate_by_uri
CSS : http://jigsaw.w3.org/css-validator/#validate_by_uri

7. HTML과 CSS디자인에 정답이 없으므로 컨텐트를 어떻게 전달하는 것이 올바른 것인지에 대한 고민으로 컨텐트와 디자인을 분리한다.

 

 

- 웹표준 준수사항 몇가지

조건 :  HTML 4.01 Transitional

1) 자바스크립트 지시자나 스타일시트 지시자에 타입정보가 꼭 필요하다.
<script  language="JavaScript" type="text/javascript">
<style type="text/css">
2) img,  map 태그등에 모두 alt=”” 속성이 필요하다.
3) td는 background 속성을 지원하지 않으므로 스타일 시트형태로 표현한다.
<td style="background-image:url('/img/img.gif');"></td>

4) table은 height 속성을 지원하지 않는다.
<table height="100%"> <-- 에러

5) tr은 colspan, height 속성을 지원하지 않는다.
<tr height="30" colspan="2"> <-- 에러

6) body태그는 2개이상있으면 안된다.
body에 onLoad때문이라면 body태그대신
<script language="JavaScript" type="text/javascript">
window.onload = funcName(arg1,arg2);
</script>
형식으로 한다.

7) 스타일시트 font-family 에 한글 parsing이 안되는 문제가 있다
font-family:돋움 의경우 font-family:Dotum 으로 변경한다.
8) 스타일시트 선언은 <head> 안에서 해줘야한다. <body> 안에서 선언하면 에러
<head>
<link href="./style.css" rel=stylesheet type='text/css'>
</head>

9) html 안에 bgcolor나 width,height값을 %단위로 속성 삽입시 코텐션빠지면 에러
<td height="1" colspan="2" bgcolor="#ffffff"></td>
<table width="100%">
위와같이 "" 또는 '' 로 감싸줘야한다.

10) form 태그가 table 안에 있으면 에러 table을 감싸고 있어야한다.
table 안에 있으면 에러
<form>
<table><tr><td></td></tr></table>
</form>
또한 form태그안에는 name속성과 action 속성이 모두 존재 해야한다.
<map 태그 역시 table 바깥에 위치 해야함

11) 이미지 서브밋에 width, height, border 속성을 쓰면 에러.
<input type="image" src="images/button_search.gif" align="bottom">
위와 같이 align 속성은 쓸수 있음

13) url 쿼리스트링의 경우 & 기호는 다음과같이 인코드해주어야한다.
& (띄어쓰기 붙혀서..)
<a href="/dir/file.php?id=111&pwd=222">xxxxxxxx</a>

14) img태그나 기타 태그 속성중에 align="absmiddle" 는 비표준 middle 로 수정
15) 스타일을 표현할때 width, height 값에 px 안붙이면 에러, 색상코드에 # 안붙이면 에러
style="width:10px; height:20px; color:#FFFFFF;"
16) hidden 태그경우 <table 안에 들어있으면 에러.. 즉 form 안에 table 밖에 위치
즉 form태그 안에 table태그 밖에 위치해야함
17) body태그에 leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" 부분 있으면 에러
style="margin:0px;" 형태로 바꿔준다.
18) 자바스크립트 변수에 html 닫힘태그 쓸때는 escape문자로 표현한다.
<a href='url'>url</a>
19) 플래쉬 삽입
<object type="application/x-shockwave-flash" data="<?=$IndexImg?>/index_main.swf" width="260" height="487">
<param name="movie" value="<?=$IndexImg?>/index_main.swf">
<param name="quality" value="high">
</object>
플래쉬 태그에 classid나 codebase를 쓰면 에러.
다만 js형태로 밖으로 빼놓으면 에러 못 찾음
20) 주석에 + 기호달면 에러
<!-- ----------- + ---------------- -->
위의 형태 에러남..
21) DocType를 페이지 맨상단(html태그 밖)에 정의해야함
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

[출처] 카페: (하드코딩하는사람들)