쥬로그
HTML 이미지 태그 (image tag) 본문
< HTML 이미지 태그 (image tag) >
이미지를 클릭하면 다른 문서나 사이트로 넘어가도록 하이퍼링크(hyperlink) 거는 방법
* 이미지 관련 태그
• <img src="경로" 속성="값">
: 웹 문서에 이미지 삽입
: src 속성을 사용해 파일 경로를 알려 주어야 화면에 표시 가능
→ src 속성
: 이미지 파일 경로 지정
ex) 웹 문서와 이미지 파일이 같은 경로에 있는 경우
<img stc="~~.jpg">
ex) 웹 문서와 이미지 파일이 다른 경로에 있는 경우
<img src="파일명/~~~.jpg"> body { ~~-image: url("../파일명/~~~.png"); } ! 파일 경로
한 단계 위로 올라가는 기호 ' .. '
한 단계 아래로 내려오는 기호 ' / '
ex) 웹 상의 링크를 복사해 이미지 경로 지정
이미 인터넷에 올라와 있는 이미지 링크를 복사해 이미지 경로 지정
<img src="http://www.~~~/upload/~/~/~~.jpg"> ! 웹 이미지는 인터넷에 접속할 수 있어야 화면에 표시됨
→ alt 속성
: 이미지 대체 텍스트
: 화면 낭독기는 문서 상의 텍스트만 읽기 때문에 alt 속성을 이용하여 이미지에 대한 설명을 넣어 정보를 전달
: 연결 속도가 느리거나 이미지가 제대로 표시되지 않을 경우 대체 텍스트로 이미지 짐작 가능
: 불릿(bullet) 혹은 작은 아이콘처럼 특별한 의미가 없는 이미지의 경우 대체 텍스트 지정하지 않아도 된다.
<img src="money.jpg" alt="돈"> <img src="bullet1.gif" alt="">
→ width, height 속성
: 이미지 크기 조정
: 지정하지 않을 경우 원본 이미지 크기 그대로 표시
: 작은 이미지를 크게 표시할 경우, 화질이 나빠질 수 있다.
• <figure> ~ </figure>
<figcaption> ~ </figcaption>
: 이미지 설명 글 (캡션)
→ <figure> 요소 </figure>
: 설명 글을 붙일 대상 지정
: 멀티미디어 파일, 사진, 표, 소스 코드 등 웹 문서 안에서 한 단위가 되는 요소를 묶을 때도 사용
→ <figcaption> 설명 글 </figcaption>
: 설명 글 붙이기
: 이미지, 오디오, 비디오, 텍스트 단락, 표 등에 설명 글 추가 가능
: 이미지와 설명 글이 <figure> 태그로 묶여 있기 때문에 이미지 위치를 옮기면 함께 이동
ex) 이미지 아래에 설명 글 붙이기
<body> <figure> <img src="images/fnvl3.png" alt="웃는루피"> <figcaption>주주디의 루피 월드</figcaption> </figure> </body>
ex) 이미지 위에 설명 글 붙이기
<body> <figure> <figcaption>주주디의 루피 월드</figcaption> <img src="images/fnvl3.png" alt="웃는루피"> </figure> </body>
* 하이퍼링크 생성 태그
• <a> ~ </a>
: 링크 만들기
: 다양한 속성과 함께 사용
→ href 속성
: 링크한 문서나 사이트의 주소 입력
→ target 속성
: 링크한 내용이 표시될 위치 지정 (현재 창 또는 새 창, 탭)
⇒ _blank : 링크 내용이 새 창(탭)에서 열림
⇒ _self : target 속성의 기본 값, 현재 창(탭)에서 열림
⇒ _parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시
⇒ _top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시
! 아이 프레임 <iframe> & 부모 프레임
프레임의 일종으로 프레임 중에서 문서 본문에 액자처럼 삽입하는 것
현재 문서에 다른 문서를 포함시키거나 JS를 이용해 팝업 창을 열도록 했을 때 현재 문서는 부모 문서가 되고, <ifram>으로 삽입된 문서와 팝업 문서는 자식 문서가 된다.
→ download 속성
: 링크한 내용을 다운로드
→ rel 속성
: 현재 문서와 링크한 문서의 관계 안내
→ hreflang 속성
: 링크한 문서의 언어 지정
→ type 속성
: 링크한 문서의 파일 유형 안내
ex) 링크 만들기
<h1> 주주디의 sw 이야기 </h1> <a href="http://www.~~~~"> 주주디의 sw 이야기 홈페이지 </a> <a href="http://www.~~~~"> <img src="images/jujudy'sswstory.jpg> </a>
• 앵커 (anchor) 기능
: 특정 요소를 클릭하면 그 위치로 한 번에 이동
: 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 생성 및 각각 다른 이름 지정
: jQuery Mobile을 이용해 모바일 웹 사이트나 웹앱을 만들 때 자주 사용
→ <태그 id="앵커 이름"> 텍스트 or 이미지 </태그>
<a href="#앵커 이름"> 텍스트 or 이미지 </a>
ex)
<ul id="menu"> <li><a href="#content1">메뉴 1</a></li> <li><a href="#content2">메뉴 2</a></li> <li><a href="content3">메뉴 3</a></li> </ul> <h2 id="content1">내용 1</h2> <p>웹 문서가 너무 길 경우,,, 앵커(anchor)라고 합니다.</p> <p><a href="#menu">[메뉴로]</a></p> <h2 id="content2">내용 2</h2> <p>웹 문서가 너무 길 경우,,, 앵커(anchor)라고 합니다.</p> <p><a href="#menu">[메뉴로]</a></p> <h2 id="content3">내용 3</h2> <p>웹 문서가 너무 길 경우,,, 앵커(anchor)라고 합니다.</p> <p><a href="#menu">[메뉴로]</a></p>[메뉴로] 를 선택하면 상단으로 위치가 옮겨지고,
메뉴에서 메뉴1, 메뉴2, 메뉴3 을 선택하면 내용1, 내용2, 내용3 으로 이동된다.
• <map>
<area 속성="값" 속성="값" ...>
<area 속성="값" 속성="값" ...>
...
</map>
<img src="이미지 파일" usemap="#map 이름">
: 이미지 맵 이란, 이미지에 여러 개의 링크가 존재할 경우 클릭 위치에 따라 서로 다른 링크가 열리는 것
: 메일 등에 주로 사용됨
→ alt 속성
: 대체 텍스트 지정
→ coords 속성
: 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정
→ download 속성
: 링크 클릭 시 링크 문서 다운로드
→ href 속성
: 링크 문서(사이트) 경로 지정
→ media 속성
: 링크 문서(사이트)를 어떤 미디어에 최적화시킬지 지정
→ rel 속성
: 현재 문서와 링크 문서 사이의 관계 지정
⇒ Iternate, bookmark, help, license, next, nofollow, noreferer, prefetch, prev, search, tag
→ shape 속성
: 링크로 사용할 영역의 형태 지정
⇒ default, rect, circle, poly
→ target 속성
: 링크를 표시할 대상 지정
⇒ _blank, _parent, _self, _top, 프레임 이름
→ type 속성
: 링크 문서의 미디어 유형 지정
ex)
<img src="images/~~.jpg" alt"" usemap="#~~~~"> <map name="~~~~"> <area shape="rect" coords="20,20,170,210" href="http://www.~~~~" target="_blank"> <area shape="circle" coords="300,250,50" href="http://www.~~~~~" target="_blank"> </map>😊 Do it! HTML5 + CSS 웹 표준의 정석 책으로
독학하는 코린이의 공부 기록
'Study > HTML CSS' 카테고리의 다른 글
| 웹 이미지 형식 - SVG (0) | 2021.09.15 |
|---|---|
| 웹 이미지 형식 - GIF, JPG/JPEG, PNG (0) | 2021.09.14 |
| 폰트(Font) - OTF / TTF 가 뭐야? (0) | 2021.09.09 |
| HTML 텍스트(Text) 2 (2) | 2021.09.08 |
| HTML 텍스트(Text) 1 (0) | 2021.09.08 |
