HTML의 스팬 태그
HTML의 Span 태그는 인라인 요소로 간주됩니다. div 태그와 유사하지만 div 태그는 블록 수준 요소에 의도적으로 사용되는 반면, 범위는 인라인 요소에 사용됩니다. 이는 사용자가 인라인 요소를 코드 구조로 그룹화하려고 할 때마다 주로 사용됩니다. HTML의 Span 태그는 요소의 class 또는 id 속성을 사용하여 특정 내용에 스타일을 부여하는 데 사용됩니다. HTML 문서에서 스팬 태그를 사용하여 시각적인 변경 자체를 수행하는 것은 불가능합니다. HTML 문서에서 인라인 태그로 작동합니다. 코드에 스팬 태그를 사용하면 코드와 HTML 속성을 줄이는 데 도움이 됩니다.
예제 구문
span 태그를 정의하는 구문은 다음과 같습니다.
구문:
<span class=""> Contents </span>
- 위에 표시된 대로 열기 안에 구문 텍스트가 포함되어 있습니다. 닫는 태그 스팬 속성으로 간주됩니다.
- 주로 인라인 요소를 그룹화하는 데 사용됩니다. HTML 문서에서 코드를 최소화하는 데 도움이 됩니다.
- div 태그와 유사하게 작동하지만 가장 큰 차이점은 div가 블록 수준 요소로 작동하는 반면,span 태그는 HTML에서 인라인 태그로 작동한다는 것입니다.
- span 태그 자체로는 시각적인 변화를 줄 수 없습니다.
- , , ,
, , < background-color>와 같은 태그에서 작동합니다. 그 외 다수. - 이 태그는 줄 바꿈을 만들 수 없지만 사용자가 다른 요소와 구분할 수 있는 기회를 제공합니다. 따라서 코드 전체를 변경하는 것이 아니라 선택한 텍스트만 변경하는 것이 가능합니다.
- 컨테이너에서 사용 가능한 너비 전체를 차지하는 것이 아니라 필요한 너비만큼만 차지합니다. 스팬 태그의 가장 좋은 예는 속성과 이미지입니다. 스팬 태그 사용을 보여주는 일부 텍스트에 컨테이너를 사용합니다.
- 코딩에 특정 속성이 필요하지 않습니다. 몇 가지 일반적인 CSS와 클래스를 사용하여 범위 태그를 정의할 수 있습니다.
- 특정 텍스트를 강조 표시하고, 텍스트에 배경색을 적용하고, HTML의 스팬 태그를 사용하여 텍스트에 배경 이미지를 추가할 수 있습니다.
- span 태그를 사용하여 텍스트의 글꼴을 변경할 수도 있습니다. 글꼴 크기, 색상, 배경색, 글꼴 스타일 등을 변경하는 데 도움이 됩니다.
예:
<!DOCTYPE html>
<html>
<head>
<title>Span tag in HTML </title>
<style>
.demo {
color: blue;
font-size: 200%;
position: relative;
top: 5px;
}
</style>
</head>
<body>
<p><span class="demo">О</span>Pride make us artificial and Humility make us real.</p>
<p>True fact about life </p>
</body>
</html>출력:
- Span 태그에는 특정 속성이 없습니다. 다른 태그와 마찬가지로 전역 속성과 이벤트 속성도 지원합니다.
HTML의 Span 태그 속성
을 사용하여 스타일을 적용하는 몇 가지 속성은 다음과 같습니다. 그 내용은 다음과 같습니다.
- CSS 글꼴 스타일: 주어진 텍스트에 스타일을 적용하는 데 사용됩니다. 텍스트는 일반, 기울임꼴, 이니셜, 상속 등이어야 합니다.
- CSS 글꼴 모음: 주어진 목록의 다양한 글꼴 유형을 특정 텍스트에 적용하는 데 사용됩니다.
- CSS 글꼴 크기: 텍스트의 글꼴 크기를 설정하는 것이 좋습니다.
- CSS 글꼴 가중치: 이 속성은 글꼴을 굵게 또는 두껍게 설정하는 데 사용됩니다.
- CSS text-transform: 텍스트를 대문자로 만듭니다.
- CSS 텍스트 장식: 텍스트 장식 선, 텍스트 장식 색상 등의 형태로 텍스트를 장식하는 데 사용되는 속성입니다.
- CSS 색상: 텍스트 내용과 텍스트 장식의 색상을 지정하는 데 사용되는 스팬 태그의 속성.
- CSS background-color: 요소의 배경색을 설정하는 데 유용한 속성입니다.
- CSS text-shadow: 이 속성을 사용하면 사용자가 텍스트에 그림자를 추가할 수 있습니다.
- CSS text-align-last: 텍스트 정렬에 도움이 됩니다.
- CSS 단어 간격: span 태그의 이 속성은 단어 사이의 간격을 관리하는 데 사용됩니다.
- CSS 공백: 이 속성은 지정된 요소 내부의 공백을 처리하는 데 도움이 됩니다.
- CSS line-height: HTML 코드의 줄 높이를 제공합니다.
- CSS word-break: 이 속성은 실제 줄을 끊어야 하는 위치를 정의하는 데 도움이 됩니다.
- CSS text-overflow: 이것은 사용자에게 신호를 보내야 하는 표시되지 않은 오버플로된 콘텐츠를 식별하는 데 도움이 되는 범위 태그의 가장 유용한 속성입니다.
HTML의 Span 태그 예
html의 스팬 태그 예는 다음과 같습니다.
예시 #1
코드:
<!DOCTYPE html>
<html>
<head>
<title>HTML Span Tag</title>
</head>
<style>
.imgdemo {
padding-left:25px;
background:url(./Content/data/2.jpg) no-repeat top left;
display: inline-block;
height: 150px;
width: 150px;
}
</style>
<body>
<!-- span tags with inline style/css -->
<h2>Span tag with text color</h2>
<span style="color:brown;">
Do those things which makes your soul happy </span>
<br>
<h2> Span tag with background color</h2>
<span style="background-color:lightblue;">
Everybody have natural beauty. Try look at your picture when you are a baby. Your eyes, eyebrows, lips, body. When you are smiling, crying, staring, etc. That it, you got it.</span>
<br>
<h2> Span tag with background image</h2>
<br>
<span class="imgdemo" style="color: azure; font-size: 16px; font-display: block;">
Image as background</span>
</body>
</html>출력:
예시 #2
코드:
<!--Example 2--> <!DOCTYPE html> <html> <head> <title>HTML Span Tag</title> </head> <body> <h2> Span tag Examples</h2> <p>Good, Better, Best Never let it rest. <span style="color:crimson;"> "Till your good is better and your better is best" </span></p> <p>Everyday you have a choice -<span style="font-family: cursive; font-weight: 200; font- size: 18px;"> STAY THE SAME OR CHANGE </span> </p> <p>Whenever you see a successful person you only see the public glories, never the private sacrifices to reach them."<span style="background-color: aqua ; color:darkblue;"> "Opportunities don't happen, you create them" </span></p> </body> </html>
출력:
Example #3
Code:
<!DOCTYPE html>
<html>
<style>
.spandemo {
background:url(./Content/data/3.jpg) no-repeat top left;
display: inline-block;
padding-top: 20px;
width: 1800px;
height: 500px;
}
</style>
<body>
<h2> Span tag for image</h2> <br>
<span class="spandemo" style="color: aliceblue; font-weight: bold;">
<p> Nature always wears<br> Color of SPIRIT. </p> <br>
Heaven is under our feet <br>as well as over our heads <br>
<p> Deep in their roots,<br>all flowers Keep the light </p>
<p> My soul steers me<br> into nature's silence</p>
</span>
</body>
</html>Output:
Conclusion
From all the above information, we came to know that the tag in HTML is used to give styling to inline elements. One can group this styling attribute and specifies them inline. Span tag mainly used to arrange structural sections and proper layout sections on our webpage with the help of inline CSS.
위 내용은 HTML의 스팬 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
HTML에서 텍스트 이동
Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
