디브 앤 스팬

Div and span

HTML에서, 태그는 문서의 일부를 정의하는 데 사용되는 요소로서, 고유한 분류가 필요할 때 식별 가능하다.다음과 같은 다른 HTML 요소p(문단),em(iii), 다시 말하면, 컨텐츠의 의미론, 추가적 사용 등을 정확하게 나타낸다.span그리고div태그는 독자들에게 더 나은 접근성과 작가들에게 더 쉬운 유지보수를 이끈다.기존 HTML 요소가 적용되지 않는 경우,span그리고div다음과 같은 HTML 속성이 문서의 일부를 가치 있게 나타낼 수 있다.class,id,lang또는dir적용할 수 있다.[1][2]

span문장의 단어와 같이 문서의 인라인 부분을 나타낸다. div몇 개의 단락과 같은 문서의 블록 수준 부분 또는 캡션이 있는 이미지를 나타낸다.두 원소 모두 그 자체로는 아무런 의미가 없지만 의미속성(예: 의미속성)을 허용한다.lang="en-US"(), CSS 스타일링(예: 컬러 및 타이포그래피) 또는 클라이언트 쪽 스크립팅(예: 애니메이션, 숨기기 및 확대)을 적용할 것.[1][2]

예를 들어, 만약 당신이 빨간 문단에 텍스트의 특정 부분을 만들기를 원한다면, 당신은span

<span style="color: red;">I am red!</span>

이렇게 하면 빨간색 텍스트가 반환될 것이다.사실상, 나는 빨간색으로 보인다!

역사

span요소는 1995년 국제화 워킹 그룹의 2차 초안 html-i18n에서 HTML에 도입되었다.그러나 HTML 4.01이 되어서야 HTML 언어의 일부가 되어 1997년 HTML 4 W3C 작업 초안에 등장하였다.[3]

1995년에span텍스트의 인라인 범위를 표시하기 위해 도입되었다. '다른 요소가 적절하지 않은 경우, LANG 및 BIDI 속성을 운반하기 위해 일반 컨테이너가 필요하다.'그 이후 훨씬 더 풍부한 범위의 의미적 요소들이 정의되었고, 또한 적용되어야 할 많은 속성들이 있지만, 그것은 여전히 일반적인 목적에 부합한다.

div문서의 '분할'을 정의하는데, 이는 인라인 재료의 범위보다 그 위아래 요소와 더 구별되는 블록 레벨 항목이다.[4]

차이 및 기본 동작

사이에는 여러 가지 차이가 있다.div그리고span. 가장 눈에 띄는 차이점은 요소들이 어떻게 표시되는가이다.표준 HTML에서, adiv블록 레벨 요소인 반면span인라인 요소.div블록은 페이지의 문서의 한 부분을 시각적으로 격리하며, 다른 블록 수준 구성요소를 포함할 수 있다.span요소는 주변 컨텐츠와 인라인으로 인라인으로 된 정보의 일부를 포함하며, 다른 인라인 레벨 구성 요소만 포함할 수 있다.실제로 요소들의 기본 표시는 각 요소의 허용된 내용은 변경되지 않을 수 있지만, CSS(Cascading Style Sheets)를 사용하여 변경할 수 있다.예를 들어, CSS와 관계 없이, aspan요소는 블록 레벨의 아동을 포함할 수 없다.[5]

실용적 사용법

span그리고div요소들은 순수하게 밀폐된 요소의 논리적 그룹을 암시하기 위해 사용된다.

사용해야 하는 세 가지 주요 이유가 있다.span그리고div으로 꼬리표를 달다.class또는id 속성:

CSS를 이용한 스타일링

에 흔히 있는 일이다.<span>그리고<div>지녀야 할 것class또는id레이아웃, 타이포그래픽, 색상 및 기타 프리젠테이션 속성을 콘텐츠의 일부에 적용하기 위해 CSS와 함께 속성.CSS는 시각적 스타일링에만 적용되는 것이 아니다: 음성 브라우저에서 큰 소리로 말할 때, CSS 스타일링은 음성 속도, 스트레스, 풍부함, 그리고 입체 이미지 내의 위치에도 영향을 미칠 수 있다.

이러한 이유로, 그리고 더 의미론적인 웹을 지지하기 위해, HTML 내의 요소들에 부착된 속성들은 단지 하나의 특정 매체에 의도된 표시장치 속성만이 아니라, 그들의 의미론적 목적을 설명해야 한다.예를 들어, HTML:<span class="red-bold">password too short</span>의미론적으로 약한 반면<em class="warning">password too short</em>a를 사용하다.em강조(이탤릭체로 텍스트로 표시됨)를 나타내며, 보다 적절한 클래스 이름을 도입한다.CSS를 올바르게 사용함으로써, 그러한 '경고'는 스크린에 빨간색, 굵은 글꼴로 렌더링될 수 있지만, 인쇄할 때 생략될 수 있는데, 그때쯤에는 그것에 대해 어떤 것도 하기에는 너무 늦기 때문이다.아마도 말을 할 때는 그들에게 추가적인 스트레스를 주어야 하고, 음성 요율을 약간 낮춰야 할 것이다.두 번째 예는 단순히 현재적이라기 보다는 의미적으로 더 풍부한 마크업이다.

의미적 명확성

