<span> 태그는 <div> 태그와 같은 역할을 하지만
전혀 다른 태그이다. 그리고 <div>와 <span> 모두 레이아웃 구성을 할 때
없어서는 안될 페이지이다.
<div> 태그는 앞서 설명했듯이 가로 크기를 모두 차지하지만
<span> 태그는 문장 단위로 크기가 지정된다..
즉, 안에 내용에 따라서 <span> 태그의 크기가 지정되는 것이다.
<div>와 <span>의 사용방법을 보자면
<div>에 background-color 스타일을 주면 글을 쓴 곳의 전체의 배경색이 바뀌지만
<span>에 background-color 스타일을 주면 글자가 있는 곳의 배경색만 바뀐다.
원하는 곳에 따라 적용하는 방법이 다르니 자신이 원하는 곳에 맞춰서 쓰도록 하자.
예시
style 부분
<style type="text/css">
body {
background-color: #E1E1E1;
}
#div {
background-color: #CCCC99;
padding: 10px;
}
#span {
background-color: #CCFFFF;
}
</style>
body 부분
<body>
<div id="div">
오늘은 무슨 공부를 해보지?
오늘은 div태그를 공부해봐야겠다.
</div>
<br/>
<span id="span">
오늘은 무슨 공부를 해보지?
오늘은 span 태그를 공부해봐야겠다.
</span>
</body>
'WEB > HTML' 카테고리의 다른 글
| [HTML] <form> 태그 (0) | 2017.11.27 |
|---|---|
| [HTML] <input> 태그의 type 속성 (0) | 2017.11.27 |
| [HTML] <p>와 <br> 태그 (0) | 2017.11.27 |
| [HTML] <div> 태그 (0) | 2017.11.27 |
| [HTML] 오른쪽 클릭, 드래그, 선택 방지 (1) | 2017.11.27 |