Part 6-2-4. 웹 기초 : HTML #2

 

 

🌐 웹 기초

 

 지난 시간에는 HTML의 기초적인 태그인 주석, 볼드, 이탤릭, 크기 등 기초적인 태그에 대해서 학습하였다. 이번 시간에는 이번 시간에는 지난시간과 마찬가지로 HTML의 다양한 태그들에 대해서 배운다. 

 

---

 

🚂 Tag

 

 이전 시간과 마찬가지로 HTML의 태그를 학습하기 전에 앞서, HTML의 태그를 한눈에 볼 수 있도록 정리한 사이트인 https://www.w3schools.com/tags/tag_comment.asp 사이트를 통해 태그를 확인하고 이를 실습한다.

 

---

 

개행, 단락 구분, 이미지, 하이퍼링크

 

<!-- <br>(개행)은 </br>이 존재하지 않는다. -->

<!-- <p> 단락별로 수행하고자 할 때 사용된다. </p> -->

<!-- <img>를 통해 이미지를 넣어준다. 여기서 alt는 이미지가 나타나지 않을 때 나오는 부가적인 요소이다. width, height는 당연히 가로 세로이다. -->

<!-- 하이퍼링크는 <a> 키워드를 사용한다 href는 h reference의 약어로 해당 값으로는 웹 사이트의 주소를 작성하면 된다. -->

<!-- 이미지 안에 링크를 넣고 싶을 경우 <a></a>키워드 사이에 이미지 태그를 사용하여 처리한다. -->

 

 개행은 행을 나누는 것을 의미하는데, 이 때 </br>을 사용하지 않고 단순히 <br>만 사용하는 것이 특징이다. <br>과 <p>의 기능은 유사하지만 <br>은 말 그대로 개행이며, <p>는 단락별 구분을 할 때 사용된다.

 

 이미지의 경우 <img> 태그를 사용한다. 해당 태그에서 alt는 이미지의 설명을 나타낸다. 이미지는 아래와 같이 사용할 수 있다.

 

이미지
<img src="img_girl.jpg" alt="Girl in a jacket" width="50" height="60">

 

 마지막으로 하이퍼링크는 <a href = "">를 통해 사용한다. 이 때 새 창에서 열기, 현재 창에서 열기 등 다양한 옵션이 존재한다. 이 경우도 w3school에서 힌트와 팁을 통해 참고한다.

 

이미지 + 웹사이트 새 창 이동
<a href = "https://www.naver.com" target = "_blank">
  <img src="img_girl.jpg" alt="Girl in a jacket" width="50" height="60">
</a>