id & class

html内の要素のみに異なる効果を生じさせる場合は、その要素にid値またはクラス名を指定することで処理できます.

id

idのロード時にshop(#)を使用します.

1つの要素にはidが1つしか使用できません.
->再利用不可

1つのIDはページ上で1回しか使用できません.

id例

<h1 id="title">제목</h1>  
<h1 id="title">제목2</h1> <!--사용 불가-->  
<h1 id="title title2 title3">제목</h1> <!--사용 불가-->  

#title{
    font-size : 20px;
}

class

classを読み込んだときのピリオド(.)使用します.

1つの要素

で複数のクラスを使用できます.
->classを追加する場合は、

をスペースで区切ります.

は繰り返し使用でき、同じクラス名は複数のページで使用できます.

クラスの例

<h1 class="title">제목</h1>  
<h2 class="title">제목</h2> 
<h3 class="title color size">제목</h3>   

.title{
    font-size : 20px;
}

.color{
    background-color : red;
}

整理する

idとclassの違いは、idが一意の要素に適用され、cssが複数の要素に適用されることである.

1つのidは1つのドキュメントで1回しか使用できませんが、1つのclassは複数回使用できます.優先度idはclassより高い.

リファレンス

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

https://blog.naver.com/x7788/222449322956

https://heinafantasy.com/155