HTML - 태그, 태그

HTML - 태그, 태그,

 태그 줄바꿈을 하는 태그

 태그

태그는 line break 약자로 줄바꿈을 할때 사용합니다.

태그는 닫아주는 태그가 없는 빈 태그<empty tag> 입니다 하지만 xhtml에서는 태그로, 열고 다는 태그를 대신합니다.

예제)

<html>
	<head>
		<meta charset="utf-8">
		<title>줄바꿈을 하는 태그</title>
	</head>

	<body>
		br태그는 line break 약자로 줄바꿈을 할때 사용합니다.<br>
		br태그는 닫아주는 태그가 없는 빈태그 입니다
	</body>

</html>

 태그 문단을 구분하는 태그

 태그

태그는 paragraph 약자로 문단을 구분할 때 사용합니다 태그 앞뒤로 여백이 들어가는 이 두번 들어간 것과 같이 나오게 됩니다.

* 태그는 앞뒤로 여백이 들어가는대 태그가 두번 들어간 것과 같은 결과가 나오게 됩니다.

예제)

<html>
	<head>
		<meta charset="utf-8">
		<title>문단을 구분하는 태그</title>
	</head>

	<body>
		<p>p태그는 paragraph 약자로 문단을 구분할때 씁니다.</p>
		<p>p태그는 앞뒤로 여백이 들어가는 br태그가 두번 들어간 것과 같이 나오게 됩니다. </p>
	</body>

</html>

<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>

저작자표시

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

HTML 기본구조 - 시멘틱 태그 (0)	2017.03.05
HTML - <div>, <span> 태그 (0)	2017.03.05
HTML - 목록을 만드는 태그 (0)	2017.03.05
HTML - 문법과 주의사항 (0)	2017.03.05
HTML - 기본 구조의 HTML 문서 만들기 (0)	2017.03.05