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 이름앞에 "# (해쉬)" 입력할 것!!!
클래스 / 아이디 비교
- 같은 클래스 이름을 여러 요소가 공유할 수는 있지만 아이디는 한 요소에만 부여 가능
- 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있음.
'Cording > HTML & CSS' 카테고리의 다른 글
[HTML / CSS] CSS 텍스트 속성 (0) | 2019.12.23 |
---|---|
[HTML / CSS] 코멘트 넣기 (0) | 2019.12.21 |
[HTML / CSS] 링크 / 이미지 삽입 (0) | 2019.12.18 |
[HTML / CSS] html 문서 한글 깨짐 해결 Tip (0) | 2019.12.16 |
[HTML / CSS] CSS의 기초 (0) | 2019.12.15 |
댓글