HTML 기초 - 6 | 태그의 속성

이번 글에서는 웹페이지에 이미지나 링크 같은걸 달아보기로 했었다.

이때 필요한 태그들은 특이하게도 태그속성이라는 것을 가진다. 태그의 속성에 대해 먼저 알아보자.

 

태그의 속성

HTML 의 모든 태그는 각자의 속성을 가진다. 이러한 태그의 속성은 미리 정의되어 있는데, 태그 속성에 맞는 값을 입력하면 태그의 특별한 기능을 사용할 수 있다.

 

<tag attribute = "value">

위와 같은 형태로 태그의 속성을 사용할 수 있다.

tag 에는 태그 이름, attribute 에는 속성, value 에는 값을 넣어주는 형태이다.

 

각 태그마다 사용할 수 있는 attribute 의 종류가 다르기 때문에 tag 종류를 외우면서 그 태그의 attribute 도 같이 외워주자.

---

이미지 태그 <img />

이미지를 웹페이지에 나타내기 위해 사용하는 img 태그는 여는 태그만 존재하는 태그로 형태는 아래와 같다.

<img src="my_picture.png" />

<img /> 태그의 속성 중 하나인 src 가 보이는가? 이 속성은 이미지 소스(Image Source)를 가져오는 속성이다.

위의 예에서 <img /> 태그는 src 에 부여된 값인 "my_picture.png" 을 이미지 소스로 가져와 이미지를 웹페이지에 나타낼 것이다.

이 외에 <img /> 태그에서 사용할 수 있는 다른 속성들을 더 살펴보자.

• src : 이미지의 경로
• alt : 이미지를 표시할 수 없을 때 대신 출력할 내용
• width : 이미지의 가로 크기
• height : 이미지의 세로 크기
• loading : 이미지의 로딩 방식 ( eager / lazy  / auto)

보통 src 와 alt 속성 정도만 사용한다고 생각하자.

width 와 height 속성은 CSS 로 처리하는 게 깔끔하다고 생각하기에 사용한 적이 없다.

 

 

img 태그

<img src="https://images.unsplash.com/photo-1587613754067-13e9a170b42f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=677&q=80" alt="Unsplash Image" />
<p>Unsplash Image</p>

 

위와 같이 src 경로를 인터넷 주소로 사용할 수도 있다. 혹시나 이미지가 제대로 처리되지 않아 엑스박스가 뜰 경우를 대비해 alt 속성에 이 이미지를 글로 대신 설명해두었다.

---

링크 태그 <a></a>

다음은 웹페이지에 링크를 달 수 있는 링크 태그를 알아보자.

 

 

<a href="https://www.tistory.com/">Tistory 이동하기</a>

태그와 태그 사이에 적힌 "Tistory 이동하기" 라는 텍스트는 눌렸을 때 해당 페이지로 이동할 수 있게 하이퍼링크가 걸린다. 이때 어디로 이동할지를 href 속성을 이용해 결정한다.

링크 태그에서 더 설정할 수 있는 다른 속성들을 살펴보자.

• href : 클릭 시 이동할 경로
• target : 링크를 여는 방법 ( _self / _blank / _parent / _top)
  • _self : 현재 창에서 링크를 연결한다.
  • _blank : 새 탭을 열어 링크를 연결한다.
• title : 해당 링크에 마우스 커서를 올렸을 때 보여줄 도움말

보통 href 와 target 정도만 사용한다고 생각하자.

 

<a href="https://www.tistory.com/" target="_blank">
  <img src="my_img.png" alt="Tistory Link" />
</a>

위와 같이 <a> 태그 안에 항상 텍스트만 있어야 하는 건 아니다. 위에서 배운 <img /> 태그를 <a> 태그 사이에 넣어주면 이미지를 링크처럼 사용할 수 있다. 어떤 것도 좋으니 여러 가지를 시도해보자.

---

모든 태그에 사용되는 속성

위에서 설명한 태그와 속성들은 각 태그를 사용하기 위해 필요한 속성들이다. 태그에 맞는 속성을 사용해야 하며 정해진 값을 사용해야 할 때도 있다.

하지만 이와 달리 모든 태그에 공통적으로 사용되는 속성이 있다.

• class : 태그의 class 를 지정한다.
• id : 태그의 id 를 지정한다.
• style : 태그의 style 을 지정한다.

class 속성과 id 속성은 CSS 나 JavaScript 에서 태그를 선택하기 위해 사용된다.

style 속성은 CSS 규칙에 따라 태그의 style 을 지정해줄 때 사용한다.

 

즉, 지금은 알아도 쓸 수가 없다. 이 내용은 추후 CSS 파트에서 더 자세하게 설명하겠다.

---

이번 글에서는 태그의 속성에 대해 배워보았다. 다음 글에서는 유저가 웹사이트에 정보를 기입할 수 있는 form 태그에 대해 배워보겠다.