| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- .NET
- 블루수국그림
- PHP
- JSP
- 국민연금
- HTML
- 블로그 조회수 늘리기
- 갑근세
- CSS
- Vista
- flash
- Administrator
- 블로그 방문자 늘리기
- Eclipse
- MySQL
- 소득세
- oralce
- 블로그 수익화
- samba
- Adobe pdf reader
- JavaScript
- 인테리어그림
- 에덴미술
- MSSQL
- Jexcel
- 즐겨찾기 추가
- Jrun
- 블로그 조회수
- IIS
- CVS
- Today
- Total
I LOVE EJ
웹표준코딩 팁 - 하코사 본문
- 마크업 및 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">
'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 |