▶ div태그와 span태그의 사용법과 차이점
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<h3>div 공간 분할</h3>
<div style="background-color: pink;">div 첫 번째 영역입니다.</div>
<div style="background-color: skyblue;">div 두 번째 영역입니다.</div>
<div style="background-color: aliceblue;">div 세 번째 영역입니다.</div>
<p/>
<h3>span 공간 분할</h3>
<span style="background-color: peru;">span 첫 번째 영역입니다.</span>
<span style="background-color: tan;">span 두 번째 영역입니다.</span>
<span style="background-color: gold;">span 세 번째 영역입니다.</span>
</body>
</html>
<div>와 <span>태그를 실습해보겠습니다.
구역 구별이 가능하게 style로 뒷배경을 색상을 넣어봤습니다.
div는 해당 가로글이 모두 적용이 되는걸 확인할 수 있는 반면에, span은 inline으로써 옆으로 붙는걸 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<h3>div 공간 분할</h3>
<div style="background-color: pink;">
div 영역.
<span style="background-color: peru;">span 첫 번째 영역입니다.</span>
div 영역.
<span style="background-color: tan;">span 두 번째 영역입니다.</span>
div 영역.
<span style="background-color: gold;">span 세 번째 영역입니다.</span>
</div>
</body>
</html>
div영역에 pink를 주고 그안에 span을 넣어주고 그리고나서 </div>로 태그종료했습니다.
그랬더니 span태그는 중간중간에 들어가고 비어있는 공간에 div영역이라고 글씨를 적어놓고 마지막에 </div>로 닫았더니 위와 같은 결과가 되었습니다.
'Dev. Front-End > HTML' 카테고리의 다른 글
| [HTML5] header / nav / footer / section / article / figure 의 사용법 (0) | 2019.08.12 |
|---|---|
| [HTML] form태그와 fieldset / legend태그 및 속성 (method, name, action, onsubmit, target) (0) | 2019.08.10 |
| [HTML] input태그 및 속성 (type, text, password, hidden, radio, checkbox, search, number) 사용법 (0) | 2019.08.09 |
| [HTML] ul / li / ol / dl / dt / dd 사용법 (0) | 2019.08.08 |
| [HTML] img태그 (이미지넣기) 사용법 (0) | 2019.08.07 |
| [HTML] a태그 (주소 링크 달기) 사용법 및 속성 (0) | 2019.08.06 |
| [HTML] table / caption / tr / td / th / colspan / rowspan / cellpadding / cellspacing 테이블만들기 (0) | 2019.08.05 |
| [HTML] h / font / br & 주석처리 (0) | 2019.08.04 |
