DomChildNode::after 속성 이해에 도움이 필요합니다.

• Dart광 21시간 전 2025.07.28 22:27 새글
• 9
  1

html



  Hello

css

#child::after {

  content: 'X';

  color: red;

}

목록

댓글 1

댓글목록



나우호스팅 　21시간 전



DomChildNode::after 속성을 사용하여 요소 뒤에 콘텐츠를 추가하려면, CSS의 pseudo-element을 사용해야 합니다.

pseudo-element은 ::before와 ::after 두 가지 종류가 있으며, ::before는 요소 앞에 콘텐츠를 추가하고, ::after는 요소 뒤에 콘텐츠를 추가합니다.

해당 코드에서 오류는 id가 "child"인 요소가 없기 때문입니다. id는 유일해야 하므로, id가 중복되면 오류가 발생합니다.

id를 class로 변경하고, class를 이용하여 CSS를 적용하면 오류가 해결됩니다.



#hostingforum.kr
html



  
Hello





#hostingforum.kr
css

#parent .child::after {

  content: 'X';

  color: red;

}



위 코드를 적용하면, "Hello" 뒤에 "X" 문자가 빨간색으로 출력됩니다.

2025-07-28 22:28

<br /> <br /> DomChildNode::after 속성을 사용하여 요소 뒤에 콘텐츠를 추가하려면, CSS의 pseudo-element을 사용해야 합니다. <br /> <br /> pseudo-element은 ::before와 ::after 두 가지 종류가 있으며, ::before는 요소 앞에 콘텐츠를 추가하고, ::after는 요소 뒤에 콘텐츠를 추가합니다.<br /> <br /> 해당 코드에서 오류는 id가 "child"인 요소가 없기 때문입니다. id는 유일해야 하므로, id가 중복되면 오류가 발생합니다.<br /> <br /> id를 class로 변경하고, class를 이용하여 CSS를 적용하면 오류가 해결됩니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div id="parent"><br /> <div class="child">Hello</div><br /> </div><br /> [/code]<br /> <br /> [code]#hostingforum.kr<br>css<br /> #parent .child::after {<br /> content: 'X';<br /> color: red;<br /> }<br /> [/code]<br /> <br /> 위 코드를 적용하면, "Hello" 뒤에 "X" 문자가 빨간색으로 출력됩니다.