it세미나 naming guidlines for html
DESCRIPTION
TRANSCRIPT
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
IT 사업팀 개발 표준Naming Guidelines for HTML
참고 : NHN Naming Guidelines
협업부서를 위한 HTML Validation GuidelineHTML Validation Guidelines 의 목적은 웹 표준화팀과 협업관계에 있는 모든 부서에 대하여 적법한 HTML 마크업의 사용을 지원하기 위함입니다. NHN 에서 생성되는 대부분의 웹페이지 HTML 마크업은 웹 표준화팀으로부터 생성되는데 웹 표준화팀은 HTML 의 문법과 의미에 대한 유효성 검증을 마친 후 검증이 끝난 문서를 협업부서에 전달합니다. 그리고 협업부서는 제한적으로 이것을 수정하거나 추가하는 것이 가능합니다. 이 가이드는 이미 유효성 검증이 끝난 문서를 협업부서에서 다시 편집하면서 유효성을 상실하게 되는 것을 예방하고, 문제가 발생한 경우 어떻게 해결해야 하는지에 대하여 설명하고 있습니다.
1. 흔히 발생하는 오류에 대처하기 2. 적법한 HTML 마크업의 기준 3. 유효한 문법을 유지하는 방법 4. 적절한 의미를 유지하는 방법 5. Update History
(X) 허용 안함 (△) 예외 허용 (O) 적극 권장 1. 흔히 발생하는 오류에 대처하기 흔히 발생할 수 있는 오류를 미리 소개하고 HTML 마크업의 유효성이 상실되는 것을 예방하고자 합니다.
1. DTD 선언을 임의로 삭제하지 않습니다 DTD 선언을 임의로 삭제하는 실수는 흔히 발생하지 않지만 발생하는 경우에 치명적 입니다. DTD 선언이 없는 것은 문법적으로 유효하지 않으며 CSS 레이아웃이 상당부분 깨지는 문제가 발생합니다.
2. 태그의 중첩을 엄격하게 지킵니다 form 요소의 그룹핑을 변경하는 경우 태그의 중첩이 깨지는 상황이 흔히 발견됩니다. 특히 tr 과 td 사이에 form 의 시작과 닫기 태그를 넣는것도 중첩 오류 입니다. form 은 table 요소 바깥쪽에 마크업 합니다. 또한 <head>~</head>와 <body>~</body> 밖에는 <!DOCTYPE>선언과 <html>엘리먼트를 제외한 어떤 HTML 엘리먼트도 존재해선 안됩니다.
3. 특수문자는 Entity 코드로 변환합니다 Entity 로 변환하지 않은 특수문자는 모두 오류코드로 판정됩니다. 사용자에 의하여 글쓰기 폼에 입력된 특수문자가 Entity 로 변환되지 않고 출력되는 경우가 많습니다. 그리고 하이퍼링크의 URI 속에도 Entity 로 변환하지 않은 특수문자 '&' 를 사용하는 사례가 많습니다. '&'의 Entity 코드는 '&' 입니다. 더 많은
페이지 | 1
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
특수문자의 Entity 이름을 참조하세요 HTML Latin-1 , HTML Symbols . 4. <img> 요소에 alt="대체텍스트" 속성을 포함합니다
<img> 요소에는 대체 텍스트 기능을 수행하는 alt 속성을 반드시 포함시켜야 합니다. 포함하지 않는 경우에는 문법적으로도 오류 입니다.
5. <script> 요소에는 type="text/javascript" 속성을 반드시 표기합니다 <script> 요소에 type="text/javascript" 라고 표시하지 않는 것도 유효하지 않은 문법 입니다..
6. <script> 요소는 <head>~</head>와 <body>~</body> 안쪽에만 기술합니다 <head>~</head>요소와 <body>~</body>요소 밖에 기술하는 경우 유효하지 않은 문법이 됩니다.
7. <style> 요소는 <head>~</head> 안쪽에 기술합니다 <style> 요소는 <head>~</head> 안에 기술되어야 합니다. 과거에는 body 요소 안쪽에 기술하는 사례도 있었으나 잘못된 방법입니다.
8. inline 엘리먼트 안쪽에 block 엘리먼트를 사용할 수 없습니다 inline 엘리먼트란 a, span 등과 같이 개행되지 않는 엘리먼트 이며, block 엘리먼트란 p, div 등과 같이 개행되는 엘리먼트 입니다. inline 형식의 엘리먼트 안쪽에는 block 형식의 엘리먼트를 포함시킬 수 없습니다. 잘못된 예) <span><div>...</div></span>, <a><p>...</p></a>
9. DTD 가 XHTML 형식일 때에는 닫기와 따옴표를 생략할 수 없습니다 태그 안쪽에 내용을 포함하지 않는 엘리먼트라도 닫혀야 합니다. 예) <img> → <img /> 속성의 값은 반드시 쌍따옴표(또는 따옴표) 안에 표기 합니다. 예) <img src=blank.gif /> → <img src="blank.gif" />
2. 적법한 HTML 마크업의 기준
문법이 유효해야 합니다 선언된 DTD 와 W3C 의 표준 명세에 따라서 HTML 문법에 오류가 없어야 합니다. W3C Markup Validation 페이지에서 유효성이 인증된 문서는 유효한 문법을 지녔다고 판단합니다. 하나의 페이지에 1 개의 오류가 존재하더라도 이 문서는 유효하지 않습니다.
의미가 적절해야 합니다 가장 적합한 의미를 지닌 태그로 마크업 하여야 합니다. 기계는 콘텐츠의 의미를 자동으로 해석해서 마크업 해주지 못하므로 의미있는 태그의 마크업과 이것에 대한 검증은 반드시 사람이 진행해야 합니다. 3. 유효한 문법을 유지하는 방법 유효한 문법의 기준은 W3C Markup Validation 검사결과에서 오류가 발견되지 않는 것입니다. 웹 표준화팀에서 작성한 HTML 마크업의 중첩 구조를 되도록 변경하지 않는 것이 안전 합니다. 그러나 새로운 HTML 요소를 추가하거나 id/class 또는 javascript 코드를 추가하는 상황은 불가피 하기 때문에 안전하게 새로운 코드를 작성하여 유효성을 해치지 않는 방법을 소개하면 다음과 같습니다.
표준 계열의 웹 브라우저를 이용한 렌더링 테스트 표준 계열의 웹 브라우저로서 오픈소스 브라우저인 Firefox 를 권장합니다. Firefox 는 Internet Explorer 보다 오류에 민감하고 다양한 디버깅 도구를 활용할 수 있기 때문에 오류를 발견해 내기가 수월합니다.
Firefox 의 HTML Validator 부가기능 활용 W3C Markup Validation 서비스는 보안된 페이지에 접근할 수 없고 매번 웹 사이트에 접속해서 결과를 확인해야 하는 불편함이 존재합니다. 따라서 Firefox 브라우저에 장착되는 부가기능인 HTML Validator 를 권장합니다. Firefox + HTML Validator 를 이용하면 검사결과 페이지에 접속하지 않더라도 실시간으로 웹 브라우저의 상태표시줄에 HTML 문법의 오류갯수를 출력해줍니다. 오류 메시지를 클릭하면 오류코드의 위치와 오류의 원인이 표시되므로 메시지에 따라 적절하게 디버깅 할 수 있습니다.
페이지 | 2
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
W3C 의 Markup Validation 검증 결과와 오류수준 일치 시키기 Firefox 의 부가기능인 HTML Validator 는 HTML 문법을 검증하는 두 가지 알고리즘이 있습니다. W3C 의 Markup Validation 검증결과와 오류 수준을 일치 시키기 위하여 SGML Parser 알고리즘을 선택합니다.
4. 적절한 의미를 유지하는 방법 웹 표준화팀에서 작성한 HTML 마크업의 의미 구조를 되도록 변경하지 않는 것이 안전 합니다. 그러나 동적인 UI 를 구현할 목적으로 콘텐츠나 문자를 다시 그룹핑 해야 하는 경우 다음과 같은 특징에 유의 합니다. 아래 소개하는 두 개의 HTML 요소는 스스로 아무런 의미를 갖지 못하지만 사용 목적은 다르므로 용도에 알맞게 사용합니다.
div 블럭 요소. 의미 없음. 콘텐츠 블럭을 섹션 단위로 그룹핑하거나 분리시키는 요소. 콘텐츠의 그룹핑과 배치 목적으로 사용됨.
페이지 | 3
2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진
span 인라인 요소. 의미 없음. 문자를 스타일 단위로 그룹핑하거나 분리시키는 요소. 문자의 스타일 지정과 배치용으로 사용됨. 동적인 UI 를 구현하는 경우라도 새로운 요소를 추가하는 것보다는 주어진 마크업과 id/class 이름을 최대한 활용하는 것이 좋습니다.
페이지 | 4