span 예제

HTML 범위 요소는 인라인 요소 및 콘텐츠에 대한 일반 인라인 컨테이너입니다. 스타일 지정을 위해 요소를 그룹화하는 데 사용되었습니다(클래스 또는 id 특성사용), 다른 의미 체계 요소를 사용할 수 없을 때 사용하는 더 나은 방법입니다. 범위는 div 태그와 매우 유사하지만 div는 블록 수준 태그이며 범위는 인라인 태그입니다. Span 태그는 쌍을 이루는 태그로 열기() 태그가 모두 있으며 태그를 닫아야 한다는 의미입니다. 범위 태그는 div 태그와 유사한 줄 바선을 만들지 않고 사용자가 동일한 줄 내의 페이지에서 주변의 다른 요소와 사물을 분리할 수 있도록 합니다. 줄 바그 걸이를 방지하면 선택한 텍스트만 변경하여 주변의 다른 모든 요소를 동일하게 유지합니다. 아래 예제는 범위와 div 태그 의 차이를 표시하고 div 태그에는 전체 너비가 포함되어 있고 범위 태그에는 필요한 너비만 포함하고 나머지 부분은 다른 요소에 대해 무료입니다. 출력 : 범위 태그와 자바 스크립트를 조작 : 아래 예제에서 우리는 ID = “데모”와 단락 내부의 범위 태그를 추가 우리는 이 예제에서 자바 스크립트를 적용하여 텍스트를 변경할 수 있습니다 GFG는 버튼을 클릭 한 후 “GeeksforGeeks”를 변경합니다. 예: 출력: 범위 태그를 사용하여 텍스트의 일부를 색상/배경 색으로 설정할 수 있습니다. 예: 다음 예제에서는 어린이들에게 무지개를 그리는 방법을 가르치기 위해 고안된 문서를 보여 주었습니다. 젊은 관객에게 더 매력적으로 하기 위해 스팬 요소를 사용하여 이름이 색상으로 표시됩니다. 이 예제에서는 태그에 클래스 특성을 추가하고 태그의 콘텐츠에 스타일을 별도로 제공했습니다. 그러나 태그를 사용하면 코드를 줄일 수 있으며 아래 예제참조로 는 스팬 태그에 CSS를 적용하여 태그를 사용하여 위의 예와 동일한 출력을 표시합니다.

예: HTML로 작성할 때 태그는 콘텐츠를 그룹화하거나 관용구를 구성하기 위한 인라인 컨테이너로 사용됩니다. CSS 또는 태그를 사용하여 텍스트 섹션의 언어 또는 스타일을 변경하려는 경우에 유용합니다. 다음 섹션에는 사용 중의 예제와 관련 특성 및 브라우저 호환성을 포함하여 이 태그에 대한 정보가 포함되어 있습니다. div, 특히 스팬은 실제로 자주 사용해서는 안됩니다. 대신 사용해야 하는 합리적인 대안이 있을 때마다. 예를 들어”crazy”라는 단어를 강조하고 클래스 “paper”가 시각적 강조를 위해 기울임꼴을 추가하려는 경우 더 풍부하고 의미있는 콘텐츠의 경우 코드는 다음과 같이 보일 수 있습니다. 각 태그는 다른 요소에 대한 여유 공간과 공간의 나머지 를 소요하기 때문에 다른 요소에 대한 아래 예제에서 볼 수 있도록 각 태그는 동일한 줄에 표시됩니다.