HTML의 Span 태그는 인라인 요소로 간주됩니다. div 태그와 유사하지만 div 태그는 블록 수준 요소에 의도적으로 사용되는 반면, 범위는 인라인 요소에 사용됩니다. 이는 사용자가 인라인 요소를 코드 구조로 그룹화하려고 할 때마다 주로 사용됩니다. HTML의 Span 태그는 요소의 class 또는 id 속성을 사용하여 특정 내용에 스타일을 부여하는 데 사용됩니다. HTML 문서에서 스팬 태그를 사용하여 시각적인 변경 자체를 수행하는 것은 불가능합니다. HTML 문서에서 인라인 태그로 작동합니다. 코드에 스팬 태그를 사용하면 코드와 HTML 속성을 줄이는 데 도움이 됩니다.
span 태그를 정의하는 구문은 다음과 같습니다.
구문:
<span class=""> Contents </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>출력:
을 사용하여 스타일을 적용하는 몇 가지 속성은 다음과 같습니다. 그 내용은 다음과 같습니다.
html의 스팬 태그 예는 다음과 같습니다.
코드:
<!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>출력:
코드:
<!--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>
출력:
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:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
