글
<CENTER,<P>,<BR>,<P ALIGN> 태그 배우기
HTML
2011. 6. 26. 15:51
오늘은 몇가지 태그에 대해서 배워봅시다. 태그라는 것은 예를들면 앞에서 배운 <html></html>이런겁니다. 시작과 끝을 알려주는 거죠.
처음으로 <CENTER>태그에 대해서 배워보겠습니다. center해석하면 가운데라는 뜻이지요. 말그대로 문서를 가운데로 정렬시켜주는 기능을 합니다.
예를 한번 들어보지요.
실행(익스플로러에서 불러오기)해보면 이렇게 가운데로 정렬되어 나타나는 것을 보실수 있을겁니다.
그럼 문서를 한번 살펴볼까요?
<html> - html문서의 시작을 알리는 거지요.
<head> - 머리부분입니다. 제목같은게 들어가지요.
<title><CENTER>태그</title> - 제목을 <CENTER>태그라고 합니다. 위에 그림처럼 익스플로러 창 맨위에 그 제목이 나와있지요. 그리고 html에서는 < 와 > 표시를 그냥 그렇게 쓰면 태그와 해깔리겠죠. 그래서 <는 < >는 >라고 써야 올바르게 표시가 됩니다.
</head> - 머리부분의 끝이라는 얘깁니다.
<body> - 몸체의 시작입니다. 여기에 보통 문서의 내용들이 들어갑니다.
<CENTER>이문장이 가운데 정렬되어 나타납니다</CENTER> - 이 문장을 가운데 정렬로 해서 나타내라는 뜻입니다.
</body> - 문서의 몸체 끝입니다.
</html> - html문서의 끝입니다. 이 뒤에는 아무내용이나 적어도 영향을 미치지 않습니다.
그다음에는 <BR>태그에 대해 배워보겠습니다. <BR>태그는 한줄을 바꾸는 기능을 합니다. 무슨말이냐면
안녕하세요 <BR> 어서오세요
이렇게하면 화면에 안녕하세요라고 나오고 한줄넘어가서 그 밑에줄에 어서오세요가 출력되는거지요. 자 이것도 예제를 통해서 배워봅시다.
실행하면 이렇게 되지요.
자 그럼 하나씩 해석해 볼까요?
<html>
<head>
<title><BR>태그</title>
</head>
<body>
안녕하세요?? <BR> - 안녕하세요??라고 출력하고 한줄 밑으로 이동합니다.
어서오세요. <BR> - 한줄 밑에서 어서오세요라고 출력하고 다시 한줄 밑으
로 이동합니다.
이렇게 다음줄에 출력되지요. <BR> - 이 말을 출력하고 다시 한줄밑으로 이동합
니다.
</body>
</html>
그럼 뭐가 이동하는 걸까요? 커서 또는 포커스가 이동한다고 보면 될겁니다. 가상적으로 커서(커서가 뭔지는 아시죠? 도스창에서보면 깜빡거리는거 있지요?)가 그 아래줄 맨 앞으로 이동해 있다고 생각하시면 됩니다.
하나더 해 볼까요?
<P> 태그인데 이것은 pharagraph의 약자지요. 문단입니다 그죠? 위에서 처럼 그냥 안녕하세요 이렇게 쓰면 한줄로 나오죠. 근데 앞에 <P>를 붙이면 안녕하세요 쓰고 한줄 띄워지고 한줄 더 띄워집니다. 그 차이밖에 없어요. 그리고 <P> 태그에는 ALIGN이라고 해서 정렬기능을 줄수가 있습니다. ALIGN을 해석하면 정렬이라는 뜻이지요. 이 정렬기능에는 RIGHT,CENTER,LEFT기능이 있습니다. 즉, 오른쪽정렬, 가운데 정렬, 왼쪽 정렬이 있습니다. 이것도 예제로 한번 알아보면 쉽겠죠?
익스플로러에서 불러보면 이렇게 나옵니다.
그럼 하나씩 알아볼까요?
<html>
<head>
<title><P>태그</title>
</head>
<body>
안녕하세요?? - br태그사용<BR> - br태그니깐 한줄만 바뀝니다.
어서오세요. - br태그사용<BR>
<p> 반갑습니다. - p태그사용, 자동으로 한줄이 바뀌고 한줄더 띄워집니다. - p
태그라서 한줄바뀌고 한줄 더 바뀝니다.
<p align=right> 오른쪽 정렬되어 나타납니다. - 정렬속성을 오른쪽을 주면 위의 그림처럼 오른쪽에 정렬되어 나타납니다.
<p align=left> 왼쪽 정렬되어 나타납니다 - 속성을 왼쪽을 주면 왼쪽에 정렬되겠죠 물론.
<p align=center> 가운데 정렬되어 나타납니다. - 가운데로 준 모습입니다. <CENTER>속성과 같은 결관데 한줄이 더 띄워지겠죠.
</body>
</html>
오늘은 여기까지 하겠습니다. 별로 어렵지 않은 내용인데 제가 설명이 부족해서 어렵게 보일수도 있겠네요. 죄송하구요 다음에는 더 쉽고 알찬 내용으로 찾아뵙겠습니다.
처음으로 <CENTER>태그에 대해서 배워보겠습니다. center해석하면 가운데라는 뜻이지요. 말그대로 문서를 가운데로 정렬시켜주는 기능을 합니다.
예를 한번 들어보지요.
이렇게 문서를 center.html이라고 하나 만듭니다.
실행(익스플로러에서 불러오기)해보면 이렇게 가운데로 정렬되어 나타나는 것을 보실수 있을겁니다.
그럼 문서를 한번 살펴볼까요?
<html> - html문서의 시작을 알리는 거지요.
<head> - 머리부분입니다. 제목같은게 들어가지요.
<title><CENTER>태그</title> - 제목을 <CENTER>태그라고 합니다. 위에 그림처럼 익스플로러 창 맨위에 그 제목이 나와있지요. 그리고 html에서는 < 와 > 표시를 그냥 그렇게 쓰면 태그와 해깔리겠죠. 그래서 <는 < >는 >라고 써야 올바르게 표시가 됩니다.
</head> - 머리부분의 끝이라는 얘깁니다.
<body> - 몸체의 시작입니다. 여기에 보통 문서의 내용들이 들어갑니다.
<CENTER>이문장이 가운데 정렬되어 나타납니다</CENTER> - 이 문장을 가운데 정렬로 해서 나타내라는 뜻입니다.
</body> - 문서의 몸체 끝입니다.
</html> - html문서의 끝입니다. 이 뒤에는 아무내용이나 적어도 영향을 미치지 않습니다.
그다음에는 <BR>태그에 대해 배워보겠습니다. <BR>태그는 한줄을 바꾸는 기능을 합니다. 무슨말이냐면
안녕하세요 <BR> 어서오세요
이렇게하면 화면에 안녕하세요라고 나오고 한줄넘어가서 그 밑에줄에 어서오세요가 출력되는거지요. 자 이것도 예제를 통해서 배워봅시다.
이렇게 입력합니다.
자 그럼 하나씩 해석해 볼까요?
<html>
<head>
<title><BR>태그</title>
</head>
<body>
안녕하세요?? <BR> - 안녕하세요??라고 출력하고 한줄 밑으로 이동합니다.
어서오세요. <BR> - 한줄 밑에서 어서오세요라고 출력하고 다시 한줄 밑으
로 이동합니다.
이렇게 다음줄에 출력되지요. <BR> - 이 말을 출력하고 다시 한줄밑으로 이동합
니다.
</body>
</html>
그럼 뭐가 이동하는 걸까요? 커서 또는 포커스가 이동한다고 보면 될겁니다. 가상적으로 커서(커서가 뭔지는 아시죠? 도스창에서보면 깜빡거리는거 있지요?)가 그 아래줄 맨 앞으로 이동해 있다고 생각하시면 됩니다.
하나더 해 볼까요?
<P> 태그인데 이것은 pharagraph의 약자지요. 문단입니다 그죠? 위에서 처럼 그냥 안녕하세요 이렇게 쓰면 한줄로 나오죠. 근데 앞에 <P>를 붙이면 안녕하세요 쓰고 한줄 띄워지고 한줄 더 띄워집니다. 그 차이밖에 없어요. 그리고 <P> 태그에는 ALIGN이라고 해서 정렬기능을 줄수가 있습니다. ALIGN을 해석하면 정렬이라는 뜻이지요. 이 정렬기능에는 RIGHT,CENTER,LEFT기능이 있습니다. 즉, 오른쪽정렬, 가운데 정렬, 왼쪽 정렬이 있습니다. 이것도 예제로 한번 알아보면 쉽겠죠?
이렇게 입력하고 p.html로 저장합니다.
그럼 하나씩 알아볼까요?
<html>
<head>
<title><P>태그</title>
</head>
<body>
안녕하세요?? - br태그사용<BR> - br태그니깐 한줄만 바뀝니다.
어서오세요. - br태그사용<BR>
<p> 반갑습니다. - p태그사용, 자동으로 한줄이 바뀌고 한줄더 띄워집니다. - p
태그라서 한줄바뀌고 한줄 더 바뀝니다.
<p align=right> 오른쪽 정렬되어 나타납니다. - 정렬속성을 오른쪽을 주면 위의 그림처럼 오른쪽에 정렬되어 나타납니다.
<p align=left> 왼쪽 정렬되어 나타납니다 - 속성을 왼쪽을 주면 왼쪽에 정렬되겠죠 물론.
<p align=center> 가운데 정렬되어 나타납니다. - 가운데로 준 모습입니다. <CENTER>속성과 같은 결관데 한줄이 더 띄워지겠죠.
</body>
</html>
오늘은 여기까지 하겠습니다. 별로 어렵지 않은 내용인데 제가 설명이 부족해서 어렵게 보일수도 있겠네요. 죄송하구요 다음에는 더 쉽고 알찬 내용으로 찾아뵙겠습니다.
'HTML' 카테고리의 다른 글
| <a href></a>, 새창으로 문서이동하기 (0) | 2011.07.01 |
|---|---|
| <HR> 선그리기 (0) | 2011.06.29 |
| <B> <I> 태그 (0) | 2011.06.29 |
| <H>,<FONT SIZE> 태그 (0) | 2011.06.28 |
| html문서의 구조와 간단한 문서 작성하기 (0) | 2011.06.25 |
