HTML은 공백(스페이스)과 엔터를 여러번 입력하더라도 하나의 공백으로만 인식합니다.
그래서
이처럼 엔터와 공백을 여러번 입력하더라도 아래와 같이 한줄로 출력됩니다.
홈짱닷컴의 홈페이지 제작강좌는 아주 쉽습니다. |
줄바꾸기 기능을 하는 가장 일반적인 태그는 <p>와 <br>태그입니다.
하나의 문단을 의미하는 <p> 태그
p는 paragraph의 약자로 문단을 의미합니다.
<p>태그와 </p>태그 사이에 위치하는 내용이 하나의 문단을 구성합니다.
<p>첫번째 문단(paragraph)</p> <p>두번째 문단(paragraph)</p> |
위와 같이 코딩하면 아래와 같이 첫번째 문단과 두번째 문단 사이에 공백라인이 들어갑니다.
첫번째 문단(paragraph) 두번째 문단(paragraph) |
한글의 경우에는 문단의 첫글자를 들여쓰기 하지만 영문의 경우에는 문단과 문단 사이에는 한줄의 공백이 있습니다.
강제 줄바꿈을 할때는 <br> 태그
br은 Line Break를 의미하며 우리말로 하면 강제 줄바꿈이라고 할 수 있습니다.
홈짱닷컴의<br> 홈페이지 제작강좌는<br> 아주 쉽습니다. |
이렇게 줄바꿈을 할 위치에 <br> 태그를 넣어주면 아래와 같이 줄바꿈이 일어납니다.
<br> 태그의 남용을 피하자
글이 좌우로 너무 넓게 출력되면 가독성이 떨어지기에 글을 쓰면서 <br> 태그를 습관적으로 사용하는 경우가 많습니다.
그러나 가능한 글의 한문단을 의미하는 <p> 태그를 사용하고 넓게 출력되는 것을 방지하기 위해서 CSS를 함께 사용해 주는 방식이 좋습니다.
<p style="width:400px;">홈짱닷컴의 홈페이지 제작강좌는 초보자를 대상으로 합니다. 그러므로 가능한 쉬운 용어를 일관성 있게 사용할려고 노력하고 있습니다.</p> <p style="width:400px;">홈짱닷컴의 HTML 강좌는 단순히 화면에 출력되는 문서의 모양만 설명하지 않고 보다 의미있는 HTML 문서를 작성하는 방법을 추구하고 있습니다.</p> |
이와 같이 style 속성을 사용하면 문단의 좌우 폭을 지정할 수 있기 때문에 굳이 <br> 태그를 사용하지 않아도 자연스럽게 줄바꿈이 일어나게 할 수 있습니다.
홈짱닷컴의 홈페이지 제작강좌는 초보자를 대상으로 합니다. 그러므로 가능한 쉬운 용어를 일관성 있게 사용할려고 노력하고 있습니다. 홈짱닷컴의 HTML 강좌는 단순히 화면에 출력되는 문서의 모양만 설명하지 않고 보다 의미있는 HTML 문서를 작성하는 방법을 추구하고 있습니다. |