HTML(2)

오늘 우리는 이미지 삽입 태그, 링크, 줄 바꿈 을 나타내는 태그를 알아볼 것입니다. 

우리는 이전시간에 HTML의 기본 문체 태그를 알아보았습니다.

HTML기본 구조 태그 

우리는 여기에 이미지를 삽입하는 방법을 배워 볼 것입니다. 이미지를 삽입하는 태그는 <img> 태그입니다. 

img태그

출처: pixabay.com

우리는 한번 이 이미지를 사이트에 출력을 시켜 보겠습니다.   그전에 이 이미지가 아니더라도 아무 이미지를 다운로드하시고 

이미지 삽입 태그 활용 

여기서 src는 무엇인지 알고 싶어 하는 분들이 있으실 겁니다. 이것은 속성을 의미합니다. 속성은 구글링을 해 보면 나오는 것이니 스스로 찾아보기를 바란다. src는 웹 서버에 올린 그림 파일의 주소 또는 미이지 파일의 이름입니다. 이미지 태그에서 가장 중요한 속성입니다.

이것을 실행시켜보면 이러한 이미지가 출력이 될 것입니다. 

 

 

 

 

 

링크 <a> 태그

그다음 살펴볼 태그는 바로 링크를 거는 태그입니다. 이 태그는 <a>라는 태그이고 href라는 속성을 통하여 링크 주소를 지정합니다. 한번 해당 링크를 클릭하였을 때 네이버로 접속을 하는 웹을 만들어 보겠습니다.

이렇게 코드를 짜면 name라는 이름에 하이퍼 링크가 걸리게 됩니다. 이것을 누르게 되면 NAVER로 연동되어 접속을 하게 됩니다.

 

 

 

 

 

 

 

 

 

 

<br> 줄 바꿈 태그

html에서 줄 바꿈 태그입니다. "시간은 우리가 나누어 놓은 것일 뿐이다. 과거와 현재라는 것도 모두 임의로 정한 것이다. 아메리카 원주민들은 시간을 선(線)으로 생각하지 않는다. 시간에 맞고, 시간에 늦고, 나는 충분한 시간이 결코 없지만, 원형의 시간, 즉 시간은 자전거 바퀴 같다. 모든 순간이 언제나 일어난다."

라는 문장을 출력시켜 보겠습니다.

 

 

이렇게 출력이 됩니다.  이렇게만 하면 내가 원하는 자리에 줄 바꿈을 할 수 없습니다. 그래서 만들어진 것이 바로 <br>이라는 태그입니다. 이것을 이용하여 보면

 

 

 

 

 

 

 

이렇게  코드를 만들고 해당 파일을 실행시키면내가 원하는 자리에 줄 바꿈을 할 수 있습니다.