HTML 태그 <p> <br>줄바꾸기 <img>이미지 삽입 <table> 표삽입

2020-05-23

---

 

우리가 특정 웹사이트를 들어가 정보를 접하게 되면,

아래와 같이 문단과 문장에 끝을 알리는 여백을 손쉽게 볼 수 있는데,

이러한 것을 가능하게 하는 태그가

바로 <p> <br> 태그라고 할 수 있습니다.

---

<p>

우선적으로 p태그는 paragraph의 준말로

단락을 나타내는 태그인데,

단락을 표시하고 싶은 곳 앞에 여는 태그

끝나는 곳에 닫는 태그를 해주면

누구나 쉽게 단락을 나눌 수 있게 되는

아주 간편한 태그입니다.

 

-사용법 ex-

<p> 2013년 12월, 미국 항공우주국은 허블 우주 망원경의 연구를 바탕으로, 토성의 위성인 엔셀라두스에서 발견된 것과 비슷한 수증기 기둥을 유로파에서 발견했다고 발표했다. [13] 또한, 유로파의 표면에서 유기 물질과 관계가 있는 점토 광물(특히 층상 규산염)이 발견되었다고 발표했다 </p>

TIP

<p> 태그는 단락 아래 자동으로 한 줄의 여백을 만들도록 

규격이 만들어진 태그입니다~!

---

<br>

br태그는 Line breaking의 준말로

말 그대로 줄을 바꾸어주는 태그입니다.

br은 단순 줄을 바꾸기 위한 태그임으로

닫는 태그 필요 없이

여는 태그만 넣어주면 됩니다!

 

2013년 12월, 미국 항공우주국은 허블 우주 망원경의 연구를 바탕으로, 토성의 위성인 엔셀라두스에서 발견된 것과 비슷한 수증기 기둥을 유로파에서 발견했다고 발표했다. [13] 또한, 유로파의 표면에서 유기 물질과 관계가 있는 점토 광물(특히 층상 규산염)이 발견되었다고 발표했다 <br><br>

 

TIP

줄을 바꾸고 싶은 수만큼

단락 뒤에 <br> 태그를 넣어주면 됩니다.

---

img 태그는 웹사이트 구성에서 없어서는 안 될

태그 중 하나로 아래의 사진과 같이

웹사이트 내부에 이미지를 불러올 수 있는

태그입니다.

 

 

---

<img>

img태그의 중요한 점은 단독으로는 사용할 수 없고

이미지의 특징을 설명해주는

다수의 속성과 같이 사용해야 합니다.

 

<img src="강아지. jpg" alt="멍멍이" title="멍멍이">

 

위와 같은 예로 표현할 수 있는데, 

우선적으로 src는 파일의 이름이라고

생각하면 될 것 같습니다. 

자신의 불러오고 싶은 파일을

정확히 입력해야 src라는 속성이

해당 파일을 불러오고 싶구나 라고

인지하기 때문입니다.

 

다음은 alt인데 이는 등록한 이미지가 

과연 무엇인지 나타내 주는 속성으로써

아래와 같이 이미지가 깨질 경우 

그 이미지의 속성이 무엇인지를 나타냅니다.

 

마지막은 title인데 이는 등록된 이미지에

마우스를 가져다 되면 그 이미지의 이름을

나타내 주는 속성으로 필수 조건은 아니나

넣어주는 것을 추천하고 싶습니다~!

 

TIP

<img src="강아지. jpg" alt="멍멍이" title="멍멍이" width="100" height="100">

 

width="100" height="100"와 같은 속성으로 이미지의 크기를

자유롭게 수정할 수 있는 점도 참고하시면 

좋을 것 같습니다~!

---

table은 말 그대로 웹사이트 내에 

표를 만들기 위해 사용하는 태그로써

오늘 설명드리는 태그 중 가장 복잡합니다.

때문에 실습자료를 가지고

설명하도록 하겠습니다.

<table border="1">

<tr>
<td>1 </td> <td>2 </td> <td>3 </td> <td>4 </td>
</tr>

<tr>
<td>가 </td> <td>나 </td> <td>다 </td> <td>라 </td>
</tr>

<tr>
<td> A </td> <td> B </td> <td> C </td> <td> D </td>
</tr>

</table>

 

태그만 보아서는 무슨 뜻인지 정확히 이해하기 어려울 수 있으나

설명을 보시면 "아 그렇구나~" 하실 겁니다..(아마도)

 

TIP

border는 테이블에서의 줄을 나타내는

속성으로 숫자가 클수록 두꺼워집니다.

(border을 안 쓰면 줄이 안 생김 ㅜㅜ)

---

우선 표를 만들기 위해서는 <table> 상위 태그를 열어 주어야 합니다.

그래야 우리 html친구가 "이제 표를 만들 거구나"

라는 것을 인식하기 때문이죠

 

다음은 <tr> 표에서의 행을 시작을 알리는 태그로써
보통 <table> 태그 바로 아래부터 위치하기 시작합니다.

<tr>을 열고 행안에 들어가고자 하는 내용을 모두 작성한 후

</tr>로 닫아주시면 됩니다.

 

마지막은 <td>인데 이는 각 셀을 구성하는

항목이라고 보시면 됩니다.

즉 한 칸 한칸 넣고 싶은 단어를 적어주셔야

합니다.

 

위아 같은 태그로 코딩을 하면 아래와 같은 표가 만들어지게 됩니다.

참 별 볼일 없죠 ㅠㅠ?? 좀 더 이쁘게 만들기 위해서는

차후에 css를 배워야 가능하니 일단은 이 수준에서

만족하기로 합시다 ㅠㅠㅠ

---

이외에도 셀을 병합하는 rowspan, colspan과 같은 속성과

셀들의 각 위치를 나타내 주는 <thead>, <tbody>, <tfoot>등의

태그들이 있지만, 글이 너무 조잡해질 것 같아 이는 나중에

따로 추가적으로 설명드릴 수 있도록 하며,

오늘은 여기까지 말씀드리도록 하겠습니다.

지금까지 긴 글 읽어 주셔서 감사합니다~!

---

522.zip

0.47MB

사용된 태그들과 이미지 파일, 사이트링크 같이 첨부하며, 

같이 참고하셔서 글을 보는 것도 좋을 것 같습니다~!