교육
채용
코딩테스트
인증시험로그인기업서비스

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

조회수 14697회
좋아요

0

싫어요

제목 그대로 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'); // 인스타그램
    • (•́ ✖ •̀)
      알 수 없는 사용자

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

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

로그인
가입하기
(ಠ_ಠ)
(ಠ‿ಠ)