[HTML] Chapter 10. 이모티콘_svg(vector data), fontawesome, bootstrap

<input type="button" value="버튼">
<button>버튼</button>

보이기엔 둘 다 같지만, 차이점이 있다.

• button 태그의 컨텐츠로 "버튼"을 주는 것
• input 태그의 value로 "버튼"을 주는 것

무슨 뜻이냐 하면 input 태그에는 value 안에 "버튼" 이라는 속성을 통해서 text를 전달해야 한다.

그런데 button 태그는 여는 태그와 닫는 태그로 이루어져 있고, 컨텐츠를 받을 수 있기 때문에 다른 태그가 들어가도 무방하다. (일반적으로 잘 사용하진 않는다)

 

그 말은 button 태그에 img가 들어가도 되는 것이다. 그래서 어떤 이미지를 버튼처럼 만들고 싶을 때 input 태그에 버튼을 사용하는 것이 아니라, button 태그를 통해서 img 태그를 넣어 만들 수 있다. 

하지만 button 안에 img를 넣을 때는 일반적인 이미지가 아니라 이모티콘 같은 이미지를 넣게 된다. html에서 이모티콘 같은 이미지를 넣을 수 있는 태그는 svg 태그이다.

 

---

 

svg

svg 태그는 vector data를 시각화시켜주는 태그이다.

vector data는 그래팩이 어떤 부분에서 어떤 모양으로 휘어지는지, 또는 어떤색으로 채워지는지 정보를 담고있기 때문에 이미지를 확대한다해도 깨질 일이 없다.

bitmap은 하나의 픽셀로 이루어진 것처럼 격자 형태로 렌더링되고,  격자 하나하나 마다 정보(색깔 등)를 담고 있다. 그래서 사용하는 기기의 해상도에 맞게 확대를 했을 때, 깨지는 경우가 있다.

 

ex)

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow">
</svg

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle" viewBox="0 0 16 16">
  <path d="M7.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99ZM8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895Z"/>
  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z"/>
</svg>