HTML 강의내용 중

Question

12:41초 정도에 div태그 btn_wrap을 선언하시고 그 안에 start_btn 과 click_img를 담으시는데요 두가지 궁금한 점이 있습니다! 첫번째는 개발자 도구를 확인해보니 btn_wrap 영역과 start_btn영역의 크기가 동일하여 중복되는것처럼 보여져서wrap으로 감싸고 있는 이유가 잘 이해 되지 않습니다. 또 두번째는 start_btn영역과 btn_wrap영역이 일치되어 있는데 그 안쪽으로 div태그 click_img가 들어오는 것도 이해되지 않아서 질문드립니다! start 안쪽에 그리고 btn_wrap 바깥쪽에 선언되면 안되는걸까요?

say · Answer

이른시간 답변 감사드립니다! 설명내용이 이해하는데에 도움이 되었습니다!! 답변내용 참고하면서 다시 한번 복습해보도록하겠습니다. 좋은 퀄리티의 강의와 자료 제공 감사드려요~!

-J- · Answer

안녕하세요 좋은 질문 감사합니다 :) 첫번째 : 말씀하신것 처럼 btn_wrap 영역과 start_btn영역의 크기가 중복되어 있는것 처럼 보이는 이유는 click_img 요소가 position:absolute 라서 normal flow 에서 벗어났기 때문입니다. 때문에 wrap 으로 감싸고 있는 이유는 position:relative 속성을 주기 위해서 라고 볼 수 있겠습니다. 두번째 : click_img 가 btn_wrap 의 형제 요소로 쓰여도 좋습니다. 저도 좋은 제안이라고 생각합니다! 또한 아예 click_img요소를 제거하고 btn_wrap 의 ::after 속성으로 가상요소로써 이미지를 넣을수도 있다고 생각하구요. HTML 태그는 심플 하면 심플할 수록 좋습니다. 다시 한번 좋은 제안 감사합니다 :) ㅎㅎ