id, name, class 속성에 대한 사용법이 궁금합니다.

조회수 896회

제목 그대로 id, name, class 속성에 대한 정확한 사용법이 궁금합니다.

야무 선생님 강의를 보다보면 위 속성을 굉장히 자주 사용하시는데

미션을 하다보면 위 속성을 사용을 해야하는지? 또는 어떤 속성을 사용해야 하는지 헷갈리는 경우가 많아서요.

1 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    안녕하세요 기수님 ^ ㅡ ^

    질문 주신 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'); // 인스타그램
    

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.