B2B_Front HTML coding guide

B2B_Front HTML coding guide

Document History • Revision History 2

Samsung B2B 이민정 html 코딩규칙 • [Doctype] • HTML5 • [Header] • IE version별로(conditional comment 이용)& 언어진행방향별로html tag에 class 추가 • 언어별 language 처리 • document의 title은 각 페이지 고유의 컨텐츠를 포함하는 검색에 용이한 단어로 표시 • 실제 live file에서는 Meta tag로 검색어 각 페이지마다 기입 (HTML코딩단까지는해당안됨) • Viewport meta tag • CSS,JS 구조도에 따른 link • 개발단 사용 JS 등 link • 페이지 내부에서 별도로 쓰이는 script • [Body] • HTML5에서 추가된 tag는 사용을 지양 • IE version별로(conditional comment 이용) body tag에 class 추가 • 동영상은 브라우저별 지원여부에 따라 video tag와 확장자 사용 (ie8이하버전은 동영상 재생 불가능) • Interactive한 동작을 하는 동영상의 경우 기존 flash 사용.(디바이스에 따라 불가능할때는 안내문구 등 활용) • 컨텐츠는영역내에 자유로운 이동이 가능하도록 모듈단위로 코딩 • SEO를 고려해서 컨텐츠는 각각의 heading tag(혹은 group) 을갖고, img tag의 사용을 지양하고 Text 기반으로 코딩 • IE8 이하버전은반응형 화면이 아닌 고정 width값을 가진 사이트로 보여짐. • 일반적인 컨텐츠의 경우 정해진 Grid Pattern 에 따른 wrapper를 기본으로 두고 그 내부에 컨텐츠 코딩 • .grid-row>.grid-col[number]>.col-inner • Section에bgcolor는 class로 포맷을 정해놓은 후 어드민에서 선택.(배경색상에 따른 폰트색상 변경 이슈) • -키비쥬얼,상품 리스트는 위의 그리드와 예외적으로 코딩 • -input, label 은 접근성에 맞춰 코딩하되 HTML단에서 사용하는 id는 “p-” 로 시작한다. • -id는 개발단에서 변경 가능하나 label for값과 매칭되도록 주의바람 • -table에서id,header사용시 id는 “t-”로 시작한다. 마찬가지로 개발단에서 변경가능하나 headers도 동일하게 매칭되도록 주의. • -html단에서 기입한 주석은 실제 개발시 삭제요망 다음 페이지

Samsung B2B 이민정 /html/batch1/sample.jsp 9 1 2 3 4 5 6 7 8 다음 페이지

Samsung B2B 이민정 /html/batch1/sample.jsp 1 2 3 4 5 6

Samsung B2B 이민정 • Directory 구조도 • common • b2b4 • css • samsung.css • navigation.css • module.css • pages • sign.css • error_nav.css • [1depth_categoryName].css : menu명과 동일 • error • flash • font • img • js • video • uk[국가별] • b2b4 • 상동

Samsung B2B 이민정 /html/html_list.html 1 2

B2B_Front HTML coding guide