•  07-07-2019
  •  | 
  •  

문제

스팬 요소는 DIV와 똑같은 것처럼 보이지만 블록 레벨이 아닌 인라인 레벨에서 보입니다. 그러나 Span 요소가 제공 할 수있는 유익한 논리 부문을 생각할 수없는 것 같습니다.

문장에 포함되지 않은 단일 문장 또는 단어는 가장 작은 논리적 부분 인 것 같습니다. CSS는 CSS를 무시합니다. SPAN은 문장이나 단어 문자열을 자르면 추가 의미 값을 제공 할 때?

모든 경우에 다른 요소는 의미 값을 추가하는 데 더 적합하여 순수한 레이아웃 요소를 만드는 것 같습니다. 이것이 사실입니까?

도움이 되었습니까?

해결책

SPAN은 HTML의 범위를 벗어난 의미 론적 의미를 추가하는 데 사용될 수 있습니다. 특정 속성을 식별하는 클래스를 사용하여 수행 할 수 있습니다. 예를 들어, 공상 과학 소설을 작성하는 경우 SPAN을 사용하여 메이크업 단어를 식별 할 수 있습니다. 왜냐하면이를 다르게 형식화하려고하거나 철자 검사기가 무시하기를 원할 수 있기 때문입니다.

그런 다음 마법사는 u003Cspan class="wizardword">Gravenwistu003C/span> 를 불러서 다가오는 군대를 공격했습니다. u003Cspan class="wizardword">Gavenwistu003C/span> 는 저항했지만 마법사의 u003Cspan class="wizardword">wistwandu003C/span> 는 너무 강력했습니다.

이것은 렌더링 될 수 있습니다

그런 다음 마법사는 그라 벤즈 스트 그리고 그것은 다가오는 군대를 공격합니다. 그만큼 개벤위 스 마법사의 저항 Wistwand 너무 강력했습니다.

이런 종류의 또 다른 좋은 예는입니다 미세 기름, HTML 내에서 임의의 구조를 생성 할 수 있습니다.

<span class="tel">
 <span class="type">home</span>:
 <span class="value">+1.415.555.1212</span>
</span>

SPAN 대 DIV의 장점은 스팬이 인라인 컨텐츠이기 때문에 거의 모든 곳에 나타날 수 있다는 것입니다. DIV는 블록 요소이므로 다른 요소 내에서만 발생할 수 있다는 것입니다.

다른 팁

매우 유용한 이점은 언어의 변화를 표시하는 것입니다. 예를 들어 

<p>Welcome to Audi UK, <span lang="de">Vorsprung durch Technik</span>.</p>

여러 언어 기능을 가진 스크린 리더가이를 활용할 수 있습니다.

그래서 그들은 프리젠 테이션이 아니라 일반적인 것이 아닙니다. 실제로, 스팬은 거의 표현적이지 않으며, "Spell-Mistake"와 같이 "Bold-Red-Text"와 같은 의미 적으로 의미있는 클래스 이름을 제공하는 것은 거의 없습니다.

<div class="name">
  <span class="firstname">John</span>
  <span class="lastname">Doe</span>
</div>

그것은 당신이 표현하고 싶은 것에 완전히 달려 있습니다. 이름을 표시하는 것이 시맨틱 값이라면 (CSS가 이름을 형식화하거나 스크립팅 언어를 사용하여 추출 할 수있는 후크가있는 경우) 스팬을 사용할 수 있습니다.

JavaScript가 요소를 구문 분석하고 태그 내부에 값을 삽입하려면 SPAN을 많이 사용합니다.

<span datafield="firstname"></span>

나중에 값을 삽입 할 것이므로,이 경우 의미가 있지만, 내가 그것을주기로 결정한 의미 일뿐입니다. 스팬이 그렇지 않으면 레이아웃에 영향을 미치지 않는다는 사실은이 경우 이상적입니다.

span에스 ~할 수 있다 실제로 시맨틱 정보의 형태로 운송 업체가됩니다 class 속성. 이것은 마이크로 형식에 의해 사용됩니다.

스팬 태그에는 의미를 부여하려면 클래스 또는 ID 속성이 필요합니다.

예 : u003Cspan class="personal_phone_number">0123 456789u003C/span>

CSS를 무시하면 의미 론적 의미를 부여하기 때문에 SPAN은 언제 문장이나 단어를 자르면 추가 의미 값을 제공합니까?

