[Html] Span 태그 사용법 & 예제

<span>태그는 아주 다방면으로 활용이 가능한 유용한 태그입니다. 주로 <div>와 <p>태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용됩니다. span 태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 span태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당이 됩니다. <span>태그로 요소를 감싸면 CSS나 Javascript로 그 부분을 변형시키는것이 가능해 집니다.


<span>태그 사용법


 태그

속성 

비고 

 <span>

display 

diplay요소 변경 

 width

가로크기 

height 

세로크기 

background-color 

 배경색 변경

 color

글자 색 변경 

 font-style

글자 형식 변경 

margin 

외부 여백설정 

 padding

내부 여백설정 

 border

 테두리 설정


1. display는 <span>태그의 요소를 변경할 수 있는 속성입니다. <span>태그의 display속성 defalut값은 inline으로 되어있습니다.

2. width는 <span>태그의 가로 사이즈를 지정해줄 수 있는 속성입니다. 이 속성을 사용하기 위해서는 display속성값을 inline에서 block으로 바꿔줘야합니다.

3. height는 <span>태그의 세로 사이즈를 변경시킬 수 있는 속성입니다. 이 속성을 사용하기 위해서는 display속성값이 inline일 경우에는 적용되지 않습니다.

4. background-color는 <span>태그의 배경색을 지정해줄 수 있는 속성입니다.

5. color는 <span>태그안에있는 글자의 색상을 지정해주는 속성입니다.

6. font-style는 <span>태그안의 글자 형식을 지정해주는 속성입니다.

7. margin <span>태그와 레이아웃간의 여백(외부여백)을 지정해주는 속성입니다.

8. padding <span>태그의 내부여백을 지정해주는 속성입니다.

9. border <span>태그 외곽에 테두리를 줄 수 있는 속성입니다.


예제

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title></title>
    <style>
        .box{
            display:inline-block; /* default값 inline */
            width:100px; /* display가 block일때만 지정가능 */
            height:50px; /* display가 block일때만 지정가능 */
            background-color:green; /* 배경색 = green */
            margin-left:10px; /* 왼쪽 margin 10px */
            padding:20px; /* padding 20px */
            border:5px dashed skyblue; /* 테두리 */
            font-style:italic; /* 글자형태 : 이태릭체 */
            color:white /* 글자색 : white */
        }
    </style>
 
</head>
<body>
	<!-- 크기와 배경색 지정 -->
	<span style ="display:block;width:100px;height:50px;background:yellow">애국가</span>
	
	<!-- 글자의 색상과 타입 지정 -->
	<p>동해물과 <span style="color:blue; font-weight:bold">백두산이 </span>마르고 닳도록 <span style="color:red;font-style:italic">하나님이 보우하사</span> 우리나라 만세<br>
	
	<!-- margin, padding, 테두리색 지정 -->
	<span style ="display:inline-block; margin:10px; padding:5px; border:dotted 5px blue; color:blue; font-weight:bold; background:pink;">무궁화 삼천리 화려강산</span> <br>
	
	<!-- span태그의 css지정 -->
	<span class="box">대한사람 대한으로 길이 보전하세</span>
</body>
</html>

'

결과


span태그


[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)

[Html] Pre태그 사용법 & 예제

[Html] Margin, Padding 속성의 차이점과 사용법

[Html] Div 태그 사용법 & 예제

[Html] 수평선 긋기 HR태그 사용법


댓글(1)

  • 우왕
    2020.06.17 00:23

    완전 간단하고 알아보기 쉬운 설명 감사합니다!!!

Designed by JB FACTORY