티스토리 뷰
[Eng/Kor, HTML, Python] Discrepancy between id, class, name elements in HTML / id, class, name 역할의 차이
0_hoonie 2022. 1. 8. 17:49Id element
-. Use for unique identification purpose when build HTML in order to categorize or name well.
<section id="front-end-news">
<h1>FRONT-END-DEVELOPEMENT NEWS</h1>
...
</section>
<section id="front-end-heroes">
<h1>FRONT-END DEVELOPEMENT HEROS</h1>
...
</section>-. Use for connection between label and input control.
<div class="form-control">
<label for="email">이메일</label>
<input type="email" id="email">
</div>
Class attribute
-. Use for re-use purpose for many times.
-. Use for a consistent design or format needed to apply for other several element, like button.
-. Application layout identifier for re-use purposes.
<!-- 고정 너비를 가진 컨테이너 스타일을 반영하기 위한 식별자 -->
<div class="container">
...
</div>
<!-- 컨테이너 요소의 너비를 유연(fluid)하게 변경하는 식별자 추가 -->
<div class="container is-fluid">
...
</div>-. Help identifier for re-use
<body class="is-marginless">
<div class="is-float-left is-clearfix">
...
</div>
...
</body>/* CSS */
.is-marginless {
margin: 0;
}
.is-float-left > * {
float: left;
}
.is-clearfix::after {
content: '';
display: table;
clear: both;
}
Name attribute
-. Required to transmit the value of the form control element to the server
-. This attribute is closely realted to JS.
-. An identifier for transmitting data to a server when a form transmission event occurs.
-> That's why we use name ='q' in order to put word in google search box by selenium.
Google Search Box HTML
<input class="gLFyf gsfi" jsaction="paste:puy29d;" maxlength="2048" name="q" type="text" aria-autocomplete="both" aria-haspopup="false" autocapitalize="off" autocomplete="off" autocorrect="off" autofocus="" role="combobox" spellcheck="false" title="검색" value="" aria-label="검색" data-ved="0ahUKEwi3s57D5KH1AhUba94KHcDxD4UQ39UDCAY">The code what we put word in google search box by using name element.
GoogleSearch = driver.find_element_by_name("q")
GoogleSearch.clear()
GoogleSearch.send_keys("QPD")
GoogleSearch.send_keys(Keys.ENTER)
나는 궁금했었다. 왜 google 검색창에 입력하는 방법을 쓰려면 HTML 코드 중 Name 엘리먼트를 써야 작동하는 걸까? 왜 Class를 쓰면 안되는 걸까?
공부해보니 그 이유는 Name 의 특징에 있었다. Id, Class element와 다르게 데이터 베이스와 유기적 연결을 시켜주는 JS와 연관 있는 element가 바로 Name 이었기 때문! 일반적인 Class 와 Id element는 식별자의 기능이 강했다.
JS로 인해 폼 전송 이벤트 발생 시 서버로 데이터를 전송하기 위한 역할이 가능 한 것이 바로 name속성이었기 때문!
또 추가로 알게 된 것, Class 와 Id 는 사실상 차이가 없고, 그냥 naming을 해줄때 보다 더 깔끔히 categorized를 위해서, 또는 그 HTML 을 더욱 손쉽게 분석하고 유지보수하기 위해서 여러번 사용 할 거냐, 해당 HTML페이지에서 단 한번 만 사용할거냐의 목적에 따라 사용이 달라지는 것인 것 같다.
일정한 포맷을 여러번 재사용해야하는 경우 Class, 딱 한번 고유의 속성으로 사용할 것이면 Id를 사용하는것!
물론, 실제로 id element를 한 HTML 페이지 안에서 여러번 사용하면 오류가 발생하도록 문법이 설정되어있기도 하다.
상기 내용 정리는 전적으로 Hash Code의 야무쌤님의 답변을 참고해서 재 갈무리 하였습니다. 감사합니다.