|
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 문서를 작성하는 방법을 추구하고 있습니다. |
style 속성은 CSS 강좌 부분에서 자세하게 다루는 내용이므로 HTML 강좌에서는 설명을 생략하도록 하겠습니다.
| 문단(paragraph)을 정의하는
태그 |
|
문단을 의미하는 <p> 태그
<p>태그와 </p>태그 사이에 위치하는 내용이 하나의 문단을 구성합니다.
<p>첫번째 문단(paragraph)</p>
<p>두번째 문단(paragraph)</p> |
위와 같이 코딩하면 아래와 같이 첫번째 문단과 두번째 문단 사이에 공백라인이 들어갑니다.
|
첫번째 문단(paragraph)
두번째 문단(paragraph) |
align 속성(Attributes)
<p>태그에서 사용되는 가장 대표적인 속성(Attributes)은 정렬을 의미하는 align 입니다.
align 속성에서 사용할 수 있는 값(rguments)으로는 left, center, right, justfy 가 있습니다.
<p>정렬하지 않은 문단은 기본적으로 왼쪽 정렬입니다.</p>
<p align="left">왼쪽정렬입니다. 정렬을 시키지 않으면 기본적으로 왼쪽정렬이 되므로 잘 사용하지 않습니다.</p>
<p align="center">가운데 정렬입니다.</p>
<p align="right">오른쪽 정렬입니다.</p>
<p align="justify">맞춤정렬입니다. 한 문단이 길어져서 화면의 끝에서 자동 줄바꿈이 일어날때
그 가장자리 부분을 일정하게 맞춰주는 기능입니다.
언듯보면 왼쪽정렬(기본정렬)과 비슷하지만 줄바꿈이 일어난 오른쪽 가장자리를 비교하면
그 차이를 확인할 수 있습니다.</p> |
|
정렬하지 않은 문단은 기본적으로 왼쪽 정렬입니다.
왼쪽정렬입니다. 정렬을 시키지 않으면 기본적으로 왼쪽정렬이 되므로 잘 사용하지 않습니다.
가운데 정렬입니다.
오른쪽 정렬입니다.
맞춤정렬입니다. 한 문단이 길어져서 화면의 끝에서 자동 줄바꿈이 일어날때
그 가장자리 부분을 일정하게 맞춰주는 기능입니다.
언듯보면 왼쪽정렬(기본정렬)과 비슷하지만 줄바꿈이 일어난 오른쪽 가장자리를 비교하면
그 차이를 확인할 수 있습니다. |
| BR(Line Break) 강제 줄바꿈 |
|
br은 Line Break를 의미하며 우리말로 하면 강제 줄바꿈이라고 할 수 있습니다.
홈짱닷컴의<br>
홈페이지 제작강좌는<br>
아주 쉽습니다. |
줄바꿈을 하고 싶은 곳에 <br> 태그만 넣어주면 되므로 아주 사용하기 편리합니다.
그러기에 남용되는 경향이 있는데 앞선 강좌에서처럼
<br> 태그는 꼭 필요한 경우에만 사용해 주는 습관을 가져야 합니다.
<p> 태그와 <br> 태그
아래와 같은 문장이 있는 경우 <p> 태그로 표현할 수도 있고 <br> 태그로도 똑같이 표현할 수 있습니다.
|
P 태그는 문단을 의미하고
BR 태그는 줄바꿈을 의미합니다. |
<p> 태그를 사용한 경우
|
<p>P 태그는 문단을 의미하고</p>
<p>BR 태그는 줄바꿈을 의미합니다.</p> |
<br> 태그를 사용한 경우
|
P 태그는 문단을 의미하고<br><br>
BR 태그는 줄바꿈을 의미합니다. |
HTML 소스를 보면 <br> 태그를 사용한 경우가 더 간단합니다.
그래서 <br> 태그가 많이 사용되는데 화면에 출력되는 모습은 동일하지만 문서의 의미를 생각할때는 다릅니다.
HTML을 배우는 단계에서는 이런 구분까지는 필요하지 않겠지만
논문과 같이 문서의 형식이 중요한 경우에는 태그의 원래 용도대로 정확하게 사용해 주는 것이 좋습니다. |
표제(Heading) |
|
<hn>...</h> 태그는 문서에서 표제(Heading)를 지정하기 위해 사용합니다.
Heading을 표제라고 우리말로 옮겨봤는데, 보통 우리가 문서를 작성할때는 표제라는 말을 잘 쓰지 않습니다.
이런 문서작성 방법의 차이로 인해 우리나라에서는 잘 쓰이지 않는 태그입니다.
H1에서 H6까지 전부 6단계를 가집니다.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> |
기본적으로 볼드체가 적용되고 H1이 가장 중요함을 나타내며, 가장 큰 글자로 표시합니다.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6 |
우리나라에서 잘 쓰이지 않는다고 중요하지 않다는 의미는 아닙니다.
<hn>태그는 문서의 논리적인 구조적인 측면에서는 중요한 태그입니다.
검색엔진에서 중요하게 여기고,
외국의 문서들 특히 학술적인 문서들은 <hn>태그를 레벨별로 아주 일관성 있게 잘 작성합니다.
인터넷은 국적의 구분이 없기에 HTML 문서의 작성방법은
어느정도 국제적으로도 통일되어 갈 수 밖에 없습니다. | |
| 