CSS 선택기 : 콤비네이터

키 테이크 아웃

CSS Selectors는 규칙을 요소와 일치시킵니다. Selectors Level 3 및 Level 4 사양은 여러 새로운 선택기를 소개합니다. 여기에는 새로운 속성 선택기 및 콤비네이터와 다양한 새로운 의사 클래스가 포함됩니다. 콤바네이터는 양쪽의 선택기 사이의 관계를 표현하는 문자 시퀀스입니다. 여기에는 Descondant Combinator (공백), 어린이 조합 (>), 인접한 형제 조합 () 및 일반 형제 조합 (~). 가 포함됩니다. 후손 콤바이터는 지정된 요소의 후손 인 모든 요소를 ​​선택하고, 하위 조합은 지정된 요소의 직접 어린이 인 모든 요소를 ​​선택하고, 인접한 형제 조합기는 지정된 요소의 다음 형제 인 모든 요소를 ​​선택합니다. General Sibling Combinator는 지정된 요소의 형제 인 모든 요소를 ​​선택합니다. CSS 콤비네이터는 의사 클래스 및 속성 선택기와 결합 할 수 있으며 중첩 요소를 스타일링하는 데 사용할 수 있습니다. 그러나 그들은 특이성 자체가 없습니다. 요소 간의 관계를 정의하여 선택기의 특이성을 결정하는 데 도움이됩니다.

CSS 규칙은 선택기와 요소와 일치합니다. 이 작업을 수행하는 방법에는 여러 가지가 있으며 대부분의 사람들에게 익숙 할 것입니다. 요소 유형, 클래스 이름, ID 및 속성 선택기는 모두 잘 지원되는 CSS 선택기이며 널리 사용됩니다. 선택기 레벨 3 및 레벨 4 사양은 여러 새로운 선택기를 소개했습니다. 경우에 따라 기존 유형의 새로운 변형입니다. 다른 경우에는 언어의 새로운 특징이 있습니다.

이 장에서는 새로운 선택기에 중점을 둔 CSS 선택기의 현재 브라우저 환경을 살펴 보겠습니다. 여기에는 새로운 속성 선택기 및 콤비네이터와 다양한 새로운 의사 클래스가 포함됩니다. 선택 섹션에서 셀렉터를 현명하게 선택하면 가 특이성의 개념을 살펴 봅니다.

