<div>and 의 사용법을 보여주는 간단한 예제를 요청하고 싶습니다 <span>. 둘 다 페이지 섹션을 id또는 로 표시하는 데 사용되는 것을 보았지만 한 페이지가 다른 페이지 class보다 선호되는 시간이 있는지 알고 싶습니다.
답변
즉, 의미 론적으로 의미를 사용하려면 div를 사용하여 문서의 섹션을 줄 바꿈해야하고 범위를 사용하여 텍스트, 이미지 등의 작은 부분을 줄 바꿈해야합니다.
예를 들면 다음과 같습니다.
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>인라인 요소 내에 블록 수준 요소를 배치하는 것은 불법이므로 다음과 같이하십시오.
<div>Some <span>text that <div>I want</div> to mark</span> up</div>… 불법입니다.
편집 : HTML5부터 일부 블록 요소는 일부 인라인 요소 안에 배치 할 수 있습니다. 꽤 명확한 목록은 여기 MDN 참조를 참조 하십시오 . 위의 <span>내용은 구문 내용 만 허용하고 <div>흐름 내용 이기 때문에 여전히 불법 입니다.
구체적인 예를 요청한 경우 볼링 웹 사이트 BowlSK 에서 가져온 예가 있습니다 .
<div id="header">
<div id="userbar">
Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>좋아, 무슨 일이야?
내 페이지 상단에는 논리 섹션 인 “헤더”가 있습니다. 이것은 섹션이므로 div (적절한 ID)를 사용합니다. 그 안에는 사용자 표시 줄과 실제 페이지 제목이라는 두 가지 섹션이 있습니다. 제목은 적절한 태그를 사용합니다 h1. 섹션 인 사용자 막대는로 묶습니다 div. 그 안에 사용자 이름이에 싸여 span스타일을 변경할 수 있습니다. 보시다시피 span제목에 약 2 글자를 감쌌습니다 . 스타일 시트에서 색상을 변경할 수 있습니다.
또한 HTML5에는 기사, 섹션, 탐색 등의 일반적인 페이지 구조를 정의하는 광범위하고 새로운 요소 세트가 포함되어 있습니다.
HTML 5 실무 초안 의 4.4 절에 그것들이 나열되어 있으며 사용법에 대한 힌트가 있습니다. HTML5는 여전히 작동하는 사양이므로 아직 “최종”은 아니지만 이러한 요소가 어디에서나 가고 있다는 것은 의심의 여지가 있습니다. 일부 이전 버전의 IE에서 이러한 요소의 스타일을 지정하려는 경우 사용해야하는 자바 스크립트 해킹이 있습니다 document.createElement. 소스에 해당 요소를 지정하기 전에 각 요소 중 하나를 작성해야합니다 . 이를 처리 할 라이브러리가 많이 있습니다. 빠른 Google 검색으로 html5shiv 가 활성화되었습니다 .
답변
완벽을 기하기 위해 다음과 같이 생각하도록 초대합니다.
- HTML에는 많은 블록 요소 (전후 줄 바꿈)가 정의되어 있고 많은 인라인 태그 (줄 바꿈 없음)가 있습니다.
- 그러나 현대 HTML에서 모든 요소는 의미 가 있어야합니다 : a
<p>는 단락,<li>a는 목록 항목 등이며, 우리는 예전 시대와 달리 올바른 목적을 위해 올바른 태그를 사용해야합니다.<blockquote>내용이 인용인지 여부를 사용하여 들여 쓰기 . - 당신이하려는 일에 의미 가 없을 때 어떻게해야합니까? 더 없습니다 의미 400 픽셀 전체에 열을가? 디자인에 적합하기 때문에 텍스트 열의 너비가 400px가 되길 원합니다.
- 일반, 또는 의미 요소 : 이러한 이유로, 그들은 두 개 더 HTML에 요소를 추가
<div>하고<span>, 그렇지 않으면, 사람들이 의미를 가진다 할 요소를 남용로 돌아갈 것이기 때문.
답변
여기에 이미 훌륭하고 자세한 답변이 있지만 시각적 인 예는 없으므로 간단한 설명이 있습니다.
<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span><div>블록 태그이고 <span>인라인 태그입니다.
답변
<div>블록 레벨 요소이며 <span>인라인 요소입니다.
인라인 텍스트로 무언가를 <span>하고 싶다면 줄 바꿈을하지 않기 때문에 갈 길 <div>입니다.
다른 사람들이 지적한 바와 같이, 각각의 의미는 일부 의미가 있으며, 가장 중요한 <div>것은 문서의 논리적 부분 또는 문서의 일부와 비슷한 부분을 의미한다는 사실입니다 .
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
답변
진짜 중요한 차이점은 이미 Chris의 대답에 언급되어 있습니다. 그러나 그 의미가 모든 사람에게 명백하지는 않습니다.
인라인 요소로서 <span>다른 인라인 요소 만 포함 할 수 있습니다. 따라서 다음 코드가 잘못되었습니다.
<span><p>This is a paragraph</p></span>위의 코드는 유효하지 않습니다. 블록 레벨 요소를 랩핑하려면 다른 블록 레벨 요소 (예 :)를 사용해야합니다 <div>. 반면에 <div>블록 수준 요소가 합법적 인 장소에서만 사용할 수 있습니다.
또한 이러한 규칙은 (X) HTML로 고정되어 있으며 CSS 규칙이 있어도 변경 되지 않습니다 ! 따라서 다음 코드 도 잘못되었습니다!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
답변
“블록 요소”의 의미는 암시되지만 명시 적으로 언급되지는 않습니다. 우리가 모든 이론을 무시한다면 (이론이 좋다) 다음은 실용적인 비교입니다. 다음과 같은:
<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>생산 :
This paragraph has a span.
This paragraph
has
a div.즉 , div를 인라인으로 사용 하지 않아야 할뿐만 아니라 원하는 효과를 생성하지 않습니다.
답변
다른 답변에서 언급했듯이 기본적 div으로 블록 요소 span로 렌더링 되지만 컨텍스트 내에서 인라인으로 렌더링됩니다. 그러나 의미 적 가치는 없습니다. 그것들은 당신이 어떤 컨텐츠에 스타일과 아이덴티티를 적용 할 수 있도록 존재합니다. 스타일을 사용하면 그 반대로 div행동 할 수 있습니다 span.
유용한 스타일 중 하나 div는inline-block
예 :
내가 사용한 inline-block게임 웹 프로젝트에서 큰 성공.