HTML - <div>, <span> 태그

HTML - <div>, <span> 태그

<div> 영역을 나누는 태그

<DIV> 태그

<div> 태그는 division의 약자로 레이아웃을 나눌 때 주로 쓰입니다. 태그의 특성상 가로 크기가 영역에 꽉차게 설정되는데, CSS의 float 속성을 이용하면 내용에 꽉 붙게 설정할 수도 있습니다. 가로(width), 세로(height) 크기를 지정할수 있고 테이블 대체하며 레이아웃 배치 용도로 주로 쓰입니다

DIV 영역만 지정

<html>
	<head>
		<meta charset="utf-8">
		<title>영역을 나누는 태그</title>
	</head>

	<body>
		
		<div>
			단순히 영역만 지정
		</div>

	</body>

</html>

DIV 지정된 영역에 바탕색 지정

1) background: 색상

<html>
	<head>
		<meta charset="utf-8">
		<title>영역을 나누는 태그</title>
	</head>

	<body>
		
		<div style="background: red";>
			지정된 영역에 바탕색을 설정
		</div>

	</body>

</html>

DIV 가로 세로 크기 설정

1) width : 세로 크기

2) height : 가로크기

<html>
	<head>
		<meta charset="utf-8">
		<title>영역을 나누는 태그</title>
	</head>

	<body>
		
		<div style="background: red ; width: 210px ; height: 20px">
			가로 세로 크기 설정
		</div>

	</body>

</html>

DIV 영역 안쪽 여백 설정

1) padding : 여백의 순서는 윗쪽 오른쪽, 아래쪽, 왼쪽입니다 각각의 여백을 지정하지 않고, 하나만 쓰면 동일한 여백이 정용됩니다.

2) padding : 윗쪽, 오른쪽, 아래쪽, 왼쪽

<html>
	<head>
		<meta charset="utf-8">
		<title>영역을 나누는 태그</title>
	</head>

	<body>
		
		<div style="background: red ; width: 210px ; height: 20px ; padding: 30px 20px 30px 20px ;">
			영역 안쪽 여백 설정
		</div>

	</body>

</html>

DIV 테두리 설정

1) border : 선긋기(숫자px) 선종류 선색상

2) 선종류 : solid (실선), dotted(점선) 등등

3) 선색상 green, blue, red 등 등 색상을 입력하거나 색상코드를 적습니다.

<html>
	<head>
		<meta charset="utf-8">
		<title>영역을 나누는 태그</title>
	</head>

	<body>
		
		<div style="width: 210px ; height: 20px ; border: 1px solid red ;">
			영역 안쪽 여백 설정
		</div>

	</body>

</html>

DIV 영역내의 위치 설정하기

1) text-align : left(왼쪽), center(가운데), right(오른쪽)

<html>
	<head>
		<meta charset="utf-8">
		<title>영역을 나누는 태그</title>
	</head>

	<body>
		
		<div style="text-align: center; ">
			영역내의 위치 설정하기
		</div>

	</body>

</html>

DIV 영역내 모든 글자의 크기 종류 색상

1) style : [색상이름 또는 색상코드] [숫자] [기울임] [굴기] [글자체 종류] [숫자]

2) coler : 색상이름 또는 #000000 같은 색상코드

3) font-style : 숫자px

4) font-style : 기울임(생략가능)

5) font-weight : 굵기

6) font-family : 글자체 종류

7) line-height : 숫자px

<html>
	<head>
		<meta charset="utf-8">
		<title>영역을 나누는 태그</title>
	</head>

	<body>
		
		<div style="text-align: center; ">
			영역내의 위치 설정하기
		</div>

	</body>

</html>

DIV 영역과 주변과 여백 설정

1) margin의 숫자는 차례대로 윗쪽 오른쪽 왼쪽 여백이며 숫자를 하나만 지정하면, 사방에 모두 동일한 여백이 적용됩니다.

2) margin-top : 왼쪽 여백 지정

3) margin-bottom : 아랫쪽 여백 지정

4) margin-left : 왼쪽 여백 지정

5) margin-right : 오른쪽 여백 지정

DIV 영역의 위치 설정

1) foloat : left(왼쪽), right(오른쪽)

<html>
	<head>
		<meta charset="utf-8">
		<title>영역을 나누는 태그</title>
	</head>

	<body>
		<div style="height: 30px ; border: 1px solid blue ; float: right ; ">
			div 영역내 모든 글자의 크기 종류 색상
		</div>

	</body>

</html>

<span> 레이아웃을 설정하는 태그

<span> 태그

<div> 태그와 비슷하게 레이아웃을 설정할 때 스입니다

하지만 영역에 꽉차게 표시되지 않고, 크기를 설정 할수 없습니다.

span 영역지정

<html>

	<head>

		<meta charset="utf-8">
		<title>span 태그 영역지정</title>

	</head>

	<body>
		<span>span 태그 영역지정</span>
	</body>

</html>

span 지정된 영역에 바탕색 지정

<html>

	<head>
		<meta charset="utf-8">
		<title>span 태그 영역지정</title>
	</head>

	<body>
		<span style="background-color:#9f3">span 태그 영역지정</span>
	</body>


</html>

저작자표시

'웹언어 > HTML' 카테고리의 다른 글

HTML - <a> 다른문서로 이동하는 태그 (0)	2017.03.05
HTML 기본구조 - 시멘틱 태그 (0)	2017.03.05
HTML - <br>태그, <p>태그 (0)	2017.03.05
HTML - 목록을 만드는 태그 (0)	2017.03.05
HTML - 문법과 주의사항 (0)	2017.03.05