26. HTML - 이미지와 하이퍼링크

1. 이미지와 하이퍼링크

1. 이미지

1. 웹에서 사용하는 이미지의 종류
   • GIF : Graphic Iterchange Form의 약자.

       표시가능한 색상의 수가 256가지.
       다른 이미지 파일들에 비해 크기가 작아서 주로 아이콘이나 불릿 등 작은 이미지에 사용이 되고 또는 움직이는 이미지를 제작할 때 사용.

   • JPG/JPEG : Joint Photographic Experts

            Group의 약자.
            GIF보다 더 다양한 색생과 명암 표현이 가능하고 저장을 여러번 반복하면 화질이 저하되는 단점이 있다.

   • PNG : Portable Network Graphics의 약자.

       네트워크 용으로 만들어지 이미지 파일이라 최근에 많이 사용되고 있고 배경을 투명하게 만들 수 있어서 다양한 배경의 표현이 가능하다.

   • SVG : Scalable Vector Graphics의 약자.

       코드로 구성된 벡터 이미지 파일이며 확대하거나 축소해도 이미지가 깨지지 않고 아무리 많이 반복 저장해도 화질 저하가 일어나지 않는다. 통계를 표출하는 그래프나 차트로 주로 사용된다.

2. 이미지를 표출해주는 img

1. 웹 문서에 이미지를 표출하고 싶을 때 사용하는 태그
2. src 속성 : 표출할 이미지의 경로를 지정
3. 웹 문서의 경로 기준으로 이미지경로를 지정해야한다.
4. 웹 표준에 의해 alt속성을 이용해서 시각장애인들을 위한 대체텍스트를 항상 추가해줘야 한다.
5. width, height 속성 : 이미지가 표출될 크기를 지정할 수 있다.

3. 이미지에 설명을 붙여주는 figure, figcaption

1. HTML5이전에는 모든 태그에 설명을 붙일 때 p 태그를 이용해서 설명을 붙였다. HTML5에서 figure 태그를 지원해주면서 figure, figcaption을 통해서 태그들에 설명을 붙이도록 변경되었다.
2. figure, figcaption 태그는 이미지, 테이블, 멀티미디어(오디오나 비디오 등) 요소 어디에나 설명을 붙일 수 있다.
3. figure 태그는 설명을 붙여야 될 대상을 지정. 웹 문서에서 한 단위가 되는 요소를 묶을 때 사용.
4. figcaption 태그는 figure 태그로 묶은 요소에 설명을 붙여주는 태그이고 하나 또는 여러개의 멀티미디어에 대한 설명을 작성할 수 있다.

4. 하이퍼 링크를 만들어 주는 a

1. a 태그는 다른 페이지나 다른 사이트로 이동할 수 있도록 링크를 만들어주는 태그
2. href 속성 : 이동할 페이지나 사이트의 주소를 지정
3. target 속성 : 이동할 페이지나 사이트를 표시할 위치를 지정(현재 창, 새탭)
4. download 속성 : 링크된 페이지나 사이트로 이동하는 게 아니고 다운로드받도록 설정.
5. 기본적으로 a 태그의 글자는 파란색에 밑줄이 그어진 상태로 표출되는데 css를 이용해서 밑줄도 제거하고 글자색도 변경 가능
6. a 태그안에 img 태그를 사용하면 이미지로 링크를 만들 수 있다.
7. target 속성 값들
   • _blank : 링크의 내용이 새창이나 새탭에서 열림
   • _self : 기본 값. 현재창에서 링크의 내용 열림
   • _parent : 프레임을 사용했을 때 링크의 내용을 부모 프레임에 표시
   • _top : 프레임을 사용했을 때 프레임을 벗어나 링크내용을 화면 전체에 표시
8. 프레임과 target
   • 프레임은 웹문서 본문에 액자를 하나 생성해서 사용하는 것을 의미
   • iframe, embed 태그를 이용해서 현재 문서에 다른 문서를 포함하거나 팝업을 띄우게 되면 현재 문서가 부모창이 되고 iframe이나 embed로 호출한 문서나 팝업이 자식이 돼서 부모의 액자에 표시.
   • iframe XSS(Cross Site Script)에 취약한 문제점이 있어서 보안상 embed 태그를 사용하도록 권장되고 있다.

5. 한 페이지에서 원하는 영역으로 이동하는 앵커

1. a 태그를 이용해서 한 페이지 내의 원하는 영역에 링크를 걸어서 이동하는 기능을 앵커라고 한다.
2. 원하는 영역에 태그에 id속성으로 id를 부여하고 a 태그의 href속성값으로 # + 부여된 id를 넣어주면된다.