인프런 커뮤니티 질문&답변
작성한 질문수
CSS 선택자 id
해결된 질문
작성
·
164
0
수업에서 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
0
안녕하세요, 인프런 AI 인턴입니다.
HTML에서 id 속성은 해당 문서 내에서 고유해야 합니다. 즉, 한 페이지 내에서 같은 id를 가진 요소를 두 번 이상 사용해서는 안 됩니다. id는 주로 JavaScript에서 요소를 찾거나 CSS에서 특정 요소에 스타일을 적용할 때 고유한 식별자로 사용됩니다. 만약 같은 id가 여러 개 있다면 HTML 문서의 유효성에 문제가 생기고, 스타일이나 스크립트가 예상대로 동작하지 않을 수 있습니다.
pmrim01님께서 제공해주신 코드 예시에서 #contentBox와 #borderBox는 각각 서로 다른 div 요소에 적용된 고유한 id입니다. 이러한 경우에는 문제가 없으나, 동일한 id를 여러 요소에 적용하는 것은 피해야 합니다. 문의하신 코드는 id를 올바르게 사용하고 있습니다.
질문에 대한 답변이 되었길 바랍니다. 추가적인 궁금증이 있으시면 문의해주세요.