HTML에서 id와 class 속성의 차이점은 무엇입니까?-HTML 튜토리얼-php.cn

HTML에서 id와 class 속성의 차이점은 무엇입니까?

青灯夜游

풀어 주다： 2019-04-15 11:23:47

원래의

15152명이 탐색했습니다.

HTML에서는 id와 class 속성을 자주 사용합니다. 두 속성은 비슷한 기능을 가지고 있는데 그 차이점은 무엇인가요? 다음 기사에서는 HTML의 id와 class 속성을 간략하게 비교하고 HTML의 id와 class 속성의 차이점을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다. [동영상 튜토리얼 추천: HTML 튜토리얼]

HTML에서 id와 class 속성의 차이점은 무엇입니까?

HTML id 속성

id 속성은 문서를 지정하는 데 사용되는 고유 식별자이며, id는 페이지의 다른 모듈을 구별하는 데 사용될 수 있습니다. . CSS와 JavaScript는 id 속성을 사용하여 고유 요소에 대한 특정 작업을 수행합니다. CSS에서 id 속성은 # 기호 뒤에 id를 사용하여 작성됩니다.

기본 구문:

HTML:

<element id =“id_name”>

로그인 후 복사

CSS 스타일시트:

#id_name {
    // CSS属性
}

로그인 후 복사

예:

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8">
    <title> HTML id 属性 </title> 
      
    <style> 
        #demo{ 
            color:red; 
            font-size:25px; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <h1>Hello World!</h1> 
    <p id="demo">欢迎来到PHP中文网！</p> 
    <p >php从入门到精通，一站式php自学平台！</p> 
</body> 
  
</html>

로그인 후 복사

출력:

HTML에서 id와 class 속성의 차이점은 무엇입니까?

HTML 클래스 속성

class 속성 사용됨 HTML 요소에 대해 하나 이상의 클래스 이름을 지정하려면 class 속성을 모든 HTML 요소에 사용할 수 있습니다. CSS와 JavaScript는 클래스 이름을 사용하여 지정된 클래스 이름을 가진 요소에 대해 특정 작업을 수행할 수 있습니다. CSS 스타일 시트의 클래스 이름은 "." 기호를 사용합니다.

기본 구문:

HTML:

<element class=“class_name”>

로그인 후 복사

CSS 스타일 시트:

.class_name {
    // CSS属性
}

로그인 후 복사

예:

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8">
    <title> HTML class 属性 </title> 
      
    <style> 
        .demo{ 
            color:red; 
            font-size:25px; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <p class="demo">Hello World!</p> 
    <p class="demo">欢迎来到PHP中文网！</p> 
</body> 
  
</html>

로그인 후 복사

출력:

HTML에서 id와 class 속성의 차이점은 무엇입니까?