<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>
'
결과
'태그및 css' 카테고리의 다른 글
| MarQuee (0) | 2019.02.15 |
|---|---|
| Pre 태그 (0) | 2019.02.15 |
| 문단을 나누는 P태그 (0) | 2019.02.15 |
| UI 태그, OL태그, DI태그, LI태그 (0) | 2019.02.15 |
| 하이퍼링크 (0) | 2019.02.15 |