HTML 이미지 alt 값 입력방법

HTML에서 이미지에 대한 정보는 alt값으로 입력할 수 있습니다. 주로 티스토리 또는 블로그, 워드프레스를 운영하다 보면 글에 넣게 되는 이미지도 값을 입력해주는 것이 좋다고 합니다. HTML에서 이미짖에 alt값 입력해주는 방법을 정리해보았다. 

 

 

 

HTML 이미지 alt 값 입력방법

HTML에서 이미지 alt값을 입력해주면 구글에서 문서에 대한 구조를 인식하고 보다 좋은 글로 인식할 수 있다고 한다. 처음부터 많은 검색이 들어오지 않을 수도 있지만, 속성 값을 추가해주는 것도 좋습니다. 단지 번거로운 부분이 있어서 귀찮아하시는 분들도 많았던 것 같습니다.

 

만약 사진을 넣었다면 HTML 편집에서 먼저 img가 태그 된 부분을 찾아야 합니다. 이미지에 대한 설명이 들어있고, 이미지 파일명, 크기 등 정보가 보일 수 있습니다. 사이에 아래와 같은 값을 넣어주면 됩니다. [alt = "이미지의 내용 정보"]에서 이미지 정보를 입력해주시고 저장해주시기만 하면 됩니다.

 

티스토리 블로그를 자주 이용하시다 보면 스킨을 편집하거나 꾸미는 경우가 필요하게 됩니다. 이와 관련된 이미지 태그에 대한 부분, 그리고 화면을 나눌 수 있는 프레임 태그까지 자세하게 살펴보았습니다. 

 

 

 

IMG 이미지 태그

HTML에서 이미지를 삽입할 때 사용하는 것이 IMG 태그입니다. 이 태그에는 위에서 설명드렸던 alt, src, align, width, hight, hspace, vsapce, border 등 여러 가지 속성들이 존재합니다. 보통 이미지를 삽입하게 되면 일반적으로는 다음과 같은 태그 코드 구조로 되어있습니다. 

<IMG src = "이미지의 파일 이름(. png,. jpg,. gif 등)">

먼저 alt는 도움말 설정의 기능으로 이미지가 어떤 파일인지 설명해주는 역할을 하고 있습니다. 이미지를 삽입하고 그대로 둘 경우 본래 이미지의 크기대로 보이게 됩니다. 그런데 width 값으로 폭을 조정해주고, hight로 높이 값을 조정하면 보여주는 이미지가 조정될 수 있게 됩니다. 

 

간혹 이렇게 사이즈를 조정할 경우 파일 크기도 줄어드는 것으로 알고 계시는 분들도 계십니다. 하지만 크기는 변하지 않고 동일한 크기임을 알고 계셔야 합니다. 구글의 경우 페이지 속도가 매우 중요한데 만약 이미지의 크기를 변경하시려면, HTML 태그에서 너비와 폭을 조정하기보다 파일을 보다 작게 변경하는 것을 추천합니다. 

 

그리고 border은 테두리를 의미하는데 지정하지 않을 경우 기본 값은 0이라서 이미지에 경계선이 보이지 않습니다.

 

또한 이미지를 보다 밝게 해 주거나, 투명하게 등의 기능도 제공하고 있습니다. 이때 사용하는 속성은 style입니다. 포토샵까지는 아니지만, 어느 정도 이미지를 변화시킬 수 있는 기능이라고 볼 수 있습니다. alpha, xray, blur 3가지로 이용할 수 있습니다. alpha는 그림과 글의 투명한 정도를 변경할 때 이용합니다. 이때 opacity 불투명도 값과, style 모양, finishopacity 모양을 지정할 때의 불투명도 등 값을 지정해주어야 합니다. xray는 그림을 흑백으로 나타내고 싶을 때 사용할 수 있습니다. blur은 그림 또는 글자를 흐리게 또는 번지게끔 하여 흐릿한 느낌을 주는 효과를 보여줄 수 있습니다. blur의 값을 편집할 때는 add 원본 그림이 결합되었는지, direction 방향 값, strength 강도 등 값을 지정해주어야 하겠습니다.

 

TABLE 테이블 태그

흔히 표라고 하는 항목을 만들 수 있는 태그가 TABLE 태그입니다. TABLE, CAPTION, TR, TH, TD 등이 존재합니다. 

<table>
<catption>~ </caption>
<tr>
<th> 내용 </th>
<td> 내용 </td>
</tr>
</table>

보편적으로는 이러한 구조로 되어있음을 보실 수 있습니다. table로 먼저 시작하게 되는데요. 이후 caption으로 표의 주석 문으로 설명을 해줄 수 있습니다. 주로 사용하게 되는 것들은 tr 표의 행으로 줄을 바꿔줄 수 있고, th는 헤더로 표의 제목을 말합니다. td는 data 데이터의 약자로 안에 들어가는 데이터를 의미합니다. 각 셀에 들어있는 값을 의미하겠죠. 가장 많이 사용되는 태그가 바로 tr과 td임을 알 수 있습니다. 정리해보면 TR은 줄을, TD는 칸을 만들 때 사용하는 것으로 재해석할 수 있습니다. 

 

