이미지 태그와 주소 태그 (feat. 속성)

가슴이 웅장해진다

 

저번에 HTML의 기본중의 기본중의 기본을 공부하면서 '태그'에 대해서 함께 알아봤다. 태그의 종류는 엄청나게 많다고 했는데 사실 보통 하나의 웹 페이지에서 쓰이는 태그들은 30개가 안된다. (현재 평균 28개 정도라고 한다.)

아래의 사이트에서 확인해볼 수가 있다.

 

출처: https://advancedwebranking.com/html/

The average web page from top twenty Google results

그리고 가장 많이 쓰이는 태그의 순위도 볼 수 있다.

이 세상에 수 많은 태그 중 가슴이 웅장해지는 태그 2개가 있다.

바로 이미지 태그(img)와 주소 태그(a)다.

 

그리고 태그와 함께 HTML의 속성(Attribute)에 대해서도 배울 것이다.

 

 

 

이미지 태그

 

이미지 태그는 <img>라고 쓴다. 이미지 태그는 이미지를 넣을 수 있는 태그다. 하지만 이미지 태그에는 속성이 필요하다. 그럼 속성이 뭐냐?

<img>

 

이미지를 넣고 싶어서 이미지 태그를 작성해봤지만 아무것도 뜨지가 않는다. '속성이 뭐냐?' 같은 무식한 소리를 해대서 벌 받은 걸까?

아니다. 어떤 이미지를 넣을 것인지에 대한 정보가 필요하기 때문이다. 그래서 이미지 태그에 src라는 속성을 함께 붙여서 사용한다.

 

html 파일과 이미지 파일이 같은 위치

 

위 사진과 같이 html 파일과 이미지 파일이 같은 위치에 있을 때는 src 속성의 값으로 이미지 파일의 이름만 적으면 된다.

 

<img src="Aggro.jpg">

 

미안하다 이거 보여주려고 어그로끌었다

그런데 갑자기 이미지가 너무 큰 것 처럼 느껴진다. width 속성을 쓰면 이미지의 크기를 원하는 크기로 조정할 수 있다. 참고로 숫자의 단위는 픽셀이다.

 

<img src="Aggro.jpg" width="300">

 

갑자기 가슴이 옹졸해졌다

• src 속성: 이미지의 주소, 경로
• width 속성, height 속성: 이미지의 크기
• alt 속성: 이미지를 표시할 수 없을 때 출력할 내용

 

 

 

주소 태그

<p><a href="https://songheroine.tistory.com/" target="_blank" title="Aggro">눌러보세요!</a></p>

 

주소 태그는 링크를 연결하게 해준다. 우리는 앞에서 속성을 공부했으므로 태그와 속성을 함께 때려넣어봤다.

 

주소 태그는 <a>라고 쓴다. 사용된 속성은 href, target, title 이다.

 

• href 속성: 이미지 태그의 src 속성처럼 기본적으로 가지는 속성이다. 이동할 페이지의 주소를 적는다.
• target 속성: 링크가 걸린 페이지를 어떻게 열 것인가를 결정한다. 위와 같이 값을 _blank로 지정하면 새 창에서 페이지가 열린다.
• title 속성: 위에 마우스를 올려놓으면 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여준다.

 

이제는 저 코드의 뜻을 이해할 수 있을 것이다.

글자 위에 마우스를 올려놓은 상태

<p><a href="https://songheroine.tistory.com/" target="_blank" title="Aggro">눌러보세요!</a></p>

 

처음에 있던 코드와 똑같은 코드이다. 다시 보면서 생각해보자.

설명해보자면 눌러보세요! 라는 글자에 내 블로그 링크를 걸어놓았다. 마우스를 올려놓으면 Aggro라는 내용의 툴팁이 보인다. 글자를 클릭하면 새 창이 열리고 내 블로그로 이동하게 된다.

 

예전에 싸이월드에서 파도타기를 하던 것처럼 웹 서핑을 할 수 있는 것은 이 놈 덕분이다.

 

 

 

---

속성을 여러 개 적긴 했다만 여기 있는 속성이 다가 아니라는 점을 알아줬으면 좋겠다.