HTML의 스팬 태그
- WBOY원래의
- 2024-09-04 16:25:35585검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
css html define for require break signal using class Attribute Property Event this overflow background transform word
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML의 사전 태그다음 기사：HTML의 사전 태그