Samla's Study

 

html 요소에 "이름"을 부여하는 2가지 방법

• 클래스 (class)
• 아이디 (id)

 

클래스 (class)

<style>
	.big-red-text{
    	color: red;
        font-size: 50px;
    }
</style>


<p class="big-red-text">1st paragraph</p>
<p>2nd paragraph</p>
<p class="big-red-text">3rd paragraph</p>

• "big-red-text"라는 클래스로 선언된 첫째, 셋째 단락에 대해서 css 스타일 적용
• css 설정시 class 이름앞에 ". (마침표)" 입력할 것!!!

 

아이디 (id)

<style>
	#strong-text{
   		color: red;
		font-size: 50px;
		}
    
    #em-text{
    	color: blue;
	    font-size: 30px
	    }

</style>


<p id="strong-text">1st paragraph</p>
<p>2nd paragraph</p>
<p id="em-text">3rd papragraph</p>

• "strong-text"라는 아이디로 선언된 첫째, "em-text"라는 아이디로 설정된 셋째 단락에 각각의 css 스타일 적용
• css 설정시 id 이름앞에 "# (해쉬)" 입력할 것!!!

 

클래스 / 아이디 비교

• 같은 클래스 이름을 여러 요소가 공유할 수는 있지만 아이디는 한 요소에만 부여 가능
• 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있음.