DIV와 SPAN의 차이점

태그 사이에 정의 된 텍스트 (내용) HTML 코드의 요소를 정의하는 HTML 태그입니다.

HTML (Hypertext Markup Language)은 모든 기기에서 매일 온라인으로 방문하는 웹 페이지를 만들고 표시하는 데 사용되는 구조화 된 코드입니다.

다른 기술 및 프로그래밍 언어를 HTML과 통합하여 웹 사이트에 역동적 인 고급 기능을 제공 할 수 있습니다.

HTML 이해하기

하이퍼 텍스트 마크 업 언어

(HTML)는 널리 사용되는 마크 업 언어이며 웹 브라우저에 표시되는 웹 페이지의 구조와 코드를 의미합니다. HTML은 특정 코드 (구문)를 사용하여 페이지의 스타일, 내용, 레이아웃 및 형식을 정의하는 텍스트 파일입니다.

마크 업 용어는 텍스트 / 코드가 처리 및 프리젠 테이션을 위해 준비 중임을 나타냅니다. i. 이자형. 웹 페이지의 웹 브라우저에서 W3C (World Wide Web Consortium) [i]는 웹 페이지 개발시 HTML을 공식 마크 업 언어로 인식하므로 대부분의 브라우저에서 HTML을 지원합니다. 따라서 웹 페이지는 다른 브라우저에서 쉽게 해석 할 수있는 인식 된 언어로 개발하여 디자이너가 의도 한대로 페이지를 렌더링 할 수 있습니다.

현재 사용중인 버전은 HTML4이지만 HTML5는 동적이고 반응이 빠른 웹 페이지에 대한 지원 및 채택이 늘어남에 따라 서서히 단계적으로 단계적으로 폐기되고 있습니다.

스마트 폰, 태블릿 및 랩톱과 같은 여러 기기에 대응해야하는 쉽고 동적 인 사용자 환경을 제공하기 위해 반응성이 웹 개발의 기본 구성 요소가되었습니다.

캐스 캐이 딩 스타일 시트 (CSS)

는 역동적이고 반응이 빠른 페이지를 구성하는 데 필수적인 부분이되었습니다. 글꼴, 색상, 정렬과 같은 모든 요소의 특성을 정의하는 별도의 파일이므로 개발자는 HTML 코드에서 사용될 때마다 요소의 스타일을 나타내지 않습니다.

HTML의 기본 구조

개발 언어를 최대한 활용하려면 표준 파일 구조를 준수하고 최상의 구문 사용을 고려하는 것이 안정적이고 목적이 있으며 시각적으로 매력적인 웹 컨텐츠를 제공하는 데 중요합니다. HTML 페이지는 요소 (태그라고도 함)로 정의 된 구조를가집니다. HTML 코드를 작성할 때 이러한 요소는 쌍으로 표시됩니다. 즉, 모든 태그에는 여는 것과 닫는 것이 필요합니다. 시작과 끝.

요소는

구문으로 열리고

로 닫힙니다.

/ 경사 선은 해당 요소의 정의가 끝났음을 나타냅니다. 요소 속성과 내용은이 두 지점 사이에 정의됩니다. HTML 파일에 필요한 최소 요소 는 정의, (HTML4 만) 및 태그입니다.

DOCTYPE 정의

정의 (DTD)는 먼저 HTML 파일의 첫 번째 태그로 선언되어야하므로 페이지가 처리 될 때 웹 브라우저는 어떤 파일 유형인지 알고 있으므로 올바르게 해석하고 페이지를 표시하십시오. HTML4에는 페이지 속성과 요소에 따라 DTD의 변형이 있지만보다 일반적인 문장은 또는

• 와 같이 포함됩니다. HTML5의 DTD는 훨씬 간단합니다.

· HTML, HEAD 및 BODY

태그는 HTML 파일임을 나타내고 태그 안에 정의 된 다른 모든 후속 요소를 포함하는 HTML 요소의 루트입니다. 모범 사례로 언어 속성을 포함하는 것이 좋습니다. 예:

HTML4에서는 필수 사항이지만 HTML5에서는 필수 항목이 아닙니다. 제목, 스크립트 참조, 스타일 및 메타 데이터 정의와 같이이 문서 부분과 관련된 다른 요소가 포함 된 요소입니다.

