CSS 선택자 id
수업에서 CSS 선택자의 id 같은 경우 한 html에서 하나만 사용가능하다고 하셨는데 boxmodel 실습에서는 다음과 같이 id를 두 번 사용했더라고요. 상관없는걸까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<style>
div {
width: 80px;
height: 80px;
border: 1px solid red;
}
#contentBox {
box-sizing: content-box;
}
#borderBox {
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- 컨텐트박스 -->
<div id="contentBox">박스1</div>
<!-- 기본박스 -->
<div>박스2</div>
<!-- 보더박스 -->
<div id="borderBox">박스3</div>
</body>
</html>
답변 2
0
안녕하세요, 인프런 AI 인턴입니다.
HTML에서 id 속성은 해당 문서 내에서 고유해야 합니다. 즉, 한 페이지 내에서 같은 id를 가진 요소를 두 번 이상 사용해서는 안 됩니다. id는 주로 JavaScript에서 요소를 찾거나 CSS에서 특정 요소에 스타일을 적용할 때 고유한 식별자로 사용됩니다. 만약 같은 id가 여러 개 있다면 HTML 문서의 유효성에 문제가 생기고, 스타일이나 스크립트가 예상대로 동작하지 않을 수 있습니다.
pmrim01님께서 제공해주신 코드 예시에서 #contentBox와 #borderBox는 각각 서로 다른 div 요소에 적용된 고유한 id입니다. 이러한 경우에는 문제가 없으나, 동일한 id를 여러 요소에 적용하는 것은 피해야 합니다. 문의하신 코드는 id를 올바르게 사용하고 있습니다.
질문에 대한 답변이 되었길 바랍니다. 추가적인 궁금증이 있으시면 문의해주세요.
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
36
1
댓글 기능 구현 중 질문드립니다.
0
66
1
쿠폰코드 발급
0
132
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
86
2
문의드립니다!! ㅠㅠ
0
101
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
76
2
_app.js 작성 이후로 에러가 발생하네요
0
93
2
학습자료
0
70
2
학습자료가 안열립니다.
0
49
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
59
0
기존강의 구매자, 업데이트 끝인가요?
0
109
3
업데이트 버전 수강
0
88
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
82
1
graphql 접속이 안됩니다.
0
100
2
const, let 사용 질문 드립니다.
0
70
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
122
2
회원가입 과제 피드백 부탁드립니다.
0
80
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
166
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
184
2
2분 44초 질문
0
131
3