기본적으로 Cross브라우징이 가능하도록 한다.
(기준브라우저 :IE7, IE6, Firefox2.0 이상)
DTD속성 지정 (<!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"> 가장 많이 쓰이고 있는 속성.
모든 값은 따옴표 “ ”로 묶어준다.
홀태그의 마무리는 />로 끝내도록 한다. (위의 DTD속성을 지정할 경우 드림위버에서는 자동으로 생성됨)
UTF-8 언어셋 지정
- HTML 파일은 head에 메타태그를 이용하여 charset=utf-8 를 지정한다.
- CSS 파일은 최상단에 @charset "UTF-8"를 명시한다.
이미지 (img) 태그에는 alt태그를 필수적으로 사용하고, width와 height를 준다.
색상코드는 #16 진수를 사용한다.
- 반복되는 코드의 경우 ex, #000000 => #000, #ff6600=> #f60
들여쓰기 (Tap키 이용)
- 한단계 아래에 속하는 엘리먼트는 Tap을 이용 한 칸 뒤부터 시작하도록 한다.
이미지 파일명 작성.
(파일명은 역할_의미 이런 식으로 작명하도록 한다.) * 고민할 필요 있음 - 이미지 폴더 구성을 메뉴별로 구성할 경우와 파일 Charact로 구성할 경우에 따라서 다르게 지정한다. - 메뉴별로 구성할 경우 ex, buy\menu.gif, buy\logo.gif
- 파일 Charact로 구성할 경우 ex, images\bg, images\tit, images\icon, images\flash
id와 class 사용시 주의 점.
- id는 프로그래밍 할 때 사용되므로, 프로그램에 영향을 미칠수 있으므로, 시각적 표현만 가능할 정도의 스타일만 지정해주고, 나머지는 class에서 적용하도록 한다.
- id는 한 페이지에 한 번만 사용을 하도록 하고, class는 상위 엘리먼트의 상속을 받아서 여러 번 선언이 가능하다.
Class 네이밍
(엘리먼트를 감싸고 있는 가장 큰 단위(레이아웃)의 div는 wrap으로 통일하도록 한다.
ex, header_wrap, container_wrap, footer_wrap 등.
- 가장 큰 단위(wrap) 아래, 모듈 단위 별 박스는 box로 통일하도록 한다. ex, login_box, notice_box, visual_box, banner_box 등.
제목(h) 태그 - h1 (전체 서비스를 대표하는 제목 ex, ESN, 당신이 시장을 만듭니다.)
- h2 (서브 카테고리 서비스의 제목 ex, 자유거래장터, e-기업단신, Co-win)
- h3 (모듈 단위 별 박스 제목 ex, 로그인, 공지사항, e-기업단신, 구매가이드, 미디어보도)
- 사이트 성격에 따라서 제목태그의 활용은 변형이 가능하다.
사이즈 단위는 픽셀 단위를 사용하도록 한다.
- 0 픽셀의 경우 px를 명시하지 않는다.
- div { margin : 0 10px 0 10px }
margin, padding 활용법
- 하나의 div에 float를 사용한 객체가 들어갈 경우 반드시 overflow:hidden; 옵션을 준다. 그래야 float 객체의 높이를 계산하여 유동적으로 높이가 변한다. 참고 사이트 : http://naradesign.net/wp/2008/05/27/144
- 하나의 div에 여러 개의 엘리먼트로 레이아웃을 만들 경우 반드시, 감싸고 있는 div의 padding 값을 이용하여 여백을 생성하도록 한다. (속해있는 객체의 margin으로 여백을 만들지 않도록 한다.) 참고 사이트 : http://monoeyes.com/526
테이블(table)의 활용
- 표 형식의 데이터를 출력할 때는 div를 사용하지 않고, 테이블을 사용하도록 한다.
- 테이블에서의 불필요한 class의 사용을 자제하기 위해 thead , tbody, tfoot의 사용을 습관화 한다.
- tfoot의 경우 표데이터를 인쇄할 때 tfoot이 반복되어 인쇄되므로 좋다. (ex, A4 용지 4장 분량을 인쇄할 경우 합계금액란을 tfoot으로 지정해 놓은 경우 인쇄하면 용지 맨 아래에 항상 합계금액란이 인쇄된다..맞나(?)
Prev
Rss Feed