[Html] Span 태그 사용법 & 예제
- Web/HTML, CSS
- 2018. 6. 27.
<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>
결과
[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] 으로 만드는 테트리스 게임 (5) | 2018.06.29 |
|---|---|
| [Html] 으로 만드는 간단한 장애물 피하기게임 (2) | 2018.06.28 |
| [Html] div 태그 사용법 & 예제 (4) | 2018.06.26 |
| [Html] Margin, Padding 속성의 차이점과 사용법 (2) | 2018.06.25 |