CSS - '클래스(class)'와 '아이디(id)' 정리

HTML 요소에게 '이름' (별명? 닉네임?) 을 주는 방법은 두 가지가 있습니다

아래 코드에서 첫 번째 <p>태그와 세 번째 <p>태그는 "big" 이라는 이름의 클래스를 갖고 있습니다. 그러면 css에서 .big 에 스타일을 입혀주면 됩니다. 클래스 이름이라는 걸 나타내는 기호는 '.(마침표)' 입니다.

<HTML>

<p class="big">First</p>
<p>Second</p>
<p class="big">Third</p>

<CSS>

.big {
  color: blue;
  font-size: 48px;
}

결과화면 >

아래 코드에서 첫 번째 <p> 태그는 "test"라는 이름의 id를 갖고 있습니다. 그러면 css에서 #test 에 스타일을 입혀주면 됩니다. 아이디(id) 를 나타내기 위한 기호는 '#(샾 표시)' 입니다.

<HTML>

<p id="test">First</p>
<p>Second</p>
<p>Third</p>

<CSS>

#test {
  color: blue;
  font-size: 48px;
}

결과화면>

클래스와 아이디는 사용할 수 있는 방법면에서 차이가 있습니다.

1. 같은 클래스(class) 이름은 여러 요소(여러 태그)가 가질 수 있는 반면, 같은 아이디(id)는 여러 요소가 공유할 수 없습니다.

2. 한 요소가 여러 클래스를 가질 수는 있지만, 한 요소는 하나의 아이디만 가질 수 있습니다. (단, 한 요소가 여러개의 클래스를 갖고, 아이디도 하나 가질 수 있습니다)

CSS - margin & padding 차이점, 사용법 (0)	2022.04.28
언어별 주석 처리 방법 (C, JAVA, CSS, HTML, SQL, Python 등) (0)	2022.04.28
CSS - 기본 속성 정리 style, 폰트크기, 텍스트 정렬, 색상, 여백 (0)	2022.04.28
CSS - 속성 상속 개념과 예시 코드 (0)	2022.04.28
CSS - 속성 단위 px, rem, em, % 사용예시, 계산 기준 (0)	2022.04.28