여기 쓰여진 글들은 제가 개인적으로 받아들인 방식으로 적어 본 것입니다.
예를 들어 말하기에 정확하게 맞지 않을 수도 있습니다.
HTML태그의 CLASS와 ID
HTML 문서는 '계층구조'로 되어있다.
'계층 구조'는 현실 세계에서 '계급 구조'와 형식이 비슷하고,
아마 대한민국 남성들에게 가장 익숙한 '계급 구조'를 갖고있는 '군대' 로써 class와 id를 설명해 보려고 한다.
<대한민국국군>
<육군>
<본부>
<사령부 class="육군 사령부" id="지상작전사령부">
<군단 class="육군" id="수도군단">
<사단 class="육군 보병" id="○○○○부대"/>
<사단 class="육군 보병" id="○○○○부대"/>
<사단 class="육군 보병" id="○○○○부대"/>
<여단 class="육군 포병" id="○○○○부대"/>
<여단 class="육군 공병" id="○○○○부대"/>
<여단 class="육군 군수" id="○○○○부대"/>
<여단 class="육군 기갑" id="○○○○부대"/>
<여단 class="육군 기갑" id="○○○○부대"/>
</군단>
<군단 class="육군" id="1군단"/>
<군단 class="육군" id="2군단"/>
</사령부>
<사령부 class="육군" id="수도방위사령부">
<사령부 class="육군" id="육군교육사령부">
<사관학교 class="육군" id="육군사관학교">
.
.
.
</육군본부>
</육군>
<해군/>
<공군/>
<해병대/>
</대한민국국군>HTML 구조와 비슷하게 국군 편제(일부, 나무위키 참조)를 작성해 보았다.
- class에는 각각의 기관들을 특성에 따라 묶어줄 때 사용한다.
같은 특성을 지닌 기관이 1개 이상일 수도 있기에 중복이 가능하며,
각각의 기관이 지닌 특성을 1개 이상 설정할 수도 있다. - id는 딱 하나의 기관을 나타낼 때 사용한다. 따라서 중복 값을 가지면 안된다.
HTML태그의 Name
Name은 class와 id, 그러니까 위의 계층구조와는 전혀 상관없이,
html으로 받아든 시험지의 문제 번호라고 생각하면 된다.
<form>
<fieldset>
<legend>1번문제 : 주관식</legend>
<label for="1번문제의답">1번 : </label>
<input type="text" name="1번문제" id="1번문제의답">
</fieldset>
<fieldset>
<legend>2번문제 : 객관식</legend>
<input type="radio" name="2번문제" id="2번문제의1번"><label for="2번문제의1번">1.A</label><br>
<input type="radio" name="2번문제" id="2번문제의2번"><label for="2번문제의2번">2.B</label><br>
<input type="radio" name="2번문제" id="2번문제의3번"><label for="2번문제의3번">3.C</label><br>
<input type="radio" name="2번문제" id="2번문제의4번"><label for="2번문제의4번">4.D</label><br>
</fieldset>
<fieldset>
<legend>3번문제 : 객관식-모두고르시오</legend>
<input type="checkbox" name="3번문제" id="3번문제의1번"><label for="3번문제의1번">1.가</label><br>
<input type="checkbox" name="3번문제" id="3번문제의2번"><label for="3번문제의2번">2.나</label><br>
<input type="checkbox" name="3번문제" id="3번문제의3번"><label for="3번문제의3번">3.다</label><br>
<input type="checkbox" name="3번문제" id="3번문제의4번"><label for="3번문제의4번">4.라</label><br>
</fieldset>
</form>
form을 submit 하면 method 방식에 따라 값을 전달하는 방식이 다르지만,
주소줄로 값을 전송하는 get방식으로 값을 확인해 보면 -->
html?1번문제=답안지& 2번문제=1 & 3번문제=1 & 3번문제=2
전달할 파일주소?name=value &name=value & name=value & name=value
input 태그안에 작성한 name을 '달고' 설정한 값이 넘어가는걸 볼 수 있다. id와는 관계없이
결론 :
- Class는 태그를 특성에 따라 분류해 붙인 것
- ID는 태그에 고유한 이름을 붙인 것
- Name은 시험지의 문제 번호 같은 것
-class와 ID와는 전혀 상관이 없다