제이쿼리 메서드

Question

안녕하세요 강사님, 27. 제이쿼리 필수 핵심이론 (요소탐색 메서드 - children, siblings)의 강의를 듣던 중 이해가 안되는 부분이 있어서 글남깁니다. 이전 강의에서 강사님께서 분명 display: Inline;과 Inline-block;의 경우 부모요소에 text-align: center; 를 받아야 하며, block의 경우 margin: auto;를 받아야 한다고 하셨는데, 왜 여기서는 아래에 보시다시피 display: block; 인데 margin: auto; 가 아닌 text-align: center;로 받는 건가요? 항상 강사님의 자세한 답변과 강의에 다시 한번 감사드리며, 번거롭게 해드려 죄송합니다.

코딩웍스(Coding Works) · Answer

요소를 중앙에 보낼 때 요소의 display 속성에 따라 2가지로 구분됩니다. 1) text-align: center로 중앙에 보낼 경우 지금 경우는 자기 자신에 text-align: center를 줘서 자기 자신이 중앙으로 가는 것이 아니라, 자신이 중앙으로 가야 하니까 자신의 부모요소(정확히는 상위요소)에 text-align: center를 주는 겁니다. 인라인요소, 인라인블록요소 2가지가 해당됩니다. 참고로 텍스트 자체는 인라인 요소입니다. 2) margin: auto로 중앙에 보낼 경우 지금 경우는 자기 자신이 중앙으로 가는 경우 입니다. 자기 자신이 중앙으로 가는 것이기 때문에 부모요소나 상위요소의 text-align: center와 관계가 없습니다. 물론 자신자신이 중앙으로 가는거라고 모두 갈 수 있는건 아니고 블록요소만 margin: auto를 적용할 수 있습니다. 이 경우도 블록요소가 되면 너비가 100%가 되니까 margin: auto로 중앙에 갔지만 100%라 좌우 움직일 공간이 없으니까 확인이 안됩니다. margin: auto를 준 경우 부모요소 너비보다 작아야 자신이 중앙으로 간 것을 확인할 수 있습니다. .sub-menu a {   display: block;   text-align: center; }   질문이 아마도 위의 코드에서 a를 블록요소로 변경했으니 margin: auto로 a를 중앙에 보내야 하는거 아니냐는 질문인 것 같습니다. 지금의 a에 display: block은 a태그의 너비를 100% 채우고 줄을 바꾸기 위한 display: block이고 a에 준 text-align: center는 a가 품고 있는 자식요소 곧, 텍스트를 a내부에서 중앙정렬 시키는 목적입니다. 위에서도 말했지만 텍스트는 인라인 요소입니다. 텍스트 입장에서 부모요소는 a태그 입니다. 이 부분이 너무 중요합니다. 하지만 아직 익숙해지시기 전까지 좀 헛갈리실 수 있어요. 답변 보시고 이해 안되시면 또 질문 주세요~^^