[HTML] div 태그와 span 태그

div 태그

출처 : https://coding-factory.tistory.com/188 [코딩팩토리]

오늘은 div태그에 대해 알아보겠습니다. div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다.

DIv태그 사용법 & 예제

태그	속성	비고
<div>	style	스타일
	width	가로 크기
	height	세로 크기
	border	테두리 굵기
	background-color	배경 색상
	float	정렬
	margin	여백

div 속성입니다.

1. style은 <div>태그의 스타일을 지정해주는 것으로 다른 속성들을 사용할 수 있게끔 해줍니다. <div style="">

2. width는 <div>의 가로 크기를 정해줍니다. px(픽셀)단위로도 정할 수 있고 %(비율)단위로도 정할 수 있습니다.

3. height는 <div>의 세로 크기를 정해줍니다. px(픽셀)단위로도 정할 수 있고 %(비율)단위로도 정할 수 있습니다.

4. border은 <div>의 테두리의 굵기를 정해줍니다. 숫자가 클수록 굵기가 굵어집니다.

5. background-color은 <div>태그의 배경색상을 정하는 속성입니다.

6. float은 div의 정렬(좌,우)을 하는 속성입니다. 가운데정렬은 안됩니다.

7. margin은 div의 정렬기준 끝에서부터 여백을 주는 속성입니다. (margin-top,margin,-bottom,margin-left,margin-right)

출처 : https://coding-factory.tistory.com/188 [코딩팩토리]

div와 span 태그 차이점

둘 다 페이지 영역(레이아웃) 설정할 때 사용.

div는 자동 줄바꿈 / span은 옆으로 붙음

div는 사각형 박스 영역 / span은 문장단위 영역

css color picker : https://www.w3schools.com/colors/colors_picker.asp