Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

웹표준코딩 팁 - 하코사 본문

Web publishing/웹 표준

웹표준코딩 팁 - 하코사

BeOne 2010. 4. 1. 14:21

- 마크업 및 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 쿼리스트링의 경우 & 기호는 다음과같이 인코드해주어야한다.
&amp; (띄어쓰기 붙혀서..)
<a href="/dir/file.php?id=111&amp;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">

[출처] [1원짜리 팁] 처음 웹코할때 끄적끄적 적어놓은거 올려봅니다. (하드코딩하는사람들) |작성자 현식


저작자표시

'Web publishing > 웹 표준' 카테고리의 다른 글

파이어폭스에만 적용되는 핵  (0) 2010.05.04
파이어폭스에서 플래시 투명하게하기  (0) 2010.04.08
html5 관련 tag  (0) 2010.03.30
하단에 clear하는 방법 및 상단 위치 마추는 방법  (1) 2010.03.30
Internet Explorer 6 - IE6 (익스플로러) PNG 이미지 투명처리  (0) 2009.11.06
'Web publishing/웹 표준' Related Articles more