목차
이미지
1) 웹에서 사용하는 이미지 형식
| 파일 형식 | 설명 |
| GIF(Graphic Interchange Form) | 표시 가능한 최대 색상 수 256가지. 다른 이미지 형식에 비해 파일크기가 작아서 아이콘이나 불릿 등 작은 이미지에 주로 사용. 움직이는 이미지 제작 가능 |
| JPG/JPEG (Joint Photographic Experts Group) |
GIF보다 다양한 색상과 명암 표현 가능. 저장을 여러 번 반복 시 화질 저하. |
| PNG(Portable Network Graphics) | 투명 배경을 만들면서 다양한 색상 표현 가능. 네트워크용으로 개발되었기 때문에 최근에 많이 사용. |
| SVG(Scalable Vector Graphics) | ① gif, jpg/jpeg, png 파일을 축소하거나 확대하면 이미지가 깨지는 데 이러한 이미지들을 비트맵 이미지 (bitmap image)라고 함 ② 이미지를 확대하거나 축소해도 원본 상태가 유지되는 이미지를 벡터 이미지(vector image)라고 하고 SVG 이미지는 벡터 이미지의 한 종류(SVG, AI, EPS 등) ③ 로고나 아이콘, 지도 또는 데이터 시각화(차트나 다이어그램) 등에 많이 사용 ex) d3.js(http://d3js.org/), Raphael.js(http://dmitrybaranovskiy.github.io/raphael/) 등 시각화 라이브러리 ④ 비주얼 스튜디오 코드에서 svg 이미지 파일 열어서 확인 |
※SVG 이미지 Modernizr
① 인터넷 익스플로러 8, 안드로이드 2.3이하 버전은 SVG 이미지 형식 미지원
② Modernizr는 브라우저에서 특정 기능을 지원하는 지 테스트하는 툴
③ Modernizr 사이트(https://modernizr.com/) 접속 후 Add your detects 클릭> SVG 선택> BUILD 버튼 클릭> Download 클릭
2) 이미지 삽입하기
<img> 태그
① 웹 문서에 이미지 삽입할 때 사용
② src 속성 : 이미지 파일 경로 지정
③ 이미지 경로는 웹 문서 위치 기준으로 정해짐.
④ alt 속성 : 이미지를 설명해 주는 대체 텍스트
시각장애인들을 위한 화면 낭독기에서 이미지는 읽을 수 없기 때문에 대체 텍스트 첨부
⑤ width, height 속성 : 이미지 크기 조정하기
※ 이미지 파일 경로 이해하기
① ‘/’는 하위 폴더 표시
② 같은 레벨의 다른 폴더는 폴더명을 입력
ex) <img src=“images/road.jpg”/>
③ ‘..’은 한 레벨위의 폴더 표시
ex) <img src=“../images/road.jpg”/>
④ 웹 상의 이미지 경로 지정 : 웹 상의 이미지 우클릭 후 이미지 주소복사 하여 img태그 src속성에 입력
3) 이미지에 설명 글 붙이기
<figure>, <figcaption> 태그
① HTML5 이전에는 <p>를 사용하여 이미지에 설명글 첨부
② <figure>, <figcaption>은 이미지뿐만 아나라 표나 멀티미디어 요소 어디에나 설명글 첨부 가능
③ <figure> : 설명을 붙여야 할 대상을 지정, 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용
④ <figcaption> : 설명 글 첨부하는 태그, 하나 또는 여러 개의 멀티미디어 파일에 설명글 표시 가능
하이퍼링크
1) 링크 만들기
<a>태그, href속성
① 웹 사이트 내에서 클릭했을 때 다른 페이지로 넘어갈 때 사용
② <a href=“링크할 주소” 속성=“속성 값“> 텍스트나 <img></a>
③ <a> 안에서 사용할 수 있는 속성들
④ CSS를 이용해서 텍스트 링크의 색상과 밑줄을 없앨 수 있음
| 속성 | 설명 |
| href | 링크한 문서나 사이트의 주소를 입력 |
| target | 링크한 내용이 표시될 위치(현재 창 또는 새창)를 지정 |
| download | 링크한 내용을 보여주는 것이 아니라 다운로드함 |
| rel | 현재 문서와 링크한 문서의 관계를 알려줌 |
| hreflang | 링크한 문서의 언어를 지정 |
| type | 링크한 문서의 파일 유형을 알려줌 |
2) 새 탭에서 링크 열기
target 속성
① target 속성을 이용하면 링크를 띄울 페이지를 지정할 수 있음
| 속성 값 | 설명 |
| _blank | 링크 내용이 새 창이나 새 탭에 열림 |
| _self | target 속성의 기본 값으로 링크가 있는 화면에서 열림 |
| _parent | 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시 |
| _top | 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시 |
3) 부모창에 링크 띄우기
아이프레임과 target
① 아이프레임은 프레임의 일종으로 문서 본문에 액자를 주입하는 것을 말함
② <iframe>을 이용해 현재 문서에 다른 문서를 포함시키거나 자바스크립트를 이용해 팝업 창을 열면
현재 문서는 부모 문서가 되고 <iframe> 문서나 팝업문서는 자식 문서가 됨
※ HTML5가 웹 표준으로 지정되면서 iframe 대체 태그들이 추가됨
- iframe 사용 시 XSS(cross site scripting)에 취약, 사용성 문제 발생(브라우저가 비정상 동작)
- embed 태그를 사용하여 iframe 대체
4) 한 페이지 안에서 점프
① 앵커(anchor) : 페이지가 긴 웹 문서에서 특정요소를 클릭하면 그 위치로 이동하는 기능
ex) 교보문고 책 소개 페이지
② 기본형
<태그 id ="앵커이름"> 텍스트 또는 이미지 </태그>
<a href = "앵커이름">텍스트 또는 이미지</a>
5) 이미지 맵 지정하기
<map> 태그, <area> 태그, usemap 속성
① 한 이미지상에서 클릭위치에 따라 서로 다른 링크를 연결할 때 <map>사용 웹 사이트보다 메일 등에서 많이 사용됨
② 기본형
<map name ="맵이름">
<area>
<area>
......
</map>
<img src = "이미지 파일" usemap="#맵이름">
6) <area>태크 속성들
| 속성 | 설명 | ||
| alt | 대체 텍스트 지정 | ||
| coords | 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정 | ||
| download | 링크를 클릭했을 때 링크 문서를 다운로드 | ||
| href | 링크 문서(사이트)경로 지정 | ||
| media | 링크 문서(사이트)를 어떤 미디어에 최적화할지 지정 | ||
| rel | 현재 문서와 링크 문서 사이의 관계 지정 | 속성값 | alternate, bookmark, help, license, next, nofollow, noreferer, prefetch, prev, search, tag |
| shape | 링크로 사용할 영역의 형태 지정 | 속성값 | default, rect, circle, poly |
| target | 링크를 표시할 대상 지정 | 속성값 | _blank, _parent, _self, _top, 프레임이름 |
| type | 링크 문서의 미디어 유형을 지정 | ||