엘리먼트는 테이블, 이미지 텍스트,리스트 등을 포함하여 페이지의 메인 컨텐츠를 보유한다. 태그가 닫힌 후에 엘리먼트는 이제 종료 될 수있다. 새 HTML5 요소 사용은 페이지 또는 콘텐츠의 다른 부분에서 선택 사항입니다.

HTML 요소

• HTML5는 개발 및 디자인이 용이하도록 새로운 요소를 제작했으며 HTML4에서 사용 된 요소도 제거했습니다. HTML4와 HTML5의 차이점 목록은 W3C (World Wide Web Consortium) [ii]에서 발행합니다.
• HTML DIV TAG
• 향상된 기능 및 새로운 요소와 CSS의 발전과 함께 특정 요소를 이전보다 다른 방식으로 사용할 수 있으며 웹 페이지가 더욱 빨라지고 풍부하고 아름답게 변합니다. 보다! HTML5와 함께 사용되는 CSS를 사용하면 과도하게 사용 된 특정 요소를 대체 할 수 있습니다.

이 태그는 페이지에 내용을 분리 할 때 널리 사용됩니다. 이 요소를 만들 때 페이지 전체에 텍스트가 표시되는 대신 텍스트 나 내용을 함께 유지하기 위해

나누기를 자동으로 삽입합니다.

웹 사이트 접근성 및 검색 엔진 최적화로 기술은 꽤 과학이되어 가고 있으며 WC3에서 HTML5에서 항상 사용으로 되돌아 가지 않도록 권장하고 있습니다.

깔끔하게 구조화되었지만 단순한 블로그 형식의 예로서 요소를 사용하는 대신 CSS로 새로운 HTML5 요소를 고려하십시오. 주요 내용에 요소를 사용하십시오. 요소를 사용하여 페이지, 머리말 또는 꼬리말 (아무 곳에 나!)의 내용을 강조 표시하거나 분리 할 수 ​​있으며, 요소를 사용하여 페이지를 탐색하는 메뉴 또는 그룹 링크를 유지할 수 있습니다.

이러한 새로운 요소는 HTML5를 사용하여 콘텐츠 유형을 쉽게 식별합니다. 그러나이 태그는 반응 형 웹 사이트를 만드는 데 CSS와 함께 사용됩니다.

각각의 요소 (자신의 id 나 클래스로)를 생성하면 CSS 파일을 정의하여 각 요소를 조작 할 수 있습니다.

아래의 HTML 예제는 여러 요소를 사용하는 예를 보여줍니다.

My Examples

요소는 사용되는 장치의 화면 크기에 따라 반응하는 상호 작용을 위해 다양한 속성, 구체적으로 서로 다른 크기를 가질 수 있습니다.

다음은 각

태그를 참조하여 HTML의 해당 CSS 파일에서 각 요소의 스타일을 지정하는 방법의 예입니다.

# 헤더 { 너비: 800px;

높이: 자동

여백 - 왼쪽: 자동; margin-left: auto;

}

# 대상 { 높이: 150px;

배경색: #CCC;

}

HTML SPAN TAG

요소는 인라인 요소이며 break

태그가 사용되고 open 태그와 close 태그 사이에 정의 된 텍스트 (내용)가 다음과 같이 표시되지 않으면 줄 바꿈을하지 않습니다. 한 줄 (기본적으로 다른 요소를 사용하지 않고).

인라인 요소는 HTML 파일의 텍스트 요소이며 다른 요소의 행 내에서 정의 할 수 있습니다.

마찬가지로, 요소는 최적의 참조를 위해

의미를 가지지 않습니다. 기본적으로 요소 내용을 그대로 보여 주지만, 올바르게 태그를 붙이고 다른 속성으로 보완하거나 JavaScript로 조작하면 모든 인스턴스를 CSS에서 스타일을 정의 할 수 있습니다.

아래 예제에서 파란색 텍스트는 span 요소가 부모 요소와 다른 속성을 갖는 인라인 요소로 중첩 될 수있는 방법을 강조합니다 (단락 p>:

예제를 열려면 아래 아이콘을 클릭하십시오. 페이지의

웹 브라우저에서 볼 때, 위 요소의 텍스트는 단락과 다른 글꼴로 표시되어 사용자가 예제에 액세스하기 위해 클릭해야하는 부분을 강조합니다.

HTML4와 HTML5에는 차이가 없습니다.