HTML, 문서 단락 태그에 대해 배워보자.

☆º━Design Tutorial/HTML/CSS 2009/12/01 09:05

지난 시간까지의 기본 태그에 대해서 배워봤는데요, 어떠셨나요? 어렵지는 않았는지요? 오늘은 단락 태그에 관해 배우겠습니다.

태그를 처음 접하실때 이해도 중요하지만 메모장이나 에디터 프로그램 여시고 각 섹션별로 하나씩 안보고도 자유자재로 쓸 수 있을 만큼 외우시는 것이 제일 좋은 방법이라고 말씀 드리고 싶습니다.

처음 영어를 배울때 알파벳은 무조건 외우셨지요? 그것과 같은 맥락입니다. 테이블 태그까지 대충 10~13단락으로 구성 할 것인데 이것은 html문서의 가장 기본적인 것들입니다.그냥 따라해보시면서 무조건 외우세요.

기초태그가 끝나면 웹 표준에 접근해서 CSS로 바로 넘어갈 예정이니까 이 부분에서 기초태그에 관해 모르면 전혀 따라 올수가 없습니다. 아셨죠? 지난 시간에 배운 본문 글자 속성에 관한 태그들을 복습하고 본문으로 들어 갈께요.

※ 지난 시간 복습하기

˚ 본문 글자 크기 지정하기 : 본문 내용 크기는 1~7까지의 숫자로 지정할 수 있고, px나 pt단위로 입력

˚ 본문 글자 색깔 지정하기 : 본문 내용 색상은 #xxxxxx 임의의 6개 코드값으로 입력

˚ 본문 글자 글꼴 지정하기 : 본문 내용

오늘 배울 태그는 단락에 관한 태그인데요. 줄바꿈 태그, 문단 태그, 인용태그, 수평선 태그에 대해 알아 보겠습니다.

● 줄바꿈 태그 <br>

어디서 많이 본 태그죠?(빙고~기억력이 좋으시군요.) 이전 글의 예제문에 나왔던 태그입니다. 어떤 태그인지 몰라 그냥 그대로 따라 쓰셨을 것입니다.  태그는 줄을 바꿔주는 태그입니다.

html문서에서는 줄바꿈을 지정해 주지 않으면 한 줄로 이어진 글로 해석을 합니다. 즉 강제로 줄바꿈 명령을 해주어야 하는 것이죠. 쉽게 말해 에디터 화면에서 enter키를 치는 것과 같습니다. 에디터 화면에서 글을 쓰면서 enter키를 치면 html모드에서는 자동으로 태그가 삽입 됩니다.

지금 확인해 보세요. 글쓰기 화면으로 가서 enter만 여러번 누르고 html모드로 가셔서 확인해 보시면 위 태그만 enter키를 친 만큼 표시 되어 있을 겁니다. 에디터 설정에 따라가 나타날 수 도있습니다. (이건 너무 쉽죠?)

태그는 열기 닫기의 공식이 없이 독립적으로 사용하는 태그입니다. 그냥 만 외우세요.

태그 실행 예제(메모장에 직접 작성하시면서 연습하세요)

● 문단을 표시하는 태그 <p>

태그는 문단을 나눠 주는 태그입니다. 여러개의 문장을 쓰다가, 내용이 바뀌어서 단락을 바꾸어 줄때 쓰는 것입니다. 바로 위에 태그를 설명하는 부분에서 보시면 5개의 단락으로 이루어져 있지요? 중간에 한 줄의 빈 공백이 들어가 있습니다. 이처럼 문장과 문장사이의 단락을 구분하는 것이 태그입니다.

보통 문단을 나눌때 태그를 두번 쓰는 것과 동일하게 적용된다고 생각하시면 이해가 편합니다. 단, 이후에 CSS를 배우실때 뜻하지 않는 결과값이 나오기 때문에 습관적으로 쓰지 않는 것이 좋습니다.

태그 실행 예제(메모장에 직접 작성하시면서 연습하세요)

<html>
<head>
 <title>문단 태그 p</title>
 </head>
 <body>
 <h2> 진달래꽃 </h2>
 지은이:김소월
 나 보기가 역겨워 가실 때에는 말없이 고이 보내드리우리다 
 寧邊에 藥山 진달래꽃 아름 따다 가실 길에 뿌리우리다 
 가시는 걸음 걸음 놓인 그 꽃을 사뿐히 즈려 밟고 가시옵소서 
 나 보기가 역겨워 가실 때에는 죽어도 아니 눈물 흘리우리다
 </body>
</html>

※ 여기서 잠깐: 혹시 티스토리 에디터에서 태그와 태그를 enter키로 설정하는 법을 모르시는 분들을 위해 잠깐 알려 드릴께요.

티스토리 에디터 화면의 enter키 설정하기

관리자에서 환경설정> 기타설정으로 가시면 글쓰기 환경란이 있습니다. 거기에 보면 위 이미지와 같이 enter키로 편하게 <br.태그나 태그를 넣는 방법에 대해서 설정할 수 있도록 되어 있습니다.