페이지 내용의 일부에 대한 이러한 종류의 그룹화 및 라벨 표시는 단순히 페이지를 일반적인 용어로 의미 있게 만들기 위해 도입될 수 있다.월드 와이드 웹이 앞으로 몇 년, 몇 십 년 안에 어떻게 발전할지는 말할 수 없다.우리가 아직 상상할 수 없는 정보 시스템이 웹을 트래블링, 처리, 분류하고 있을 때 오늘날 설계된 웹 페이지는 여전히 사용되고 있을 수 있다.구글 등 오늘날의 검색 엔진도 상당히 복잡한 독점적인 정보처리 알고리즘을 사용한다.

년 동안 W3C(World Wide Web Consortium)는 웹 전체를 오늘날과 미래의 정보 시스템에 점점 더 유용하고 의미 있게 만들기 위해 고안된 주요 시멘틱프로젝트를 운영하고 있다.

마이크로 포마츠 운동은 의미론적 개념을 구축하려는 시도다.classes예를 들어, 마이크로포맷 인식 소프트웨어는 다음과 같은 요소를 자동으로 찾을 수 있다.<span class="tel">123-456-7890</span>그리고 전화 번호의 자동 전화 걸기를 허용한다.

코드에서 액세스

HTML 또는 XHTML 마크업이 페이지 방문자의 클라이언트 브라우저에 전달되면, 클라이언트측 코드가 웹 페이지의 내부 구조(또는 문서 객체 모델)를 탐색해야 할 가능성이 있다.가장 일반적인 이유는 페이지가 렌더링된 후 진행 중인 동적 동작을 생성하는 클라이언트측 자바스크립트와 함께 페이지가 전달되기 때문이다.예를 들어 마우스를 'Buy now' 링크 위로 굴리는 것이 가격을 강조하기 위한 것이라면 자바스크립트 코드는 이 작업을 수행할 수 있지만 자바스크립트는 마크업 어디에 있든 가격 요소를 식별해야 한다.다음과 같은 마크업이면 충분하다.<div class="price">$45.99</div>또 다른 예는 Ajax 프로그래밍 기법인데, 예를 들어 하이퍼텍스트 링크를 클릭하면 JavaScript 코드가 전체 페이지를 다시 로드하지 않고 페이지 내 현재 가격 견적 대신 표시할 텍스트를 검색할 수 있다.서버에서 새 텍스트가 다시 도착하면, JavaScript는 새로운 정보로 대체하기 위해 페이지에서 정확한 영역을 식별해야 한다.

자동 테스트 도구는 또한 다음을 사용하여 웹 페이지 표시를 탐색해야 할 수 있다.span그리고div원소의class또는id특성동적으로 생성된 HTML에서, 여기에는 xUnit 계열의 멤버인 HttpUnit과 같은 페이지 테스트 도구와 형태 중심 웹 사이트에 적용할 때 Apache JMeter와 같은 로드 또는 응력 테스트 도구의 사용이 포함될 수 있다.

과용

의 현명한 사용.div그리고spanHTML과 XHTML 마크업의 중요한 부분이다.하지만, 때때로 그것들은 과도하게 사용되기도 한다.

HTML로 이용할 수 있는 다양한 목록 구조는 의 집에서 만든 혼합물보다 선호될 수 있다.div그리고span요소들[6]

예를 들어 다음과 같다.

<ul class="메뉴" 메인 페이지 </li>내용 </li>도움[도와]

...은 보통 이것보다 더 바람직하다.

<div class="menu" 메인 페이지 </span>내용 </span> <span>도움말 </span> </div>

HTML의 의미적 사용에 대한 다른 예div그리고span의 사용을 포함하는 요소들fieldset웹 양식을 나누는 요소들, 의 사용legend그러한 구획과 의 사용을 식별하는 요소들label형태를 식별하다input보다는 요소들div,span또는table그러한 목적으로 사용되는 [7]요소

HTML5는 몇 가지 새로운 요소를 도입했다; 몇 가지 예는header,footer,nav그리고figure요소들의미론적으로 적절한 요소의 사용은 HTML 문서에 보다 나은 구조를 제공한다.span또는div.[8]

참고 항목

참조

  1. ^ a b "HTML5: A vocabulary and associated APIs for HTML and XHTML". 4.4 Grouping content: W3C. Retrieved 16 September 2014.{{cite web}}: CS1 maint : 위치(링크)
  2. ^ a b "HTML5: A vocabulary and associated APIs for HTML and XHTML". 4.5 Text-level semantics: W3C. Archived from the original on 1 August 2015. Retrieved 16 September 2014.{{cite web}}: CS1 maint : 위치(링크)
  3. ^ "HTML/Elements/span - Web Education Community Group". 2013-06-13. Retrieved 2013-11-14.
  4. ^ "HTML <div> Tag". W3Schools. Retrieved 22 March 2018.
  5. ^ "HTML 5.1: 4. The elements of HTML". W3.org. Retrieved 3 August 2017.
  6. ^ Harold, Elliotte Rusty (2008). Refactoring HTML. Addison Wesley. p. 184. ISBN 0-321-50363-5. There is no simple way to find all the unidentified lists in a site. [...] They can be marked up in dozens of different ways: as paragraphs, divs, tables, [etc]. Once you've found a list, marking up the individual items is easy. Just use ul, ol, or dl instead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...]
  7. ^ Raggett, Dave; Arnaud Le Hors; Ian Jacobs (1999). "Adding structure to forms: the FIELDSET and LEGEND elements". HTML 4.01 Specification. W3C. Retrieved 12 July 2010. The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.
  8. ^ van Kesteren, Anne (2010). "HTML5 differences from HTML4". W3C. Retrieved 30 June 2010.

외부 링크