CSS (및 기타 비 HTML 마크 업) 무시, 절대. ㅏspan> 인생의 유일한 목적은 HTML에서 표현할 수없는 마크 업을 가지고 다니는 것입니다. 다음과 같은 마크 업span style="dropCap">, HTML에는 동등한 것이 없지만 수백 년 동안 인쇄 출판에 존재했으며, 단어 위탁을 일으키지 않고 항목의 첫 글자 (기사, 무엇이든)에 항상 적용됩니다. (또는 더 큰 휴식).

모든 경우에 다른 요소는 의미 값을 추가하는 데 더 적합하여 순수한 레이아웃 요소를 만드는 것 같습니다. 이것이 사실입니까?

예 그리고 아니오. 유일한 실제 가치span> 의미 적으로 중립적입니다. 즉, 예를 들어와 달리p>, 다른 마크 업을 수행하기 위해 사용할 때 사용하지 않을 수도있는 것은 없습니다. 그리고 같은 시간이 있습니다span style="dropCap"> 위의 다른 효과를 원하지 않을 때.

태그의 내용 (예 : 단일 단어 또는 문장)의 일부에 서식 규칙을 적용하려는 경우. 스팬 태그를 사용할 수 있습니다. 때로는 태그가없는 서식이라고합니다.

EBNF-> XHTML 변환기에 스팬을 사용하여 리터럴과 토큰에 다른 형식을 적용합니다.

스팬 (및 div) 자체적 요소는 일반적으로 의미 적으로 중립으로 간주됩니다. 좋은 접근 방식은 시맨틱 마크 업을 적절하게 사용하는 것이지만 때로는 의미 론적 의미 (EM, Strong, ABBR, Acronym 등)를 제공하는 기존 HTML 요소가 의미 적으로 맞지 않는 상황에 빠지는 것입니다. 귀하의 콘텐츠를 위해. 따라서 다음 단계는 의미 적으로 의미있는 ID 또는 클래스와 함께 의미 적으로 중립적 인 범위 또는 div를 사용하는 것입니다.

나는 그가 div와 스팬의 차이에 대해 묻고 있다고 생각하며, 기본 동작 외에는 실제로 하나도 없습니다.

그것은 컨벤션의 문제입니다. 스타일링을 사용할 때 div 일반적으로 콘텐츠의 분할을 구분하는 데 사용되는 반면 span 인라인 텍스트를 구분하는 데 사용됩니다. 쉽게 사용할 수 있습니다 div 모든 곳이나 사용 span 어느 곳에서나, 그러나 컨벤션에 의해서도 다른 것으로 생각하는 것이 도움이됩니다.

HTML에서 미세 종에 사용될 수 있습니다. 그러나 실제 HTML 사양이기 때문에 엑스HTML, 아무런 의미가 없습니다. 대신에: 

<P>Hello, my name is <SPAN class="name"> Joe Sixpack </SPAN></P>

차라리 사용하고 싶습니다 :

<P>Hello, my name is <FOAF:name> Joe Sixpack </FOAF:name></P>

스팬의 의미는 "이것은 (예 : 텍스트) 내용의 (일반) 범위입니다."입니다. Div와 비교하여 "이것은 논리적 부서 (예 : 일반 문서 섹션)"를 의미합니다.

Span은 주로 스타일을 걸기위한 고리입니다 (따라서 사용할 수 있습니다. <span style='color:blue'> 대신에 <font color='blue'>).

에서 사양:

DIV 및 SPAN 요소는 ID 및 클래스 속성과 함께 문서에 구조를 추가하기위한 일반적인 메커니즘을 제공합니다. 이러한 요소는 컨텐츠를 인라인 (SPAN) 또는 블록 레벨 (DIV)으로 정의하지만 내용에 대한 다른 프리젠 테이션 관용구를 부과하지 않습니다. 따라서 저자는 스타일 시트, 랭 속성 등과 함께 이러한 요소를 사용하여 HTML을 자신의 요구와 취향에 맞게 조정할 수 있습니다.

예를 들어, 클라이언트 정보 데이터베이스를 기반으로 HTML 문서를 생성하고 싶다고 가정 해 봅시다. HTML에는 "클라이언트", "전화 번호", "이메일 주소"등과 같은 객체를 식별하는 요소가 포함되어 있지 않기 때문에 DIV 및 SPAN을 사용하여 원하는 구조적 및 프리젠 테이션 효과를 달성합니다. 테이블 요소를 다음과 같이 사용하여 정보를 구성 할 수 있습니다.

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top