DomChildNode::after 속성에 대한 질문

• 풀스택꿈나무 4일 전 2025.03.12 18:59
• 1
  1

html

아래는 자식 노드입니다.

자식 노드

css

#parent::after {

  content: " ";

  background-color: blue;

  color: white;

  padding: 10px;

  border-radius: 5px;

  position: relative;

  left: 50px;

}

목록
수정 삭제

댓글 1

댓글목록



나우호스팅 　4일 전



DomChildNode::after 속성은 CSS의伪요소 중 하나로, 요소 뒤에 내용을 추가할 때 사용됩니다.

DomChildNode::after 속성에 스타일을 적용하려면, CSS에서 `::after` 속성을 사용하여 스타일을 정의하면 됩니다.

예를 들어, 아래 코드에서 `#parent::after` 속성을 사용하여 요소 뒤에 내용을 추가하고 스타일을 적용했습니다.



#hostingforum.kr
css

#parent::after {

  content: "";

  background-color: blue;

  color: white;

  padding: 10px;

  border-radius: 5px;

  position: relative;

  left: 50px;

}



그러나 `left` 속성이 적용되지 않는 이유는 `position` 속성이 `relative`로 설정되어 있기 때문입니다.

`position` 속성이 `relative`로 설정된 경우, `left` 속성은 요소의 왼쪽 위치를 변경하지 않고, 요소의 상대적인 위치를 변경합니다.

따라서, `left` 속성이 적용되지 않는 이유는 `position` 속성이 `relative`로 설정되어 있기 때문입니다.

`position` 속성을 `absolute`로 설정하면, `left` 속성이 적용됩니다.



#hostingforum.kr
css

#parent::after {

  content: "";

  background-color: blue;

  color: white;

  padding: 10px;

  border-radius: 5px;

  position: absolute;

  left: 50px;

}



또한, `::after` 속성은 요소 뒤에 내용을 추가할 때 사용되므로, `display` 속성을 `block`으로 설정하면, 요소 뒤에 내용이 정상적으로 표시됩니다.



#hostingforum.kr
css

#parent::after {

  content: "";

  background-color: blue;

  color: white;

  padding: 10px;

  border-radius: 5px;

  position: absolute;

  left: 50px;

  display: block;

}

2025-03-12 19:00

<br /> <br /> DomChildNode::after 속성은 CSS의伪요소 중 하나로, 요소 뒤에 내용을 추가할 때 사용됩니다. <br /> <br /> DomChildNode::after 속성에 스타일을 적용하려면, CSS에서 `::after` 속성을 사용하여 스타일을 정의하면 됩니다. <br /> <br /> 예를 들어, 아래 코드에서 `#parent::after` 속성을 사용하여 요소 뒤에 내용을 추가하고 스타일을 적용했습니다.<br /> <br /> [code]#hostingforum.kr<br>css<br /> #parent::after {<br /> content: "";<br /> background-color: blue;<br /> color: white;<br /> padding: 10px;<br /> border-radius: 5px;<br /> position: relative;<br /> left: 50px;<br /> }<br /> [/code]<br /> <br /> 그러나 `left` 속성이 적용되지 않는 이유는 `position` 속성이 `relative`로 설정되어 있기 때문입니다. <br /> <br /> `position` 속성이 `relative`로 설정된 경우, `left` 속성은 요소의 왼쪽 위치를 변경하지 않고, 요소의 상대적인 위치를 변경합니다. <br /> <br /> 따라서, `left` 속성이 적용되지 않는 이유는 `position` 속성이 `relative`로 설정되어 있기 때문입니다. <br /> <br /> `position` 속성을 `absolute`로 설정하면, `left` 속성이 적용됩니다.<br /> <br /> [code]#hostingforum.kr<br>css<br /> #parent::after {<br /> content: "";<br /> background-color: blue;<br /> color: white;<br /> padding: 10px;<br /> border-radius: 5px;<br /> position: absolute;<br /> left: 50px;<br /> }<br /> [/code]<br /> <br /> 또한, `::after` 속성은 요소 뒤에 내용을 추가할 때 사용되므로, `display` 속성을 `block`으로 설정하면, 요소 뒤에 내용이 정상적으로 표시됩니다.<br /> <br /> [code]#hostingforum.kr<br>css<br /> #parent::after {<br /> content: "";<br /> background-color: blue;<br /> color: white;<br /> padding: 10px;<br /> border-radius: 5px;<br /> position: absolute;<br /> left: 50px;<br /> display: block;<br /> }<br /> [/code]