Level2 - 3 animate 와 div박스 질문있습니다.

[이치호]

<button id="modal-button" class="btn btn-danger"> Click </button>
 
<div class="modal-container" id="modal-contain">
<div class="modal-main" id="modal-m">모달 창</div>
</div>

<script>

$('#modal-button').on('click', function(){
$('#modal-contain').animate({marginTop:"0px"}, 4000)
})

</script>

제가 만든 코드는 이렇습니다.

 

볼드체로 표시한 부분에 #modal-contain이라고 쓰면 animate가 작동하지 않고,

container의 하위 div박스의 id명인 #modal-m으로 써야 잘 작동합니다.

왜 상위요소가 아닌 하위요소의 아이디를 선택할 때만 animate가 가능한 걸까요?

 

ps. animate 뿐만 아닌 margin을 정할 때도 이런 문제가 몇 번 있었습니다. 

"자바스크립트는 원래 그렇게 작동한다"라고 생각하면 되는 걸까요? 

아니면 제 HTML 설계가 잘못된 걸까요?

[이치호]

볼드체 설정했는데 <strong>태그로 감싸져있네요 ㅠㅠ 참고해주세요!

[codingapple]

아마도 css 문제같은데요 

박스 두개 모서리가 겹쳐있으면 가끔 마진을 줘도 안먹습니다 

직접 css 스타일 줘서 테스트해보시면 되겠습니다 

[글쓴이]

글