jquery div html 태그 적용 및 span 태그 와 비교

div 태그 많이 사용하시지요? HTML5로 진화하면서 더욱 사용성이 많아졌는데요. div는 span 태그와 마찬가지로 영역을 설정 할 때 사용합니다. 또한, div와 span 태그는 html의 태그를 적용 할 수도 있습니다.

오늘은 jquery div html 태그 적용 및 span 태그 와 비교에 대해서 알아보도록 하겠습니다.
먼저 jquery를 사용해서 div에 html 적용 부터 알아보고 다음으로 div와 span의 차이점이 무엇인지 알아보겠습니다.

▶ jquery div html

---

소스의 body 안에 html을 적용할 div태그와 버튼을 아래와 같이 만들어 줍니다.
<input type="button" id="btnHtml" value="html"></input>
<div id="divContents"></div>

그리고 자바스크립트 영역에 아래와 같이 스크립트를 만들어 줍니다.
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#btnHtml').click(function(){
var htmlTag = "<img src='http://mimgnews2.naver.net/image/109/2015/04/28/201504281724775800_553f43ca905df_99_20150428173706.jpg?type=w540' />";
htmlTag = htmlTag + "<br>" + "안녕하세용";
$("#divContents").html(htmlTag);
    });
});
</script>

그런 다음 실행을 하시면 오오~~~ html 태그가 그대로 적용되어 div에 표현이 됩니다.ㅎㅎㅎ
.html() 속성 말고도 해당 요소의 마지막에 내용을 추가해주는 .append() 속성도 있고 .prepend() 속성 처럼 해당 요소의 처음 시작 부분에 내용을 추가해주는 속성도 있습니다.

▶ span 태그와 div 태그 비교

---

다음으로 div 태그와 span 태그의 비교을 알아볼게요.
둘다 영역을 지정하는 태그인데요. div는 박스 형태의 영역을 지정할 때 사용하고 span은 단어 단위의 영역을 지정 할 때 사용 합니다.
예를 보시면 금방 이해가 되실 덴데요. 아래와 같이 간단한 소스코드를 만들고 실행하세요.
<div id="divTag" style="background-color: #FAF37D;">
1줄 : div 영역의 글을 쓰기 시작합니다.<br/>
2줄 : div 영역의 글을 쓰기 시작합니다.<br/>
3줄 : div 영역의 글을 쓰기 시작합니다.<br/>
4줄 : div 영역의 글을 쓰기 시작합니다.<br/>
5줄 : div 영역의 글을 쓰기 시작합니다.<br/>
    </div>
<br/>
    <span id="spanTag" style="background-color: #00A2E8;">
        1줄 : span 영역의 글을 쓰기 시<br/>
2줄 : span 영역의 글을 쓰기 시작<br/>
3줄 : span 영역의 글을 쓰기 시작합<br/>
4줄 : span 영역의 글을 쓰기 시작합니<br/>
5줄 : span 영역의 글을 쓰기 시작합니다.<br/>
    </span>

실행된 모습을 보시면 div와는 다르게 span은 단어 단위로 영역을 잡는 것을 보실 수 있습니다.
* 주의 : span은 한줄 한줄 글의 길이에 따라서 영역을 잡으므로 주의 하셔야 합니다.



여기까지 jquery div html 태그 적용 및 span 태그 와 비교에 대해서 알아보았습니다.
오늘도 행복한 하루되시길 축원 드립니다.