주메뉴 바로가기 견적문의 바로가기 주내용 바로가기
Blue Red Orange Green Grey
Mobile/HTML5
웹표준, 웹접근성을 고려한 HTML 코딩 작업시 규칙.
입력 2013.01.24 오후 01:57 | 수정 2014.03.12 오후 10:01 | 조회 3,377
x-mind
  1. 기본적으로 Cross브라우징이 가능하도록 한다.
    (
    기준브라우저 : IE7+, Chrome,Opera, Firefox2.0 이상)
  2. DTD속성 지정
    <!DOCTYPE HTML> HTML5
  3. 모든 값은 따옴표 “ ”로 묶어준다.
  4. 홀태그의 마무리는 />로 끝내도록 한다. (위의 DTD속성을 지정할 경우 드림위버에서는 자동으로 생성됨)
  5. UTF-8 언어셋 지정
    - HTML
    파일은 head에 메타태그를 이용하여 charset=utf-8 를 지정한다.
    - CSS
    파일은 최상단에 @charset "UTF-8"를 명시한다.
  6. 이미지 (img) 태그에는 alt태그를 필수적으로 사용하고, width height를 준다.
  7. 색상코드는 #16 진수를 사용한다.
    -
    반복되는 코드의 경우 ex, #000000 => #000, #ff6600=> #f60
  8. 들여쓰기 (Tap키 이용)
    -
    한단계 아래에 속하는 엘리먼트는 Tap을 이용 한 칸 뒤부터 시작하도록 한다.
  9. 이미지 파일명 작성.
    (
    파일명은 역할_의미 이런 식으로 작명하도록 한다
    .) * 고민할 필요 있음
    -
    이미지 폴더 구성을 메뉴별로 구성할 경우와 파일 Charact로 구성할 경우에 따라서 다르게 지정한다.
    -
    메뉴별로 구성할 경우 ex, buymenu.gif, buylogo.gif
    -
    파일 Charact로 구성할 경우 ex, imagesbg, imagestit, imagesicon, imagesflash
  10. id class 사용시 주의 점.
    - id
    는 프로그래밍 할 때 사용되므로, 프로그램에 영향을 미칠수 있으므로, 시각적 표현만 가능할 정도의 스타일만

    지정해주고, 나머지는 class에서 적용하도록 한다.
    - id
    는 한 페이지에 한 번만 사용을 하도록 하고, class는 상위 엘리먼트의 상속을 받아서 여러 번 선언이 가능하다.
  11. Class 네이밍
    (
    엘리먼트를 감싸고 있는 가장 큰 단위(레이아웃) div wrap으로 통일하도록 한다.
    ex, header_wrap, container_wrap, footer_wrap
    .
    -
    가장 큰 단위(wrap) 아래,
    모듈 단위 별 박스는 box로 통일하도록 한다.
    ex, login_box, notice_box, visual_box, banner_box .
  12. 제목(h) 태그
    - h1 (전체 서비스를 대표하는 제목 ex, ESN, 당신이 시장을 만듭니다.)
    - h2 (
    서브 카테고리 서비스의 제목 ex, 자유거래장터, e-기업단신, Co-win)
    - h3 (
    모듈 단위 별 박스 제목 ex, 로그인, 공지사항, e-기업단신, 구매가이드, 미디어보도)
    -
    사이트 성격에 따라서 제목태그의 활용은 변형이 가능하다.
  13. 사이즈 단위는 픽셀 단위를 사용하도록 한다.
    - 0
    픽셀의 경우 px를 명시하지 않는다
    .
    - div { margin : 0 10px 0 10px }
  14. margin, padding 활용법
    -
    하나의 div float를 사용한 객체가 들어갈 경우 반드시 overflow:hidden; 옵션을 준다. 그래야 float 객체의
    높이를 계산하여 유동적으로 높이가 변한다.
    참고 사이트
    : http://naradesign.net/wp/2008/05/27/144
    -
    하나의 div에 여러 개의 엘리먼트로 레이아웃을 만들 경우 반드시, 감싸고 있는 div padding 값을 이용하여
    여백을 생성하도록 한다. (속해있는 객체의 margin으로 여백을 만들지 않도록 한다.)
    참고 사이트
    : http://monoeyes.com/526
  15. 테이블(table)의 활용
    -
    표 형식의 데이터를 출력할 때는 div를 사용하지 않고, 테이블을 사용하도록 한다.
    -
    테이블에서의 불필요한 class의 사용을 자제하기 위해 thead , tbody, tfoot의 사용을 습관화 한다
    .
    -
    tfoot
    의 경우 표데이터를 인쇄할 때 tfoot이 반복되어 인쇄되므로 좋다. (ex, A4 용지 4장 분량을 인쇄할 경우
    합계금액란을 tfoot으로 지정해 놓은 경우 인쇄하면 용지 맨 아래에 항상 합계금액란이 인쇄된다..

[출처] http://flyevan.tistory.com/10
Security number

click to select icon

  • Very Happy
  • Smile
  • Sad
  • Surprised
  • Shocked
  • Confused
  • Cool
  • Laughing
  • Mad
  • Razz
  • Embarassed
  • Crying or Very sad
  • Evil or Very Mad
  • Twisted Evil
  • Rolling Eyes
  • Wink
  • Exclamation
  • Question
  • Idea
  • Arrow
  • Sux
  • Good
  • Very Angry
  • Attention


목록수정삭제인쇄0


Board List
No.제목글쓴이조회등록일
실무에서 많이 쓰는 위주로 순서없이 그때 그때 포스트합니다.x-mind5872015.04.02
HTML5강좌 링크x-mind1,7142012.02.28
23네이버 웹마스터 도구로 사이트 검색엔진에 추가x-mind2182016.04.26
22[HTML5] 안드로이드 및 아이폰에서 input file 사용시 카메라 호...x-mind7172016.04.22
21유투브 동영상을 배경으로x-mind2802016.03.30
20Canvas - 파일로 저장x-mind4542015.09.08
19모바일웹 카카오링크 연동(단순텍스트 링크 보내기)x-mind9572015.06.11
18[링크]나의 웹사이트에 Facebook 계정으로 로그인 하기x-mind8582015.01.22
17[HTML5] 위치정보 사용하기x-mind9942014.10.27
16모바일 브라우저 테스트 도구x-mind1,2952014.03.20
15Safari 브라우저 모바일 모드x-mind1,4612014.03.20
14iScroll을 사용해서 모바일웹에서 내부 스크롤 영역 만들기x-mind1,7812013.03.27
13터치 이벤트를 이용한 사용자 제스처 분석x-mind2,8132013.03.26
12모바일 웹 스크롤 페이징x-mind7,5362013.03.26
11웹표준, 웹접근성을 고려한 HTML 코딩 작업시 규칙.x-mind3,3772013.01.24
10Google Chart Api 이용 QR 코드 생성x-mind1,3152013.01.24
9웹표준 코딩시 주의할점x-mind2,6722012.07.26
8tabindex 속성이 오히려 접근성을 해친다.x-mind2,0972012.04.11
7아이폰, 안드로이드 바탕화면에 바로가기 만들기 4x-mind9,3172012.03.27
6이전버전에서의 HTML5요소 사용x-mind9892012.03.02
5HTML5 API 강좌 #1 – Web Storage 와 Application Cachex-mind1,2172012.02.28
4화면 사이즈에 맞게 이미지 확대x-mind4,1342012.01.27
Copyrightⓒ x-mind.co.kr All rights reserved. 1