HTML 속성 종류 : 링크, 이미지, 자주 쓰이는 속성 예제

HTML 속성 종류

HTML 속성의 종류는 많습니다. 링크 태그나 이미지 태그에서 자주 사용되는 속성도 있습니다. 대부분 속성은 전반적인 태그에서 사용될 수 있습니다.

태그와 속성의 관계는 명사와 형용사의 관계와 비슷합니다. 하나의 명사에 여러 형용사가 올 수 있는 것 처럼 하나의 태그에 복수의 속성이 삽입될 수 있습니다.

링크 태그 + HTML 속성

HTML <a> 태그는 다른 웹사이트로의 링크를 담당합니다. href 속성은 링크 주소를 기입합니다. target 속성은 클릭했을 때 열릴 창의 속성을 지정합니다.

href 속성

<a> 태그에 href = "웹사이트 주소" 속성을 추가하면 링크할 웹사이트의 주소를 지정할 수 있습니다.

<a href = "https://en.wikipedia.org/wiki/Eye">위키백과 - 눈<a>

예제 ▷

target 속성

target = "_blank" 속성을 추가로 삽입하면, 웹사이트 링크가 새 창에서 열립니다.

<a href = "https://en.wikipedia.org/wiki/Eye" target = "_blank">위키백과 - 눈<a>

예제 ▷

이미지 태그 + HTML 속성

HTML <img> 태그는 페이지에 이미지를 삽입합니다. src 속성은 이미지 주소를 기입합니다. width 및 height 속성은 이미지의 사이즈를 지정합니다. alt 속성은 이미지 파일이 깨졌을 때 대신 내보내는 텍스트 정보입니다.

src 속성

src = "이미지 주소" 속성은 <img> 태그에 이미지 주소를 삽입합니다.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Lunar_eclipse_October_8_2014_California_Alfredo_Garcia_Jr_mideclipse.JPG/1024px-Lunar_eclipse_October_8_2014_California_Alfredo_Garcia_Jr_mideclipse.JPG">

예제 ▷

width 및 height 속성

width 및 height 속성은 이미지의 너비와 높이를 px, %, em, rem 등의 단위를 사용해서 조절합니다.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Lunar_eclipse_October_8_2014_California_Alfredo_Garcia_Jr_mideclipse.JPG/1024px-Lunar_eclipse_October_8_2014_California_Alfredo_Garcia_Jr_mideclipse.JPG" width = "500px;" height = "500px;">

예제 ▷

alt 속성

alt 속성은 이미지 파일이 깨졌을 때 대신 출력되도록 사전 기입된 문자입니다.

<img src = "https://나비야나비야.com" alt = "나비 그림">

예제 ▷

일반 태그 +  HTML 속성

그 밖의 자주 사용되는 속성들은 대부분의 HTML 태그와 같이 사용할 수 있습니다.

style 속성은 태그에 디자인 효과를 부여합니다. title  속성은 태그에 부가 정보를 기입합니다. class 및 id 속성은 태그에 고유 이름을 부여합니다.

style 속성

style 속성은 태그에 디자인 효과를 줍니다. color (글자색), background-color (배경색), font-size (글자 크기), border (테두리) 등의 속성값과 같이 사용됩니다.

<p style = "color: red;">글자색</p>
<p style = "background-color: orange;">배경색</p>
<p style = "font-size: 30px;">글자 크기</p>
<p style = "border: 5px solid purple;">테두리</p>

예제 ▷

title 속성

title 속성은 태그에 툴팁 효과를 줍니다. 툴팁이란 마우스를 올렸을 때 title에 적힌 값이 표시되는 기능을 말합니다.

<h1 title = "허수 아비">i의 아버지는 누구일까요?</h1>
  <p title = "190,000">세상에서 가장 쉬운 숫자는?</p>

예제 ▷

class 속성

class 속성은 태그에 사용자가 직접 만든 고유 이름을 지정합니다. 하나의 클래스값은 여러 태그에 동시에 삽입될 수 있습니다.

<h1 class = "haha-hoho">노루가 다니는 길은?</h1>
  <p class = "haha-hoho">노르웨이</p>
<h2 class = "haha-hoho">물로 만든 고양이는?</h2>
  <p class = "haha-hoho">물로켓</p>

예제 ▷

id 속성

id 속성은 태그에 사용자가 직접 만든 고유 이름을 지정합니다. 하나의 id 값은 하나의 태그에만 사용될 수 있습니다.

<h1 id = "apple">등 쳐먹고 사는 사람은?</h1>
  <p id = "banana">안마사</p>
<h2 id = "melon">차를 발로 차면?</h2>
  <p id = "orange">카놀라유</p>

예제 ▷