HTML - 식별자 속성의 차이

MJ·2022년 7월 5일
0

HTML 

목록 보기
11/27
post-thumbnail

1. ID 속성

하나의 문서 파일에 한 개만 사용할 수 있는 고유한 식별자 입니다.

중복해서 사용할 수 없으며, 식별자 우선순위가 가장 높다.

<div id="이름"> 콘텐츠 </div>



2. CLASS 속성

중복해서 사용할 수 있는 식별자 속성으로, 공통적인 스타일을 여러 요소에 적용시킬 때
사용하는 식별자 입니다.

클래스 간의 구분은 공백으로 구분지으며, 중복되는 클래스를 사용할 때는, 가장 하단에 위치한
클래스 명이 우선적으로 적용 됩니다.

<div class="class class1 class2"> 콘텐츠 </div>
<div class="class"> 콘텐츠2 </div> // 중복 사용 가능



3. NAME 속성

서버에 값을 전송하는 Form 이벤트가 발생하면, 서버로 데이터를 전송하기 위한 식별자 입니다.

CSS 에서는 사용할 수 없으며, CLASS 와 마찬가지로 중복해서 사용할 수 있습니다.

<form action="/examples/media/action_target.php" method="get">
    이름 : <input type="text" name="username"><br> 	//text의 데이터 값을 username 이라는 이름으로 지정하고 서버에 전송합니다.
    이메일 : <input type="email" name="useremail"><br> // 이하 동문 
    <input type="submit">
</form>



4. 식별자 우선 순위

식별자마다 우선순위 값이 있습니다.
우선 순위 값에 따라서, 적용 순서가 바뀝니다.

ID > CLASS > 일반태그들

   <style>
     #id {
        color:red;
     }

     .class2 {
        color:blue;
     }
     
     .class {
        color:aquamarine;
     }
    </style>

<p class="class" id="id"> 응애 </p> // 우선순위 값을 확인하기 위해 ID와 CLASS를 동시 선언
<p class="class2">포도</p>
<p class="class class2">사과</p> // 우선순위 값을 확인하기 위해 CLASS 2개를 동시 선언

IDCLASS 보다 우선순위가 높기에 같이 적용 시, ID 식별자가 적용 됩니다.

우선 순위가 동일한 CLASS를 같이 적용 시, 가장 하단의 작성한 클래스가 적용 됩니다.
즉, 식별자 classclass2 보다 하단의 위치 하므로, class의 식별자가 적용 됩니다.



5. ID CLASS NAME 차이점 요약

profile
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

0개의 댓글