04. Body - 제목, 단락

안녕하세요.

콤퓨타 학원에 원장을 하고 있는 이프로입니다. 헤헴 ^^

 

Body에서 사용되는 기본 태그들에 대해서 이야기해볼거에요.

정말 많은 태그들이 있는데요.

그중에서 많이 사용되어지는 태그를 가지고 진행해볼꺼에요.

(지난 강좌에 저장 후 바로 반영되는 Live Server를 설정하신 분이라면 자세한 설명 필요 없겠조?)

간단하게 소개만 하는 것이고 활용이 이유에 할거에요.

그렇니 부담없이 아 이런것들이 있구나 하고 편하게 보시면 될거 같아요.

---

 

<h1>~<h6> 태그

<h1>헤더1</h1>
<h2>헤더2</h2>
<h3>헤더3</h3>
<h4>헤더4</h4>
<h5>헤더5</h5>
<h6>헤더6</h6>

html 작업 시 내용에 제목을 표현하는 경우에 사용되는 태그입니다.

h1은 가장 크고 h6이 가장 작은 형태가 됩니다.

 

 

<p> 태그

<p>단락1</p>
<p>
    단락2
    단락3
</p>
<p>단락4</p>

하나의 단락을 의미하고 <p>태그로 감쌓면 </p>이후에 바로 아래칸 맨 처음으로 이동하게 됩니다.

 

 

<hr> 태그

<p>단락1</p>
<hr>
<p>
    단락2
    단락3
</p>
<hr>
<p>단락4</p>

<hr> 태그는 가로로 선을 그려주는 역할은 하는 태그입니다. hr외에 내용이 없는 빈태그이고 </hr>처럼 종료 태그가 없는게 특징이에요.

 

 

<br> 태그

문구1
문구2<br>
문구3
<p>
    문구4<br>문구5
</p>
문구6문구7

<p>태그와 약간 비슷한데요. 행을 한칸 내리고 왼쪽 처음으로 이동시켜주는 역할을 하는 태그에요.

<p>태그가 있는 부분은 느낌이 다르다는 걸 느끼실수 있을거에요.

 

 

<pre> 태그

<p>문                 장1</p>
안녕하세요1.
안녕하세요2.
<pre>
    안녕하세요1.

    안녕하세요               2.
</pre>

<pre>는 <pre>태그 영역 내에 내용을 그대로 표현합니다.

띄어쓰기라던가 행을 바꾸거나 하는 모든 것이 동일하게 표현이 됩니다.

<p> 태그 첫번째 것을 보시면 띄어쓰기가 많이 되어 있지만 한번만 적용이 되어 있는 걸 아실수 있는데요.

html에서 <pre>태그 없이 띄어쓰기를 많이 하려면 특별한 방법을 사용해야 합니다.

또한 폰트나 사이즈가 달라보이는 이유는 html에서 특별히 폰트나 사이즈를 지정하지 않았다면 <p>태그와 <pre>태그 각각 기본적으로 사용하는 폰트와 사이즈가 다르기 때문입니다.

이런 문제를 해결하려면 html 전체에 폰트와 폰트 사이지를 지정해주면 해결되는데요. 

나중에 style부분에서 다루도록 할께요.

---

 

이번 강의는 여기까지에요.

여러분들의 관심과 사랑이 있다면 좀 더 좀은 컨텐츠를 제공해줄 수 있을거 같습니다.

많은 관심과 사랑 부탁드립니다.

 

감사합니다.

그럼 콤빠~