원하는 곳에 체크를 하시면 에디터모드에서 enter키를 눌렀을때 선택되어진 태그가 자동으로 삽입되는 것이죠.

● 인용구를 쓸때 사용하는 태그

간간히 글을 쓰다 보면 책이나 다른 사람의 말을 인용 하여 쓸 경우가 있습니다. 이때 인용한 부분을 블럭을 지어 표기되게 합니다. 이때 쓰는 태그가 인용태그입니다. 인용태그 공식은 <blockquote> 인용할 내용</blockquote>입니다.(단어가 조금 길고 생소하지요? 그냥 외우세요)

요즘은 에디터라는 좋은 프로그램이 있어서 실상 html문서에서 직접 인용태그를 넣어 쓸 일은 없지만 그래도 알아 두고 가야 할 태그입니다. 에디터 화면에서 수정이 안될 경우 직접 html 을 만져야 하기 때문에 그렇지요.

인용태그를 쓸 경우에는 지정된 부분을 자동 줄바꿈하여 들여쓰기를 하게 됩니다. 제 블로그에 보시면 핑크색 박스안이 인용구인데, 이렇게 인용태그를 css로 제어하여 설정 할 수 있습니다.(나중에css에서 자세히 설명할께요)

태그 실행 예제(메모장에 직접 작성하며 연습하세요)

<html>
<head>
 <title>인용태그</title>
 </head>
 <body>
 <h2> 어린왕자를 읽고... </h2>
 오늘 어린왕자란 책을 읽었습니다 마치 동화처럼 너무 재미있고 
 새로운 시각을 보여주는 책이었습니다. 어린 왕자 에서 보면 보아뱀에 관한 얘기가 나옵니다
 <blockquote>내 그림은 모자가 아닙니다. 코끼리를 삼켜서 소화시키고 있는 
 보아뱀을 그린 거거든요. 그래서 이번에는 또 그림을 그렸습니다. 
 어른들이 잘 알아 볼 수 있도록 보아뱀의 뱃속을 그렷습니다. 
 어른들에게는 항상 자세히 설명해 주어야 하니까요 </brockquote>
 </body>
</html>

● 수평선 태그

<hr>태그는수평선을 그어주는 태그는입니다. 수평선 태그는 말 그대로 수평선을 그려 주는 태그입니다. <hr>안에 앞서 배웠던 크기나, 위치 색상등을 지정 해 줄 수 있습니다.

수평선의 크기를 나타낼때: <hr size="npx"> (n=1~n까지의 숫자를 픽셀수로 계산)
수평선의 길이를 나타낼때: <hr width="가로 폭"> (가로 폭에 대한 비율로 지정하거나 특정 수치를 입력)
수평선의 색상를 나타낼때: <hr color="색상"> (HTML, 글자에 관한 태그_font의 기본속성 알기-참고)
수평선의 위치를 나타낼때: <hr align="위치"> (HTML문서의 제목과 관련한 태그를 배우자.-참고)
수평선의 음영과 입체를 나타내지 않게 할때: noshade를 추가

태그 실행 예제(메모장에 직접 작성하며 연습하세요)

<html>
<head>
 <title>수평선 태그</title>
 </head>
 <body>
 <h2> 수평선 그리기 </h2>
 수편선 그리기<hr>
 수평선 20px 굵기로 그리기<hr size="20px">
 수평선 100px 길이로 그리기<hr width="100px">
 수평선 빨강색으로 그리기 <hr color="#ff0000">
 수평선 왼쪽으로 위치 지정하기 <hr align="left" width="200px">
 수평선 음영 지우기 <hr size="20px" width="300px" align= left color="#000000" noshade>
 </body>
</html>

이전 시간에 배운 태그들이 많아서 어렵지 않으셨죠? 오늘까지 html문서 기본 태그에 대해서 배웠습니다. 여기까지만 아셔도 이제 스킨소스를 보실때 대충 무슨 뜻인지 아는 명령어들이 하나씩 보이실 겁니다. html태그 강좌는 알라딘 창작블로그 "웹디자인과 블로그팁"에 연재중입니다. 강의료라 생각하시고 추천과 믹시 듬뿍 주시면 힘내서 더 좋은 글로 보답 하겠습니다.

이 글이 링크되어 있는 곳:

블코채널[blogkorea]: 웹디자인과 블로그팁에 링크되어 있습니다.
레뷰 아이템[revu]: 웹디자인& 블로그 Tip에 링크되어 있습니다.

'Design Tutorial > HTML/CSS' 카테고리의 다른 글

HTML, 목록(리스트) 태그에 대해 알아보자. (60)	2009/12/18
HTML, 문서의 기본 구조 복습과 테스트 (25)	2009/12/12
HTML, 문서 단락 태그에 대해 배워보자. (34)	2009/12/01
HTML, 글자에 관한 태그_font의 기본속성 알기 (10)	2009/11/24
HTML문서의 제목과 관련한 태그를 배우자. (26)	2009/11/22
html문서의 기본 구조와 메모장 쓰기. (10)	2009/11/20