스팬 (HTML 요소)

겸손한

요소 : 스타일링 및 스크립팅을위한 다목적 도구 종종 간과되는 요소는 HTML 무기고에서 놀랍도록 유용한 도구입니다. 시맨틱 의미 (예 : )와 달리 는 텍스트의 일부를 타겟팅하고 조작하는 간단하고 일반적인 방법을 제공합니다. 본질적으로 시각적 프레젠테이션을 바꾸지 않습니다. 그것의 힘은 CSS와의 스타일링 및 JavaScript와의 상호 작용의 고리 역할을하는 능력에 있습니다. 태그를 열고 닫는 텍스트를 랩핑하면 CSS 클래스 또는 ID를 사용하여 스타일을 만들 수있는 컨테이너를 만듭니다. 이를 통해 문서의 전체 구조에 영향을 미치지 않으면 서 특정 단어 나 문구를 정확하게 제어 할 수 있습니다. 예를 들어, 저자는 아래 그림과 같이

에 스타일 브랜드 이름을 사용할 수 있습니다.

스팬 요소 <span></span> <h1></h1>로 스타일링 된 브랜드 이름 인라인 요소로서 <p></p>에는 텍스트 또는 기타 인라인 요소 만 포함해야합니다. 일부 컨텐츠 관리 시스템의 일반적인 실수 인 <span></span> 내에서 블록 수준 요소를 포장하지 마십시오.

의 과도한 사용은

의 과도한 사용과 마찬가지로 피해야합니다. 강조하기 위해 <span></span>와 같은 더 적절한 요소가 더 나은 선택 일 수 있는지 여부를 고려하십시오. 예를 들면 : <span></span>

이 경우

는 분명히 강조를 전달하는 반면, CSS 스타일이없는 는 기능적으로 의미가 없습니다. 예 : CSS 스타일 CSS 스타일에 를 사용하는 방법은 다음과 같습니다

<span></span> 자주 묻는 질문 (faqs) <span></span> <span></span> <div> <code><em></em>?

<code class="language-html">He said it was <em>really</em> important to know the difference.</code>

의 목적은 스타일링 또는 JavaScript 조작을위한 인라인 요소를 그룹화하는 데 사용되는 인라인 컨테이너입니다. 본질적으로 아무것도 나타내지 않지만 특정 조치의 목표를 제공합니다.

<em></em> <span></span>

는 ?

와 어떻게 다른가? 는 인라인으로, 같은 줄에 남아 있습니다. <span></span>

?

텍스트를 태그로 래핑하고 클래스 또는 ID를 사용하여 CSS 스타일을 적용하는 텍스트 스타일 <span></span>

<code class="language-css">.brandname { font-style: italic; color: #006; text-transform: uppercase; }</code>

요소를 중첩 할 수 있습니까? 예, 가장 안쪽 의 스타일은 외부 스팬에서 상충되는 스타일을 무시합니다.

<code class="language-html"><p>Various brands were present, including <em>Adobe</em>, <em>Microsoft</em>, <em>Apple</em>, and <em>Intel</em>.</p></code>

다른 요소와 함께 를 사용할 수 있습니까? 예, 다른 인라인 요소는 있지만 블록 수준 요소는 아닙니다.

는 CSS Selectors와 어떻게 상호 작용합니까? 다른 요소와 마찬가지로 클래스 및 ID를 포함한 CSS 선택기를 대상으로 할 수 있습니다. <span></span> javaScript와 함께

를 사용할 수 있습니까? 예, ID 또는 클래스를 할당하여 JavaScript 조작을 위해 타겟팅 할 수 있습니다.

.

<span></span>? 의 한계는 무엇입니까 (블록 수준 요소를 포함 할 수 없음) 의미 론적 의미를 전달하는 데 사용해서는 안됩니다.

.

브라우저 지원?

는 모든 주요 브라우저에서 널리 지원됩니다. <span></span> 모범 사례?

구조 나 의미가 아닌 스타일에만 사용하십시오. 더 나은 코드 구성 및 유지 관리를 위해 클래스 또는 ID를 사용하십시오.

<p></p>