HTML 기초, <br><p>태그, (네번째)
이 포스트는 Tistory 블로그를 하면서 자주 접하는 HTML에 대한 궁금증을 해소하기 위해
HTML 기초공부를 시작하고, 공부한 내용을 정리 목적으로 작성된 포스트입니다. ^^
HTML 기초, <br><p>태그, (공백)
메모장을 이용해서 HTML 문서를 작성하면서 태그 입력후 엔터(enter)를 쳐 줄 바꿈을 하려고 해도 인터넷 화면에
출력될때는 HTML 문서작성 시 입력한 엔터(enter)는 모두 무시되서 출력됩니다. 스페이스(space)를 여러번 입력해도
인터넷 화면에 출력시 공백이 한번만 나타납니다. 그래서 HTML 문서에 사용하는 <br><p> 태그와 가 존재합니다.
# 줄을 바꾸는 <br>태그
인터넷 화면에 출력되는 문장들이 줄이 바껴서 나타나게 하려면 <br> 태그를 사용해야 됩니다.
<br>태그는 "line break"를 의미하기에 강제적으로 줄을 바꾸거나 빈줄을 삽입할 때 사용합니다.
<br>태그는 종료태그 없이 단독으로 사용됩니다.
<br> 태그를 사용하지 않고 엔터를 통해 빈줄을 만든 HTML 문서입니다.
인터넷 창에 출력된 결과물 보이시죠?
빈줄이 하~나도 표시가 안됐습니다.
<br> 태그를 사용해서 빈줄을 삽입해봤습니다.
아래 결과물을 보면 빈줄이 잘 삽입되서 출력되는게 보입니다.
# 문단을 나누는 <p> 태그
<p> 태그는 paragraph의 약어로 문단을 나눌 때 사용하는 태그입니다. <p> 태그는 줄을 바꾼 후
한줄을 공백으로 만들어 주며, <br>태그를 두 번 사용한 만큼의 간격이 생깁니다.
<br> 태그와 <p> 태그는 줄을 바꿔주지만 차이점이 있습니다. <br> 태그는 단순히 줄 바꿈을 위한 태그이기 때문에
여러 번 입력하면 입력한 횟수만큼 빈 줄이 생기지만 <p> 태그는 연속적으로 여러 번 사용해도 문단을 나눈다는 의미를 갖는 태그이기 때문에 처음 나온 <p> 태그로 이미 하나의 문단을 구성하였다고 인식하고 나머지 <p> 태그에 대해서는 무시해 버립니다. 그래서 연속적으로 <p>태그를 기술해도 아무런 효과를 얻을 수 없습니다.
@ p 태그의 align 속성을 사용해 정렬 방식 결정하기
<p> 태그의 align 속성을 사용해 해당 단락에 정렬 방식을 지정할 수 있다.
align 속성에 사용할 수 있는 값은 life, right, center
align 속성을 따로 지정하지 않았을 때는 기본 값 life가 적용되기 때문에 텍스트들이 왼쪽 정렬값으로 나타난다.
예문)
<p align="정렬방식"> 텍스트 </p>
<p align="life"> 문단을 왼쪽으로 정렬시킨다. </p>
<p align="center"> 문단을 중앙으로 정렬시킨다. </p>
<p align="right"> 문단을 오른쪽으로 정렬시킨다. </p>
# 공백을 처리하는
HTML 문서에서는 스페이스바를 여러 번 입력해도 인터넷 익스플로러에 보이는 출력화면에는 공백이 한번만 나타납니다.
그래서 여러 개의 공백을 삽입할 필요가 있을 때 를 사용합니다. 는 "break space"를 의미하고 공백문자를 나타냅니다. 공백문자를 한번만 표현하기때문에 여러번 기술하면 원하는 만큼의 공백이 생기게됩니다.
