HTML 주석 줄바꿈 띄어쓰기 태그 익히기
▣ HTML 주석 줄 바꿈 띄어쓰기 태그 익히기
■ HTML 두 번째 공부하네요. ㅎ 지난번에는 HTML 태그의 기본 구조를 살펴보고, 저장 및 출력하는 방법에 대해서 알아봤었는데요.
■ 이번에는 각종 기본 태그를 정리해보도록 하겠습니다. 먼저 문단에 사용하는 태그인 줄바꿈과 띄어쓰기 관련 태그부터 알아보고 예제에서 주석태그를 넣어서 테스트 해보겠습니다.
<p> |
이 태그를 이용하면 한 줄을 띈 다음에 다음 문장을 시작하게 되는데요. 이 태그를 여러개 사용한다고 해서 여러줄이 띄어지는건 아니에요. 아무리 많이 써도 한 줄만 띄어줍니다. |
<br> |
이 녀석은 우리가 사용하는 [엔터]와 같은 역할을 하는데요. 한줄을 띄지는 않고, 그냥 다음 칸으로 내려가기만 합니다. |
<pre></pre> |
pre 태그는 입력하는대로 표시되는 태그인데요. 일반적으로 한 줄에서 여러번 연속으로 띄어쓰기를 해도 한칸만 띄어써지는데... 이 태그를 이용하면 여러번 띄어쓴 대로 출력이 됩니다. |
■ 이론만으론 부족하니까 직접 이 태그들을 이용해셔 메모장에 예제를 하나 작성해보겠습니다.
■ 메모장에 다음과 같은 예제를 하나 입력해봤습니다.
1. 나름대로 "엔터" 키능이 먹히나 보려고 한칸 띄어봤어요. 당연히 안됩니다. ㅎ 이 줄은 엔터 기능 없이 한줄로 출력이 될거에요.
2. <p>는 한 줄을 띄우는 태그인데요. 4번처럼 <p><p><p> 라고 입력하더라도 하나만 인식합니다. 4번 부분에서 3줄이 띄어지는게 아니고 한 줄만 띄어집니다.
3번은 다른 태그 없이 문장 중간을 여러칸 띄어봤거든요. 이 역시도 안 먹혀요. 한칸만 띄어쓰기 되서 출력됩니다.
5번은 엔터 기능인 <br>를 입력해봤습니다. 여기서는 한 줄 띄는게 아니고, 바로 아래칸에서 다음 문장이 출력될거에요.
6번은 <pre></pre> 사이에 있는 글들이 그대로 출력되는지 확인해보겠습니다. 한줄 바꿈한것은 인식 안되구요. 한줄로 쭉 출력이 될거에요. 7번 띄어쓰기 한 부분을 잘 체크해보세요. 이 부분은 그대로 띄어쓰기 되서 출력됩니다.
8번은 주석처리를 한건데요. 형식은 <!-- 문장 --> 입니다. 이렇게 입력하면 "문장"은 출력이 되지 않습니다. ^^
이 파일을 저장하고 익스플로러 브라우저에서 실행해볼게요.
■ 메모장과 출력된 내용과 비교해보면서 천천히 살펴보세요. ^^이렇게 해서 html 태그 중에서 주석과 띄어쓰기, 엔터기능, <pre> 태그에 대해서 알아봤습니다. 수고하셨어요. ^^