HTML #2

이전 포스트에 이어 이번 포스트에서도 HTML에서 사용가능한 태그들에 대해 알아보겠습니다.

 

1) 줄바꿈 - br 태그

Hello Web! <br> My name is HTML </br>

 

실행 결과는 다음과 같습니다.

 

2) 줄바꿈 - p 태그

Hello Web! <p> My name is HTML </p>

 

p 태그 역시 이전의 br 태그처럼 줄을 바꾸는 역할을 수행하지만,

차이점은 b 태그가 단순히 줄을 바꾸는 용도라면, p 태그는 문단을 구분짓는 용도로 사용한다는 것입니다.

실행 결과는 다음과 같습니다.

 

3) 이미지의 삽입 - img 태그

<img src = "Web.png" alt = "Img of Web" width = "500" height = "600">

 

이미지를 삽입하는 img 태그입니다. 구성은 다음과 같습니다.

• src : 삽입할 이미지의 경로
• alt : src의 이미지가 없는 경우 대체할 문장
• witdh : 이미지의 너비
• height : 이미지의 높이

실행 결과는 다음과 같습니다.

 

4) 링크의 삽입 - a 태그

<p><a href="https://www.naver.com/">네이버 주소</a></p>

 

실행 결과는 다음과 같습니다.

 

4 - 1) 링크의 삽입 - a 태그 + target을 통한 새로운 페이지를 추가

이전의 a 태그를 사용하여 링크를 추가하면 해당 페이지에서 링크의 주소로 이동하였습니다.

이번에는 새로운 페이지를 추가하여 링크의 주소로 이동하는 방법을 사용하겠습니다.

 

<p><a href="https://www.naver.com/" target="blank">새로운 페이지의 네이버 주소</a></p>

 

실행 결과는 다음과 같습니다.

 

4 - 2) 링크의 삽입 - a 태그 + 이미지로의 링크 이동 - img 태그

마지막으로 img 태그와 a 태그를 모두 사용하여

이미지를 통해 다른 링크로 이동하는 방법을 알아보겠습니다.

<p>
  <a href="https://www.naver.com/">
    <img border = "0" alt = "Img of Naver" src = "Naver.png" width = "100" height = "100">
  </a>
</p>

 

실행 결과는 다음과 같습니다.