<css 공부> 5장. 클래스와 아이디
이번장에서는 클래스와 아이디에 대해 다뤄보도록 하겠습니다!
먼저, 아이디에 대해 정의해보겠습니다.
◈ ID (아이디)
-> 하나의 문서에서 가질 수 있는 유일한 고유식별자
-> 요소를 가리킬 때, 특정 요소를 식별할 때 사용
무슨 말인지 이해가 가시나요?
ID는 하나의 문서에서 가질 수 있는 유일한 고유식별자입니다.
즉, 한 문서당 하나의 ID만 존재할 수 있다는 것이죠!
ID명을 중복해서 쓸 수 있습니다만, 나중에 골치 아파지기 때문에 매우 매우 비추천하는 방법입니다.
만약, html만 사용할 것이라면 ID 중복은 가능합니다.
예를 들어, div에 orange라는 아이디를 부여했다고 합시다.
그러면 <div id="orange"></div>라고 적을 수 있겠죠?
그리고 위의 div는 orange라는 고유한 값을 가지게 되는 것입니다.
만약, 다른 div 혹은 요소에 id를 부여할 때,
orange는 부여할 수 없는 것입니다.
그리고 한 가지 더 주의해야 할 사항이 있는데
하나의 태그에는 하나의 아이디만 적용할 수 있습니다.
<div id="orange apple"> 이렇게 작성할 수 없다는 것이죠!
이해가 되셨나요?
정리해보겠습니다.
ID는 하나의 문서에서 가질 수 있는 유일한 고유식별자로
한 문서당 같은 하나의 아이디를 쓰는 것이 원칙입니다.
물론, 같은 ID명을 쓸 수 있지만 매우 매우 비추천합니다.
그리고 ID는 하나의 태그에 하나만 적용할 수 있습니다.
아이디에 대해 알아봤으니, 이제는 클래스에 대해 알아보겠습니다!
◈ 클래스 (Class)
-> 요소를 식별할 때 사용하는 식별자
-> 요소를 가리킬 때, 그룹으로 묶어서 지정할 때 사용
정의를 보고 아하!라고 하신 분들이 있으실 것입니다.
제가 위에서 ID를 중복해서 사용하는 건 매우 비추천이라고 했었죠?
왜냐하면 중복된 식별자는 ID 대신 Class를 많이 쓰기 때문입니다.
그리고 나중에 가면 느끼시겠지만, ID를 쓰는 일 보다 Class를 쓰는 일이 더 많으실 것입니다.
Class는 하나의 식별자로 사용할 수도 있고, 여러 개를 묶어서 사용할 수도 있기 때문이죠!
즉, <div class="orange apple"></div> 이런 식으로 작성이 가능하답니다!
게다가, <div class="orange"></div> <div class="orange"></div> 이런 식으로 작성이 가능합니다!
그리고 orange에 속성을 주면 2개의 div 모두 변경이 되는 것이죠!
이런 식으로 요!
이해가 되시죠??
정리해보겠습니다.
Class는 요소를 가리킬 때 사용하는 식별자입니다.
그리고 Class는 중복 사용이 가능하고,
중복 사용한 클래스명에 스타일을 지정해주게 되면
그 클래스명을 가진 모든 요소에 동일한 스타일이 적용되게 됩니다.