[Html] Span 태그 사용법 & 예제
페이지 정보
본문
span 태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 span태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당이 됩니다. <span>태그로 요소를 감싸면 CSS나 Javascript로 그 부분을 변형시키는것이 가능해 집니다.
<span>태그 사용법
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>태그 외곽에 테두리를 줄 수 있는 속성입니다.
<!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>태그 사용법
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>태그 외곽에 테두리를 줄 수 있는 속성입니다.
<!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) 24.02.27
- 다음글그누보드 db연결 24.02.19
댓글목록
등록된 댓글이 없습니다.
