문서구조
01. 코딩방식
02. 크로스 브라우징을 원칙
-
- 제작 되는 모든 웹페이지는 아래 해당 웹브라우져 버전에서 호환되도록 제작하는 것을 원칙으로 하되, 프로젝트 성격에따라 다를 수도 있습니다. (국내
2009웹표준화 사업의 일환으로 최소 3개 브라우저에서 호환되도록 작업.)
-
- 각 최신버전 기준이며, IE의 경우 프로젝트에 따라서 다를 수 있음.
Internet Explorer / Firefox / Mac Safari / Opera / Chrome
03. 문서 제작시 기본 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
<link rel="stylesheet" type="text/css" href="/css/common.css">
<script type="text/javascript" src="/js/common.js"></script>
</head>
<body>
</body>
</html>
04. 각 태그의 어트리뷰트 속성들에 값들은 항상 "(따옴표)를 사용합니다.
td class=a → (X)
td class="a" → (O)
a href=a → (X)
a href="a" → (O)
div id=a → (X)
div id="a" → (O)
05. 들여쓰기 (TAB키로구분 - 4 SPACE KEY).
<![CDATA[
<div class="wrap">
<div>
<h1><span>UID</span></h1>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
<ol>
<li>list num1</li>
<li>list num2</li>
<li>list num3</li>
</ol>
</div>
<div>
<table>
<caption>테이블 제목, 설명글</caption>
<colgroup>
<col style="">
<col style="">
<col style="">
<col style="">
</colgroup>
<tfoot>
<tr>
<th scope="row">제목</th>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" rowspan="2">내용</th>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
<tr>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
</tbody>
</table>
</div>
</div>
]]>
HTML 주석
-
- 단락의 처음과 끝 영역에 대하여 간략한 설명과 같이 적어 놓습니다.
예) <!-- gnb --> 내용 <!-- //gnb --> , <!-- contents --> 내용
<!-- //contents -->
-
- 수정주석은 수정된 단락의 처음부분과 끝나는 부분에 주석을 적어 놓습니다. 끝나는 부분의 주석은 // 처리를 하여 끝부분임을 알려줍니다.
예) <!-- YYMMDD_수정 --> 내용 <!-- //YYMMDD_수정 -->
-
- 한줄만 수정되는 간략한 경우는 해당태그 맨끝에 공백(스페이스)후 주석을 넣어줍니다.
<p>hellow world!</p> <!-- YYMMDD_수정 -->
태그속성순서
-
- class를 가장 앞으로 두며 필요에 따른 값은 추가 되며 style은 가장 마지막에 적습니다.
<input type=”text” class=”input” id=”” value=”” name=”” title=”” style=””>
<input type="radio" class="rdo" id="" value="" name="" style=””>
<input type="checkbox" class="chk" id="" value="" name="" style="">
<input type="file" class=”” id=”” value="" name="upload" title="" style="">
이미지태그
-
- 의미없는 이미지라면 alt값을 공백으로 비워둡니다.
-
- 텍스트나 의미있는 이미지라면 해당 텍스트내용, 어떤 이미지인지에 대한 설명이 필요합니다.
-
- 예와 같이 이미지에 대한 설명을 적어주며, 이미지라는 단어는 적지 않아도 됩니다. 센스리더에서 읽어줄때 이미지 쏘나타 자동차 라고 읽어주기 때문에 이중으로
읽힘을 방지하기 위함 입니다.
예) <img src=”/images/car/sonata.jpg” alt=”쏘나타 자동차”>
<img src=”/images/car/sonata.jpg” alt=”쏘나타 자동차”
style=””>
-
- 이미지에 넓이와 높이값을 인라인으로 적용하여야 하는 경우는 아래와 같이 적용합니다.
예) <img src=”/images/car/sonata.jpg” width=”100” height=”50” alt=”쏘나타
자동차”>
label
01. input type
-
- label 연결이 있는 경우
<label for="name">이름</label><input
type="text" class="txt" value="" id="name">
-
- label 안에 input을 넣지 않습니다
(O) <label for="name">이름</label>
<input type="text" class="txt" value="" id="name">
(X)
<label for="name">이름<input type="text" class="txt" value=""
id="name"></label>
-
- label 연결이 없을 경우 type1
<input type="text" title="레이블 대체텍스트">
-
- label 연결이 없을 경우 type2
<label for=”name”
class=”hide”>아이디</span>
<input type="text" class="txt"
value="" id="name">
02. radio type, checkbox type
-
- label 연결이 있는 경우
<input type="radio" class="rdo"
id="radio1"><label
for="radio1">radio</label>
<input type="checkbox"
class="chk" id="checkbox1"><label
for="checkbox1">checkbox</label>
-
- label 연결이 없을 경우
<input type="radio" class="rdo" title="레이블
대체텍스트">
<input type="checkbox" class="chk" title="레이블
대체텍스트">
03. select type
04. input type(file)
05. textarea type
table (회원가입폼)
01. 회원가입폼
02. id, headers
-
- 복잡한 테이블(thead, tbody에 복수의 th가 있는 경우)의 경우 scope와 id/headers를 이용합니다.
<th scope="row" id="tb_id1">제목</th>
<td headers="tb_id1">내용</td>
<th scope="row" id="tb_id2">제목</th>
<td headers="tb_id2">내용</td>
03. iframe 사용
<iframe src="경로" width="XXX" height="XXX" scrolling="no" frameborder="0"
title=”불러오는 iframe에 대한 설명”></iframe>
04. link, button 사용
-
- link와 button태그를 사용할 시 디자인적 요소를 추가하기 위하여 <span>,<strong>,<em>등 태그를 사용하게 되는데 a태그와
button태그를 감싸는 형태가 아닌 아래와 같이 안쪽에 넣어 사용할수 있도록 합니다.
<a href=”#”><span>링크</<span></a>
<button type=”button”><span>버튼</span></button>