id, name, class 속성에 대한 사용법이 궁금합니다.
조회수 15022회
제목 그대로 id, name, class 속성에 대한 정확한 사용법이 궁금합니다.
야무 선생님 강의를 보다보면 위 속성을 굉장히 자주 사용하시는데
미션을 하다보면 위 속성을 사용을 해야하는지? 또는 어떤 속성을 사용해야 하는지 헷갈리는 경우가 많아서요.
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
안녕하세요 기수님 ^ ㅡ ^
질문 주신 3가지 속성의 각 쓰임새는 다음과 같습니다.
id 속성
고유한 식별을 목적으로 하는 경우 사용합니다.
class 속성
재사용을 목적으로 하는 경우 사용합니다.
name 속성
form 컨트롤 요소의 값(
value
)을 서버로 전송하기 위해 필요한 속성입니다.
각 속성 별 사용 예시
id 속성
"애플리케이션의 고유 영역 식별자"
'뉴스' 영역과 '히어로즈' 영역을 구분 짓는 고유한 이름
<section id="front-end-news"> <h1>프론트엔드 개발 뉴스</h1> ... </section> <section id="front-end-heroes"> <h1>프론트엔드 개발 히어로즈</h1> ... </section>
"레이블과 인풋 컨트롤을 연결하기 위한 식별자"
'이메일' 레이블 텍스트와 연결된 이메일 인풋 컨트롤
<div class="form-control"> <label for="email">이메일</label> <input type="email" id="email"> </div>
"표와 표 설명을 연결하기 위한 식별자"
표 요소의
aria-describedby
속성과 연결된 표 설명<p hidden id="table-desc">표 설명(요약)</p> <table aria-describedby="table-desc"> <caption>표 제목</caption> ... </table>
class 속성
"재사용을 목적으로 하는 애플리케이션 컴포넌트 식별자"
버튼 컴포넌트 스타일을 일괄적으로 반영하기 위한 클래스 이름
<button type="button" class="button">읽기</button> <input type="button" class="button" value="읽기"> <a href class="button">읽기</a>
요소의 유형과 상관 없이
class="button"
설정 되면 일관된 디자인이 반영됩니다. (예: Bulma Element: Button)
"재사용을 목적으로 하는 애플리케이션 레이아웃 식별자"
레이아웃 스타일을 일괄적으로 반영하기 위한 클래스 이름
<!-- 고정 너비를 가진 컨테이너 스타일을 반영하기 위한 식별자 --> <div class="container"> ... </div> <!-- 컨테이너 요소의 너비를 유연(fluid)하게 변경하는 식별자 추가 --> <div class="container is-fluid"> ... </div>
"재사용을 목적으로 하는 애플리케이션 헬퍼 식별자"
공통 반영되는 헬퍼 스타일을 일괄적으로 반영하기 위한 클래스 이름
<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 속성
"폼 전송 이벤트 발생 시, 서버로 데이터를 전송하기 위한 식별자"
<select
> 요소에 설정된 값을 식별하기 위한 이름<form> <div class="select"> <label for="source-of-info">정보 출처</label> <select name="source-of-info" id="source-of-info"> <option>정보 출처를 선택해주세요.</option> <option>페이스북</option> <option>트위터</option> <option selected>인스타그램</option> ... </select> </div> ... </form>
JavaScript 프로그래밍 코드를 사용하여
<select>
요소의name
속성 값을 식별하여 사용자가 선택한 값을 가져와 출력할 수 있습니다.// JavaScript var form = document.querySelector('form'); var formData = new FormData(form); // name="source-of-info" 정보 값을 출력 formData.get('source-of-info'); // 인스타그램
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력