class
- ‘큰 그릇’
- 레이아웃이나 컨테이너의 개념으로 생각하고 이들 관점에서 디자인을 입힐 때 사용하면 좋을 듯
- 복수의 요소에 스타일 적용
id
- 고유한 것임을 주장할 때 사용
- 유일한 요소에 스타일 적용
💡 id는 보통 어떤 때 쓰이는 것일까?
의문점이 생긴 이유:
1) id와 class가 유일한 요소에 스타일 적용/복수의 요소에 스타일 적용의 차이만 있다면 id는 언제 쓰는 것이 좋은가? 재사용성을 고려하면 스타일 적용적인 면에서는 class를 쓰는게 좋지 않을까?
2) 배운 걸 한 번 써보고 싶어서 CSS 선택자로 id를 썼는데 보통 스타일적인 요소에는 많이 쓰이지 않는다는 답변을 팀원들과 리뷰하다가 알게 됨! -> 그럼 언제 쓰이는 거지?
ID를 스타일 지정할 때에 많이 쓰지 않는 이유
- 위에서 말한대로 id는 한 페이지당 한 번만 쓸 수 있음 때문에 재사용성이 떨어짐
따라서 반복되는 스타일을 지정할 때에는 잘 사용하지 않는다!
ID가 쓰이는 방법
1) 한 페이지 내에서 앵커 태그의 이동
<a href="#main">메인내용</a>
<main id="main">
</main>- "메인내용" 클릭하면
<main></main>부분의 내용으로 이동하게 됨
<a href="#check1">1절으로 이동하기</a>
<a href="#check2">2절으로 이동하기</a>
<a href="#check3">3절으로 이동하기</a>
<a href="#check4">4절으로 이동하기</a>
<p id="check1">
동해 물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세.<br>
무궁화 삼천리 화려 강산<br>
대한 사람, 대한으로 길이 보전하세.<br>
</p>
<p id="check2">
남산 위에 저 소나무, 철갑을 두른 듯 <br>
바람 서리 불변함은 우리 기상일세. <br>
무궁화 삼천리 화려 강산 <br>
대한 사람, 대한으로 길이 보전하세. <br>
</p>
<p id="check3">
가을 하늘 공활한데 높고 구름 없이 <br>
밝은 달은 우리 가슴 일편단심일세. <br>
무궁화 삼천리 화려 강산 <br>
대한 사람, 대한으로 길이 보전하세. <br>
</p>
<p id="check4">
이 기상과 이 맘으로 충성을 다하여 <br>
괴로우나 즐거우나 나라 사랑하세. <br>
무궁화 삼천리 화려 강산 <br>
대한 사람, 대한으로 길이 보전하세. <br>
</p>
- 책갈피처럼 사용 가능
-> n절로 이동하기 누르면 스크롤이 n절에 해당하는 내용에 위치하면서 n절의 내용을 보여주게 된다
2) 섹션 ID를 사용해 특정 섹션으로 이동시킬때
- ex) https://www.naver.com/#timesquare
-> timesqure 섹션으로 이동
이부분은 완전한 이해가 아니라서 다시 공부해야할것같음
3) form 관련 태그 작성 시 label과 input /select 같은 요소를 연결할때
<label for="user-name">이름</label>
<input type="text" id="user-name" />
- 참고: MDN label
4) 자바스크립트 사용 시 특정 요소 선택할 때
💻 Front-end 개발자 지망생 연이입니다. 🚀