HTML에서 자주 사용되는 공백 및 줄 바꿈 태그와 특수 문자로는  , br, p 등이 있습니다. 보통 <br> 태그는 강제 줄 바꿈, <p> 태그는 문단과 문단 사이 구분, 특수문자 는 단어와 단어 사이에 1개 이상의 공백을 넣어줄 때 사용합니다.
1. <br> 태그
<br> 태그는 줄 바꿈을 해주는 태그입니다. 메모장이나 워드프로세서 같은 프로그램에서는 엔터를 이용해서 줄 바꿈을 해주지만 HTML 코드 작성 시 줄 바꿈은 <br> 태그를 사용해야 합니다.
<body>
HTML 줄바꿈 연습입니다.<br>HTML 에서 줄바꿈은 br태그를 이용하면 됩니다.
</body>위와 같이 사용했을 경우 웹페이지에서는 아래와 같이 <br> 태그를 기준으로 줄 바꿈이 됩니다.
HTML 줄 바꿈 연습입니다.
HTML에서 줄 바꿈은 br태그를 이용하면 됩니다.
2. <p> 태그
<p> 태그는 문단을 구분할 때 사용합니다.
<body>
첫 번째 문장 시작입니다.<br>
두 번째 문장 입니다.<br>
<P>세 번째 문장 시작입니다. 문단을 구분할 때는 p태그를 사용하면 됩니다.</p>
네 번째 문장 시작입니다.
</body>위와 같이 사용했을 경우 웹페이지에서 아래와 같이 세 번째 문장을 보면 <p></p> 태그를 사용하였는데 <p></p> 태그 앞뒤로 줄 바꿈이 되면서 공백 생기게 됩니다. <br> 태그와 차이점은 <br> 태그는 사용 후 바로 아래 다음 문장이 시작되지만 <p> 태그는 문장 다음에 공백이 생성됩니다. 아래 결과를 보시면 쉽게 이해할 수 있습니다.
첫 번째 문장 시작입니다.
두 번째 문장 입니다.
세 번째 문장 시작입니다. 문단을 구분할 때는 p태그를 사용하면 됩니다.
네 번째 문장 시작입니다.
3.
는 공백을 나타내는 특수문자입니다. 키보드의 스페이스로 공백을 나타내면 되는데 왜 굳이 라는 특수기호를 사용할까요? 그건 웹에서 스페이스로 공백을 여러 번 사용해도 한 개의 공백만 인식되고 나머지는 무시되게 됩니다. 따라서 1개 이상의 공백을 넣어주려 할 때 &npsp; 를 사용하면 됩니다.
<body>
첫 번째줄 공백연습입니다. 다섯칸공백을 입력하였습니다.<br>
두 번째줄 공백연습입니다. 다섯칸공백을 입력하였습니다.
</body>위와 같이 사용했을 경우 웹페이지에서는 아래와 같은 결과가 출력됩니다. 즉 첫 번째 줄처럼 스페이스로 많은 공백을 넣어도 결국 1개의 공백만 들어가게 됩니다. 1개 이상의 공백을 넣어주려면 를 사용하면 됩니다.
첫 번째줄 공백연습입니다. 다섯칸공백을 입력하였습니다.
두 번째줄 공백연습입니다. 다섯칸공백을 입력하였습니다.
댓글