이 장은 모든 셀렉터를 포괄적으로 보는 것이 부족합니다. 이는 그 자체로 책이 될 수 있습니다. 대신, 우리는 현재 작업에 유용 할 가능성이 높은 브라우저 지원이 좋은 선택기에 중점을 둘 것입니다. 일부 자료는 오래된 모자 일 수 있지만 상황에 포함되어 있습니다.
• 팁 : 셀렉터의 브라우저 커버리지 선택기에 대한 현재 브라우저 지원 상태에 대한 포괄적 인 모습은 CSS4- 선택자에서 찾을 수 있습니다.
• 다음은 Tiffany B. Brown이 저술 한 CSS Master의 책에서 발췌 한 것입니다. 사본은 전 세계 상점에서 판매되거나 여기에서 eBook 양식으로 구입할 수 있습니다. 콤비네이터 콤바네이터는 양쪽의 선택기 사이의 관계를 표현하는 문자 시퀀스입니다. 콤비네이터를 사용하면 복잡한 선택기라고 알려진 것을 만듭니다. 복잡한 선택기는 경우에 따라 스타일을 정의하는 가장 간결한 방법이 될 수 있습니다. 당신은이 조합자들의 대부분에 익숙해야합니다 :
  후손 조합 또는 흰색의 문자

  • 어린이 조합 또는>

  인접한 형제 조합 또는

  • 일반 형제 조합 또는 ~

  • 이 조합기 각각을 설명해 봅시다. 아래에 표시된 HTML 양식에 스타일을 추가하는 데 사용합니다.
    이 양식은 다음의 html 덩어리를 사용하여 만들어졌습니다.
  후손 조합 당신은 아마도 자손 조합에 익숙 할 것입니다. CSS의 초기부터 주변에있었습니다 (CSS2.1까지 유형 이름이 없었지만). 널리 사용되고 널리 지원됩니다.
  • 후손 조합은 단지 공백 문자 일뿐입니다. b

    패턴을 따라 부모 선택기를 후손과 분리합니다. 위에서 마크 업에 CSS를 추가하고 이것이 어떻게 작동하는지 보자.

    우리는 방금 양식 제목의 색상을 변경했습니다. 그 결과는 아래에서 볼 수 있습니다.
  더 많은 CSS를 추가하겠습니다. 이번에는 가격 책정 메시지의 크기를 늘리기 위해 (“티켓은 각각 $ 10입니다”) :
  그러나 아래에서 볼 수 있듯이이 선택기에는 문제가 있습니다. 우리는 실제로 우리가 원하는 것이 아닌 양식 단락의

  모두

  모두 텍스트의 크기를 증가 시켰습니다. 이 문제를 어떻게 해결할 수 있습니까? 어린이 조합을 시도해 봅시다.

  아동 조합 후손 조합과 달리, 어린이 조합 (>)은 요소의

  직계 어린이 만 선택합니다. 그것은 a> b <span><span><span><form</span> method<span>="GET"</span> action<span>="/processor"</span>></span> </span><span><span><span><h1</span>></span>Buy Tickets to the Web Developer Gala<span><span></h1</span>></span> </span><span><span><span><p</span>></span>Tickets are each. Dinner packages are an extra . All fields are required.<span><span></p</span>></span> </span><span><span><span><fieldset</span>></span> </span> <span><span><span><legend</span>></span>Tickets and Add-ons<span><span></legend</span>></span> </span> <span><span><span><p</span>></span> </span> <span><span><span><label</span> for<span>="quantity"</span>></span>Number of Tickets<span><span></label</span>></span> </span> <span><span><span><span</span> class<span>="help"</span>></span>Limit 8<span><span></span</span>></span> </span> <span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span> </span><span><span><span></p</span>></span> </span> <span><span><span><p</span>></span> </span> <span><span><span><label</span> for<span>="quantity"</span>></span>Dinner Packages<span><span></label</span>></span> </span> <span><span><span><span</span> class<span>="help"</span>></span>Serves 2<span><span></span</span>></span> </span> <span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span> </span> <span><span><span></p</span>></span> </span> <span><span><span></fieldset</span>></span> </span><span><span><span><fieldset</span>></span> </span> <span><span><span><legend</span>></span>Payment<span><span></legend</span>></span> </span> <span><span><span><p</span>></span> </span> <span><span><span><label</span> for<span>="ccn"</span>></span>Credit card number<span><span></label</span>></span> </span> <span><span><span><span</span> class<span>="help"</span>></span>No spaces or dashes, please.<span><span></span</span>></span> </span> <span><span><span><input</span> type<span>="text"</span> id<span>="ccn"</span> name<span>="ccn"</span> placeholder<span>="372000000000008"</span> maxlength<span>="16"</span> size<span>="16"</span>></span> </span> <span><span><span></p</span>></span> </span> <span><span><span><p</span>></span> </span> <span><span><span><label</span> for<span>="expiration"</span>></span>Expiration date<span><span></label</span>></span> </span> <span><span><span><span</span> class<span>="help"</span>></span><span><span><abbr</span> title<span>="Two-digit month"</span>></span>MM<span><span></abbr</span>></span>/<span><span><abbr</span> title<span>="Four-digit Year"</span>></span>MM<span><span></abbr</span>></span>YYYY<span><span></span</span>></span> </span> <span><span><span><input</span> type<span>="text"</span> id<span>="expiration"</span> name<span>="expiration"</span> placeholder<span>="01/2018"</span> maxlength<span>="7"</span> size<span>="7"</span>></span> </span> <span><span><span></p</span>></span> </span> <span><span><span></fieldset</span>></span> </span><span><span><span><fieldset</span>></span> </span> <span><span><span><legend</span>></span>Billing Address<span><span></legend</span>></span> </span> <span><span><span><p</span>></span> </span> <span><span><span><label</span> for<span>="name"</span>></span>Name<span><span></label</span>></span> </span> <span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: John Q. Public"</span> size<span>="40"</span>></span> </span> <span><span><span></p</span>></span> </span> <span><span><span><p</span>></span> </span> <span><span><span><label</span> for<span>="street_address"</span>></span>Street Address<span><span></label</span>></span> </span> <span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: 12345 Main Street, Apt 23"</span> size<span>="40"</span>></span> </span> <span><span><span></p</span>></span> </span> <span><span><span><p</span>></span> </span> <span><span><span><label</span> for<span>="city"</span>></span>City<span><span></label</span>></span> </span> <span><span><span><input</span> type<span>="text"</span> id<span>="city"</span> name<span>="city"</span> placeholder<span>="ex: Anytown"</span>></span> </span> <span><span><span></p</span>></span> </span> <span><span><span><p</span>></span> </span> <span><span><span><label</span> for<span>="state"</span>></span>State<span><span></label</span>></span> </span> <span><span><span><input</span> type<span>="text"</span> id<span>="state"</span> name<span>="state"</span> placeholder<span>="CA"</span> maxlength<span>="2"</span> pattern<span>="[A-W]{2}"</span> size<span>="2"</span>></span> </span> <span><span><span></p</span>></span> </span> <span><span><span><p</span>></span> </span> <span><span><span><label</span> for<span>="zip"</span>></span>ZIP<span><span></label</span>></span> </span> <span><span><span><input</span> type<span>="text"</span> id<span>="zip"</span> name<span>="zip"</span> placeholder<span>="12345"</span> maxlength<span>="5"</span> pattern<span>="0-9{5}"</span> size<span>="5"</span>></span> </span> <span><span><span></p</span>></span> </span><span><span><span></fieldset</span>></span> </span> <span><span><span><button</span> type<span>="submit"</span>></span>Buy Tickets!<span><span></button</span>></span> </span><span><span><span></form</span>></span></span>를 따라, 모든 요소 b

  와 일치합니다. 요소가 사람들이라면 비유를 사용하기 위해 아이 조합은 어머니 요소의 자녀와 일치합니다. 그러나 자손 조합은 또한 그녀의 손자와 손자와 일치 할 것입니다. 이전 선택기를 수정하여 Child Combinator를 사용하도록하겠습니다 :

  이제 아래에 표시된 것처럼 기사의 직접 어린이 만 영향을받습니다.

  인접한 형제 콤바이터 인접한 형제 조합 ()을 사용하여 서로를 따르는 요소를 선택하고 동일한 부모를 갖는 요소를 선택할 수 있습니다. 패턴 a b 를 따릅니다. 스타일은 요소가 elements에 적용됩니다. 우리 예로 돌아가 봅시다. 우리의 레이블과 입력은 서로 옆에 앉아 있습니다. 즉, 인접한 형제 조합을 사용하여 별도의 선에 앉게 할 수 있습니다.

  <span><span><span><form</span> method<span>="GET"</span> action<span>="/processor"</span>></span>
  </span><span><span><span><h1</span>></span>Buy Tickets to the Web Developer Gala<span><span></h1</span>></span>
  </span><span><span><span><p</span>></span>Tickets are  each. Dinner packages are an extra . All fields are required.<span><span></p</span>></span>
  </span><span><span><span><fieldset</span>></span>
  </span>	<span><span><span><legend</span>></span>Tickets and Add-ons<span><span></legend</span>></span>
  </span>
  	<span><span><span><p</span>></span>
  </span>		<span><span><span><label</span> for<span>="quantity"</span>></span>Number of Tickets<span><span></label</span>></span> 
  </span>		<span><span><span><span</span> class<span>="help"</span>></span>Limit 8<span><span></span</span>></span>
  </span>		<span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
  </span><span><span><span></p</span>></span>
  </span>
  	<span><span><span><p</span>></span>
  </span>		<span><span><span><label</span> for<span>="quantity"</span>></span>Dinner Packages<span><span></label</span>></span> 
  </span>		<span><span><span><span</span> class<span>="help"</span>></span>Serves 2<span><span></span</span>></span>
  </span>		<span><span><span><input</span> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
  </span>	<span><span><span></p</span>></span>
  </span>
  <span><span><span></fieldset</span>></span>
  </span><span><span><span><fieldset</span>></span>
  </span>	<span><span><span><legend</span>></span>Payment<span><span></legend</span>></span>
  </span>	<span><span><span><p</span>></span>
  </span>		<span><span><span><label</span> for<span>="ccn"</span>></span>Credit card number<span><span></label</span>></span>
  </span>		<span><span><span><span</span> class<span>="help"</span>></span>No spaces or dashes, please.<span><span></span</span>></span>
  </span>		<span><span><span><input</span> type<span>="text"</span> id<span>="ccn"</span> name<span>="ccn"</span> placeholder<span>="372000000000008"</span> maxlength<span>="16"</span> size<span>="16"</span>></span>
  </span>	<span><span><span></p</span>></span>
  </span>	<span><span><span><p</span>></span>
  </span>		<span><span><span><label</span> for<span>="expiration"</span>></span>Expiration date<span><span></label</span>></span>
  </span>		<span><span><span><span</span> class<span>="help"</span>></span><span><span><abbr</span> title<span>="Two-digit month"</span>></span>MM<span><span></abbr</span>></span>/<span><span><abbr</span> title<span>="Four-digit Year"</span>></span>MM<span><span></abbr</span>></span>YYYY<span><span></span</span>></span>
  </span>		<span><span><span><input</span> type<span>="text"</span> id<span>="expiration"</span> name<span>="expiration"</span> placeholder<span>="01/2018"</span> maxlength<span>="7"</span> size<span>="7"</span>></span>
  </span>	<span><span><span></p</span>></span>
  </span>
  <span><span><span></fieldset</span>></span>
  </span><span><span><span><fieldset</span>></span>
  </span>	<span><span><span><legend</span>></span>Billing Address<span><span></legend</span>></span>
  </span>	<span><span><span><p</span>></span>
  </span>		<span><span><span><label</span> for<span>="name"</span>></span>Name<span><span></label</span>></span>
  </span>		<span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: John Q. Public"</span> size<span>="40"</span>></span> 
  </span>	<span><span><span></p</span>></span>
  </span>	<span><span><span><p</span>></span>
  </span>		<span><span><span><label</span> for<span>="street_address"</span>></span>Street Address<span><span></label</span>></span>
  </span>		<span><span><span><input</span> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: 12345 Main Street, Apt 23"</span> size<span>="40"</span>></span>
  </span>	<span><span><span></p</span>></span>
  </span>
  	<span><span><span><p</span>></span>
  </span>		<span><span><span><label</span> for<span>="city"</span>></span>City<span><span></label</span>></span>
  </span>		<span><span><span><input</span> type<span>="text"</span> id<span>="city"</span> name<span>="city"</span> placeholder<span>="ex: Anytown"</span>></span>
  </span>	<span><span><span></p</span>></span>
  </span>
  	<span><span><span><p</span>></span>
  </span>		<span><span><span><label</span> for<span>="state"</span>></span>State<span><span></label</span>></span>
  </span>		<span><span><span><input</span> type<span>="text"</span> id<span>="state"</span> name<span>="state"</span> placeholder<span>="CA"</span> maxlength<span>="2"</span> pattern<span>="[A-W]{2}"</span> size<span>="2"</span>></span>
  </span>	<span><span><span></p</span>></span>
  </span>
  	<span><span><span><p</span>></span>
  </span>		<span><span><span><label</span> for<span>="zip"</span>></span>ZIP<span><span></label</span>></span>
  </span>		<span><span><span><input</span> type<span>="text"</span> id<span>="zip"</span> name<span>="zip"</span> placeholder<span>="12345"</span> maxlength<span>="5"</span> pattern<span>="0-9{5}"</span> size<span>="5"</span>></span>
  </span>	<span><span><span></p</span>></span>
  </span><span><span><span></fieldset</span>></span>
  </span>
  <span><span><span><button</span> type<span>="submit"</span>></span>Buy Tickets!<span><span></button</span>></span>
  </span><span><span><span></form</span>></span></span>

  아래 결과를 볼 수 있습니다.

  Universal Selector (*)와 유형 선택기를 결합한 다른 예를 살펴 보겠습니다.

  이 예제는 아래에 표시된 모든 필드 세트 요소의 상단과 하단에 5EM 마진을 추가합니다. 우리는 범용 선택기를 사용하고 있기 때문에 이전 요소가 다른 필드 세트인지 P 요소인지 걱정할 필요가 없습니다. 참고 : 인접한 형제 자매 선택기 의 더 많은 용도 Heydon Pickering은 그의 기사에서 인접한 형제 자매 선택기의 더 영리한 용도를 탐색합니다. 우리가 티켓 수 필드와 마찬가지로

  가 다른 사람과 인접하지 않은 형제 요소를 스타일링하고 싶다면 어떻게해야합니까? 이 경우 일반 형제 조합을 사용할 수 있습니다.

  일반 형제 조합 일반 형제 조합 (Tilde)을 사용하여, 우리는 인접한 지 여부를 고려하지 않고 동일한 부모를 공유하는 요소를 선택할 수 있습니다. 패턴

  <span>form h1 {
  </span><span>color: #009;
  </span><span>}</span>

  a ~ b

  가 주어지면,이 선택기는 요소가 인접 해 있는지 여부에 관계없이 모든 b 요소와 일치합니다.

  . 티켓 수 필드 수를 다시 봅시다. 마크 업은 다음과 같이 보입니다.

  입력 요소는 레이블 요소를 따르지만 그 사이에는 스팬 요소가 있습니다. 스팬 요소는 입력과 레이블 사이에 있으므로 인접한 형제 조합은 여기서 작동하지 않습니다. 인접한 형제 조합 조합기를 일반 형제 조합으로 변경해 봅시다 :

  이제 우리의 모든 입력 요소는 아래에 볼 수 있듯이 라벨 요소와 별도의 선에 앉아 있습니다.

  일반 형제 콤비네이터를 사용하는 것이 마크 업을 완전히 제어 할 수 없을 때 가장 편리합니다. 그렇지 않으면 클래스 이름을 추가하기 위해 마크 업을 조정하는 것이 좋습니다. General Sibling Combinator는 대형 코드베이스에서 의도하지 않은 부작용을 만들 수 있으므로주의해서 사용할 수 있습니다. CSS 선택기 및 콤비네이터에 대한 자주 묻는 질문 (FAQ) 다른 유형의 CSS 조합기는 무엇이며 어떻게 작동합니까?

  CSS 조합기는 둘 이상의 CSS 선택기 간의 관계를 설명하는 데 사용됩니다. CSS에는 Descendant Combinator (공간), 어린이 조합 (심볼보다 큰>), 인접한 형제 조합 (기호) 및 일반 형제 조합 (Tilde Symbol ~)의 4 가지 유형의 조합 제가 있습니다. 후손 조합은 지정된 요소의 자손 인 모든 요소를 ​​선택합니다. Child Combinator는 지정된 요소의 직접적인 어린이 인 모든 요소를 ​​선택합니다. 인접한 형제 조합기는 지정된 요소의 다음 형제 인 모든 요소를 ​​선택합니다. 일반 형제 조합자는 지정된 요소의 형제 인 모든 요소를 ​​선택합니다.

  CSS에서 어린이 조합을 사용하는 방법?
  CSS의 어린이 조합자는 ">"기호로 표시됩니다. . 특정 요소의 직접적인 어린이 인 요소를 선택하는 데 사용됩니다. 예를 들어, 요소의 직접적인 어린이 인

  요소를 모두 선택하려면 "div> p"로 씁니다. 이것은 CSS 스타일을 요소의 직접적인 어린이 인

  요소에만 적용 할 것입니다. 자손 조합 자?
  아동 조합과 자손 조합의 주요 차이점은 특이성에 있습니다. 어린이 콤비네이터 (>)는 특정 요소의 직접 어린이 만 선택하는 반면, 자손 조합 (공간)은 특정 요소의 모든 후손 (어린이, 손자 등)을 선택합니다. 예를 들어, "div> p"는 요소의 직접적인 어린이 인

  요소 만 선택하는 반면, "div p" 깊이 그들은 중첩되어 있습니다.

  인접한 형제 조합은 CSS에서 어떻게 작동합니까?

  인접한 형제 조합은 CSS는 ""기호로 표시됩니다. 그것은 다른 특정 요소 바로 뒤에있는 요소를 선택하는 데 사용되며 두 요소 모두 동일한 부모를 공유합니다. 예를 들어, 요소를 직접 따르는

  요소를 선택하려면 "div p"로 씁니다. 이것은 CSS 스타일을 요소를 직접 따르는

  요소에만 적용됩니다.

  단일 규칙으로 여러 CSS 콤비네이터를 결합 할 수 있습니까? 단일 규칙으로 여러 CSS 콤비네이터를 결합하여보다 구체적이고 복잡한 선택기를 만들 수 있습니다. 예를 들어, 어린이 콤비네이터와 인접한 형제 조합기를 결합하여 직접적인 자식과 인접한 형제의 특정 요소 인 요소를 선택할 수 있습니다. 규칙 "div> p p"는 요소의 직접 자식 인 요소를 선택하고 다른 요소를 직접 따릅니다. CSS의 일반 형제 조합은 무엇입니까?
  CSS의 일반 형제 조합은 "~"기호로 표시됩니다. 특정 요소의 형제 인 요소를 선택하는 데 사용됩니다. 인접한 형제 조합과 달리 일반 형제 조합은 직접 따르는 것뿐만 아니라 특정 요소의 형제 인 모든 요소를 ​​선택합니다. 예를 들어, "div ~ p"는 요소의 형제 인

  요소를 모두 선택합니다.

  CSS 조합을 사용하여 중첩 요소를 스타일링하는 방법은 무엇입니까?

  CSS 콤비네이터는 중첩 요소를 스타일링하는 데 매우 유용 할 수 있습니다. 예를 들어, 자손 조합을 사용하여“div p”를 작성하여 요소 내의 모든

  요소를 스타일링 할 수 있습니다. 아동 조합을 사용하여“div> p”를 작성하여 요소의 직접 어린이 만 스타일링 할 수 있습니다. 다른 콤비네이터를 결합하면 스타일을 정확하게 타겟팅하는 매우 구체적인 선택기를 만들 수 있습니다.

  의사 클래스와 함께 CSS 콤비네이터를 사용할 수 있습니까?

  예, 가능합니다. 의사 클래스와 함께 CSS 조합기를 사용하십시오. 예를 들어, 다음은 다음과 같은 자식 조합을 사용하여 특정 요소의 첫 번째 자식을 선택할 수 있습니다. 규칙 "div> p : first-Child"는 요소의 직접 자식 인 첫 번째

  요소를 선택합니다.

  CSS 콤비네이터의 특이성은 무엇입니까? ?

  CSS 콤비네이터 자체는 특이성이 없습니다. 그러나 요소 간의 관계를 정의하여 선택기의 특이성을 결정하는 데 도움이됩니다. 선택기의 특이성은 ID 선택기, 클래스 선택기 및 포함하는 유형 선택기의 수에 따라 계산됩니다. 보다 구체적인 선택기가있는 선택기는 덜 특정 선택기를 사용하여 선택기를 무시합니다.

  Attribute Selectors와 함께 CSS 조합기를 사용할 수 있습니까?
  예, Attribute Selectors와 함께 CSS 콤비네이터를 사용할 수 있습니다. 예를 들어, 속성 선택기와 함께 Child Combinator를 사용하여 특정 속성이 있고 특정 요소의 직접적인 어린이 인 요소를 선택할 수 있습니다. "div> p [title]"규칙은 제목 속성이 있고 요소의 직접적인 어린이 인
  요소를 모두 선택합니다.

위 내용은 CSS 선택기 : 콤비네이터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!