HTML에서 그림과 링크 표현
- img 태그 관련 속성 활용
- a 태그를 다양한 유형의 콘텐츠에 활용
1. 이미지 삽입
img 태그는 웹 문서에 이미지를 삽입하고 시작태그만 사용한다.
<img>는 인라인 요소로 줄바꿈을 위해서는 <br>을 사용한다.
- src="이미지파일경로" : 문서에 표시할 이미지 파일 경로 지정
- html문서와 동일 폴더에 있는 경우 : "파일명.확장자명"
- 절대경로의 경우 : "절대경로\파일명.확장자명"
- 상대경로의 경우 : "현재 작업 위치 기준 상대경로\파일명.확장자명"
GIF JPG PNG - Graphics Interchange Format
- 256개 색상 지원
- 투명배경 처리 지원
- 용량이 작음
- 애니메이션 지원
- 로고나 클립 아트 형태의 이미지에 적합
- Joint Photographic coding Experts Groups
- 트루컬러 지원
- 압축률이 좋아 용량이 작음
- 사진과 같은 이미지에 적합
- Portable Network Graphics
- 트루컬러 지원
- 투명배경 처리 지원
- 웹 전용 이미지 파일 : JPEG보다 훨씬 빠르게 화면상에 표시
- 애니메이션 지원
- 클립 아트 같은 적은 색상을 가진 이미지에 적합
- width="숫자", height="숫자" : 이미지의 폭과 높이 지정(픽셀, %)
- % 단위를 사용하면 화면 크기 대비 상대적인 비율로 크기를 설정
- width나 height 중 하나의 크기만 지정시 나머지는 원본 크기에 비례해서 자동으로 설정
- alt="내용" : 이미지가 안나올 때 대체 될 텍스트 지정
- 마우스를 사진 위에 올려놓아도 볼 수 있음
- 대체 텍스트를 여러 줄 작성하고 싶으면 특수문자 을 사용
- usemap="#이름" : 클라이언트 측의 이미지맵을 지정
2. 하이퍼링크 삽입
하이퍼링크는 클릭을 통해 다른 곳으로 이동 할 수 있다.
<a> 태그('anchor')로 HTML문서에 하이퍼링크를 삽입 할 수 있다.
형식 : <a href="이동할 위치"> 추가 정보(텍스트/이미지) </a>
- href="URL" : 이동하고자 하는 경로나 주소를 지정
- hyper reference
- 텍스트나 이미지에 마우스를 올리면 커서의 모양이 손모양으로 바뀐다.
- 방문하지 않은 링크는 밑줄 친 파란색
- 방문한 링크는 밑줄 친 보라색
- 활성화 된 링크는 밑줄 친 빨간색
a 태그 사용 결과 <a href="http://www.naver.com">네이버<a> 네이버 <a href="http://www.naver.com" title="네이버">네이버<img src="그림경로"><a> 네이버 <a href="사진파일명.jpg">클릭시 원본 크기<img src="사진파일명.jpg" width="50"><a> 클릭시 원본 크기 - target="창의 이름" : 링크 클릭시 내용이 표시 될 창을 지정
target 속성값 설명 결과 _blank 새창으로 열기 네이버 _self 현재창에서 열기 네이버 _top 모든 프레임 사라지고 하나의 화면에서 열기 _parent 부모 프레임에서 열기 프레임명 표시할 프레임의 이름을 직접 지정 - download : 링크 클릭시 다운로드하여 저장 된다.
- 속성값 생략시 원본 파일명으로 저장
- 다릉 이름으로 파일 저장하고 싶으면 속성값으로 지정
- 압축 파일이나 실행 파일의 경우 download 속성 없이도 파일 다운
- 사용 결과 : 클릭시 펭귄 다운
- id : 특정 위치로 이동
- 한 페이지의 내용이 길경우 id속성을 사용해 특정 위치로 이동 시킨다.
- <a href="페이지경로#이동 할 특정 id명">내용</a>이미지 삽입으로 이동
- <a href="#top">맨위로</a>맨 위로 이동
- 다양한 링크 설정
- 이메일 링크 : <a href="mailto:에메일주소">텍스트/이미지</a>
- 자바스크립트 링크 : <a href="javasxript:자바스크립트코드">텍스트/이미지</a>
- 다양한 파일(동영상, 음악, 압축 등) 링크 :<a href="파일명.확장자명">텍스트/이미지</a>
'프로그래밍언어 > HTML' 카테고리의 다른 글
[HTML] HTML 멀티미디어(오디오와 비디오) (0) | 2022.03.07 |
---|---|
[HTML] HTML 테이블 (0) | 2022.03.04 |
[HTML] HTML 텍스트 표현 (0) | 2022.03.04 |
[HTML] HTML 개요 (0) | 2022.03.04 |
[HTML] semantic 태그 (0) | 2021.09.01 |
HTML에서 그림과 링크 표현
- img 태그 관련 속성 활용
- a 태그를 다양한 유형의 콘텐츠에 활용
1. 이미지 삽입
img 태그는 웹 문서에 이미지를 삽입하고 시작태그만 사용한다.
<img>는 인라인 요소로 줄바꿈을 위해서는 <br>을 사용한다.
- src="이미지파일경로" : 문서에 표시할 이미지 파일 경로 지정
- html문서와 동일 폴더에 있는 경우 : "파일명.확장자명"
- 절대경로의 경우 : "절대경로\파일명.확장자명"
- 상대경로의 경우 : "현재 작업 위치 기준 상대경로\파일명.확장자명"
GIF JPG PNG - Graphics Interchange Format
- 256개 색상 지원
- 투명배경 처리 지원
- 용량이 작음
- 애니메이션 지원
- 로고나 클립 아트 형태의 이미지에 적합
- Joint Photographic coding Experts Groups
- 트루컬러 지원
- 압축률이 좋아 용량이 작음
- 사진과 같은 이미지에 적합
- Portable Network Graphics
- 트루컬러 지원
- 투명배경 처리 지원
- 웹 전용 이미지 파일 : JPEG보다 훨씬 빠르게 화면상에 표시
- 애니메이션 지원
- 클립 아트 같은 적은 색상을 가진 이미지에 적합
- width="숫자", height="숫자" : 이미지의 폭과 높이 지정(픽셀, %)
- % 단위를 사용하면 화면 크기 대비 상대적인 비율로 크기를 설정
- width나 height 중 하나의 크기만 지정시 나머지는 원본 크기에 비례해서 자동으로 설정
- alt="내용" : 이미지가 안나올 때 대체 될 텍스트 지정
- 마우스를 사진 위에 올려놓아도 볼 수 있음
- 대체 텍스트를 여러 줄 작성하고 싶으면 특수문자 을 사용
- usemap="#이름" : 클라이언트 측의 이미지맵을 지정
2. 하이퍼링크 삽입
하이퍼링크는 클릭을 통해 다른 곳으로 이동 할 수 있다.
<a> 태그('anchor')로 HTML문서에 하이퍼링크를 삽입 할 수 있다.
형식 : <a href="이동할 위치"> 추가 정보(텍스트/이미지) </a>
- href="URL" : 이동하고자 하는 경로나 주소를 지정
- hyper reference
- 텍스트나 이미지에 마우스를 올리면 커서의 모양이 손모양으로 바뀐다.
- 방문하지 않은 링크는 밑줄 친 파란색
- 방문한 링크는 밑줄 친 보라색
- 활성화 된 링크는 밑줄 친 빨간색
a 태그 사용 결과 <a href="http://www.naver.com">네이버<a> 네이버 <a href="http://www.naver.com" title="네이버">네이버<img src="그림경로"><a> 네이버 <a href="사진파일명.jpg">클릭시 원본 크기<img src="사진파일명.jpg" width="50"><a> 클릭시 원본 크기 - target="창의 이름" : 링크 클릭시 내용이 표시 될 창을 지정
target 속성값 설명 결과 _blank 새창으로 열기 네이버 _self 현재창에서 열기 네이버 _top 모든 프레임 사라지고 하나의 화면에서 열기 _parent 부모 프레임에서 열기 프레임명 표시할 프레임의 이름을 직접 지정 - download : 링크 클릭시 다운로드하여 저장 된다.
- 속성값 생략시 원본 파일명으로 저장
- 다릉 이름으로 파일 저장하고 싶으면 속성값으로 지정
- 압축 파일이나 실행 파일의 경우 download 속성 없이도 파일 다운
- 사용 결과 : 클릭시 펭귄 다운
- id : 특정 위치로 이동
- 한 페이지의 내용이 길경우 id속성을 사용해 특정 위치로 이동 시킨다.
- <a href="페이지경로#이동 할 특정 id명">내용</a>이미지 삽입으로 이동
- <a href="#top">맨위로</a>맨 위로 이동
- 다양한 링크 설정
- 이메일 링크 : <a href="mailto:에메일주소">텍스트/이미지</a>
- 자바스크립트 링크 : <a href="javasxript:자바스크립트코드">텍스트/이미지</a>
- 다양한 파일(동영상, 음악, 압축 등) 링크 :<a href="파일명.확장자명">텍스트/이미지</a>
'프로그래밍언어 > HTML' 카테고리의 다른 글
[HTML] HTML 멀티미디어(오디오와 비디오) (0) | 2022.03.07 |
---|---|
[HTML] HTML 테이블 (0) | 2022.03.04 |
[HTML] HTML 텍스트 표현 (0) | 2022.03.04 |
[HTML] HTML 개요 (0) | 2022.03.04 |
[HTML] semantic 태그 (0) | 2021.09.01 |