div 태그
div 태그는 Division의 약자로 레이아웃(전체적인 틀)을 만들 때 주로 사용한다.
웹 페이지에서 논리적 구분을 정의하는 태그이다.
속성
style 스타일
width 가로 크기
height 세로 크기
border 테두리 굵기
background-color 배경 색상
float 정렬
margin 여백
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div</title>
</head>
<body>
<div style="width: 100px; height: 100px;">div1
</div>
<div style="width: 100px; height: 100px; border: 10px solid black">div2
</div>
<div style="width: 100px; height: 100px; border: 10px solid black; background-color: green" >div3
</div>
<div style="width: 100px; height: 100px; border: 10px solid black; background-color: green; float:right;" >div4
</div>
<div style="width: 100px; height: 100px; border: 10px solid black; background-color: green; float:right;" >div5
</div>
<div style="width: 100px; height: 100px; border: 10px solid black; background-color: green; float:left;" >div6
</div>
</body>
</html>
Span 태그
Inline Text Container (문장 단위로 텍스트 영역을 지정하는 것)
div 태그와 비슷하지만 span은 한문장 단위이고, 줄바꿈이 되지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div</title>
</head>
<body>
<span style="background-color: green">span1</span>
<span style="background-color: red">span2</span>
<span style="background-color: blue">span3</span>
</body>
</html>
참고
https://coding-factory.tistory.com/188
http://mwultong.blogspot.com/2007/03/html-css-span-span-tag.html