제이쿼리 메서드

인프런 커뮤니티 질문&답변

Minji Kim

작성한 질문수

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

27. 제이쿼리(jQuery) 필수 핵심이론(요소탐색 메서드 – children, siblings)

작성

145

안녕하세요 강사님,

27. 제이쿼리 필수 핵심이론 (요소탐색 메서드 - children, siblings)의 강의를 듣던 중 이해가 안되는 부분이 있어서 글남깁니다.

이전 강의에서 강사님께서 분명 display: Inline;과 Inline-block;의 경우 부모요소에 text-align: center; 를 받아야 하며, block의 경우 margin: auto;를 받아야 한다고 하셨는데,

왜 여기서는 아래에 보시다시피 display: block; 인데 margin: auto; 가 아닌 text-align: center;로 받는 건가요?

<style>

.menu {

padding: 0;

list-style: none;

width: 200px;

/* border: 1px solid red;*/

}

.menu li > a {

background-color: #000;

color: #fff;

display: block;

text-align: center;

padding: 5px;

border: 1px solid #ddd;

}

.sub-menu {

border: 1px solid black;

display: none;

}

.sub-menu a {

display: block;

text-align: center;

padding: 5px;

}

</style>

</head>

<body>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</body>

</html>

항상 강사님의 자세한 답변과 강의에 다시 한번 감사드리며, 번거롭게 해드려 죄송합니다.

웹 디자인 HTML/CSS jquery

답변 1

코딩웍스(Coding Works)

지식공유자

요소를 중앙에 보낼 때 요소의 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태그 입니다.

이 부분이 너무 중요합니다. 하지만 아직 익숙해지시기 전까지 좀 헛갈리실 수 있어요. 답변 보시고 이해 안되시면 또 질문 주세요~^^

Minji Kim

작성한 질문수

전체 Q&A

질문하기