테이블 태그를 통해 각 셀의 높이와 폭, 색상, 테두리, 두께 등 전체적인 구성들을 변경할 수 있습니다. 보통 엑셀이나 한글 등에서 표를 만들다 보면 병합을 하거나 빈 공백을 만들기도 합니다. HTML에서도 동일하게 이용할 수가 있습니다. 테이블에서 여백은 cellspacing로 셀을 활용할 수 있습니다. 각 셀마다의 간격을 조정할 수도 있고, 셀과 내용 사이의 간격을 조절해줄 수도 있습니다. 그리고 셀을 병합할 때는 2가지가 존재합니다. 행을 합치기 위해서는 rowspan을 이용합니다. 행을 뜻하는 단어이죠. 반대로 열을 합치기 위해서는 colspan을 이용합니다. 

 

이와 비슷하게 테이블을 각 행, 열로 정렬도 가능합니다. 그렇다면 행과 열 각각 두 가지 방법이 있다는 것도 유추해볼 수 있습니다. TD ALIGN = "left, right, center" 등 좌측, 우측, 가운데 등으로 가로 정렬하는 방법이 첫 번째입니다. 두 번째는 TD VALIGN = "top, middle, bottom"으로 위, 가운데, 아래 등 세로로 정렬이 가능한 열 정렬 방법이 있습니다. 

 

프레임 FRAME 태그 

먼저 프레임이라고 하는 것은 많이 들어보셔서 잘 아실 것 같은데요. 하나의 브라우저 화면을 여러 개로 분할하는 것을 말합니다. 그렇게 나뉜 공간마다 독립된 URL을 만들 수가 있죠. URL은 숫자 또는 그 외 문자열 등으로도 구성이 가능합니다. 프레임을 활용하여 웹 페이지를 수직 또는 수평으로 나눌 수 있습니다. 그렇게 여러 개의 영역으로 분할하고 웹문서 등이 들어갈 수 있도록 구성도 가능해집니다. 보통은 홈페이지를 제작할 때 많이 이용됨을 예상해볼 수 있습니다. 

 

프레임 태그와 함께 프레임 셋이라는 개념이 있습니다. 웹 페이지를 여러 개의 영역으로 분할하였을 때 각 각의 창을 프레임이라고 합니다. 그리고 이러한 여러 가지 프레임을 총괄해서 전체를 나타내는 것을 프라임 셋이라고 하는 것입니다. 결국 프레임 셋도 하난의 HTML 문서로 되어있고, 이용하기 위해서는 먼저 <FRAMESET> 태그를 이용하고 그 내부에 <FRAME>를 사용해서 각 프레임에 보여줄 문서를 지정해주시면 됩니다. 

 

<FRAMESET으로 각 프레임의 폭을 결정할 수 있게 됩니다. rows와 cols를 주로 사용하게 되고, 경계선과 간격 등도 설정이 가능합니다. 

~
<frameset rows = "30%, *, 30%" 혹은 cols= "50%, *, 50%">
  <frame src = "파일명, 웹페이지 주소">
  <frame src = "파일명, 웹페이지 주소">
~
</frameset>

상하의 비율은 frameset rows = "위 비율, 중간 비율, 아래 비율"로 볼 수 있습니다. 화면 크기를 기준으로 하는 퍼센트 값을 써주면 됩니다. *값은 나머지라는 뜻으로 가장 큰 폭을 갖는 프레임 부분에 사용해주시면 됩니다. 화면을 분할하게 되면 나머지가 자연스럽게 정해지기 때문에 그 값을 *로 입력해도 됩니다. 반면 좌우의 비율을 나눌 때 cols를 사용합니다. frameset cols = "좌측 비율, 가운데 비율, 우측 비율"로 볼 수 있습니다. 픽셀 값으로도 설정하실 수 있습니다. 

 

또한 경계선을 지정할 수 있는데 frameborder = 숫자 형식으로 할 수 있습니다. 일반적인 값은 0으로 되어있고 경계선이 없다는 것을 의미합니다. 1부터 경계선을 볼 수 있습니다. 그리고 프레임 간의 간격을 지정할 때는 framespacing = 수치로 두께를 설정해줄 수도 있습니다. 

 

보통 이렇게 프레임 태그를 이용하다 보면 noresize를 이용할 경우가 발생합니다. 프레임과 프레임 사이를 분할하였을 때 크기를 조절하지 못하도록 하려면 이 noresize를 사용하게 됩니다. 가끔 메뉴, 광고를 구성할 때 조절하지 못하도록 해야 하는 경우 사용되기도 하겠죠. 프레임을 잘 활용해보면, 프레임에 프레임을 구성할 수도 있습니다. 다양한 모양을 만들기 어렵기 때문에 다중 프레임을 이용할 수 있습니다. 요즘은 iframe을 크게 많이 이용하지는 않다 보니 적절하게 이용해 본느 것도 괜찮을 것 같습니다. 

이상 HTML이미지 alt 값 입력방법과 그 외 이미지에 관련된 태그까지 살펴보았습니다. 

 

 

 

HTML 태그 기본구조