3.HTML 에서 그림과 링크 표현

Helen & Tobi·2021년 3월 3일
0
post-thumbnail

1.이미지삽입

src

HTML 문서에 표시할 이미지 파일의 이름/경로 지정
-필수 속성

GIF | JPG | PNG
256색상지원 트루컬러 트루컬러
투명배경처리 좋은압축률 투병배경처리
용량이작음 용량이작음 웹전용이미지파일
고로나클립아트 사진이미지 클립아트와 같이

문서와 같은 폴더의경우
// <img src ="gravity.jpg"

절대경로의경우
// <img src ="C:\htmlEx\img\gravity.jpg"

상대경로(현재위치가 C:\htmlEx경우)
// <img src="img\flower.jgp"

Width, height -> 이미지의 크기(폭,높이)지정

기본출력크기-이미지의 원본크기
속성값- 픽셀,%(브라우저 화면 크기에 대한 상대적 크기)
폭과 높이 중에서 하나의 크기만 지정되면
->나머지 하나의 값은 원본 크기에 비례해서 자동으로 지정

alt -> 이미지에 대한 대체 텍스트를 지정

이미지가 화면에 표시되지 않거나 이미지가 깨지는 경우를 위해 사용

2.하이퍼링크

<a href = "이동할 위치" 링크를 걸어 줄 내용물(텍스트,이미지)

※주요속성
href="url"->링크를 톷ㅇ해 이동하려는 곳의 경로/주소 지정
target="창이름"->링크된 내용이 표시될 창을 지정
download -> href 속성에 의해 지정된 파일을 직접 다운로드

target 속성

링크가 클릭 되었을때 링크로 연결된 새로운 내용이 표시될 창 지정

target속성의 값
_blank ->새로운 창(탭)에서 링크된 문서를 엶
_self -> (기본값). 현재의 창(탭)에서 링크된 문서를 엶
_top -> 현재의 창이 프레임으로 구성된경우 모든 프레임이 사라지고 하나의화면에서 문서를엶
_parent -> 부모 프렐임에서 링크된 문서를 엶
프레임명 -> 링크된 문서를 표시할 프레임의 이름을 직접지정

그래비티(현재창)

### download속성 링크 클릭시 href속성에서 지정한 파일을 별도의 브라우저에서 열지 않고 직적 다운로드하여 표시 ※특정 위치로로의 이동 동일 / 다른 페이지의 특정 위치로 이동하는 경우 ◎링크를 삽입하는 부분 -같은 페이지 내에서 이동하는 경우 내용 -다른 페이지의 특정 위치로 이동하는 경우 내용 ◎이동할 위치 내용

목차

HTML이란 무엇인가?
CSS란 무엇인가?
JS란 무엇인가?
HTML5특징(다른 페이지로 이동)






HTML

Hyper Text Markup Language








CSS

Cascading Style Sheet








JavaScript

클라이언트 쪽에서 독립적으로 실행되는 프로그램을 작성하기 위한 스크립트언어








맨위로

다양한 링크설정

이메일링크
텍스트/이미지
이메일 보내기

텍스트/이미지
코드실행

파일링크
압축 파일,실행파일 -> 다운로드
음악파일, 동영상 파일-> 플러그인 프로그램으로 실행/ 저장
텍스트/이미지

3.

현재의 페이지 안에서 다른 웹페이지를 표시하는 창을 사입하기 위한 태그

주요속성

  • name="이름"->창의 이름지정
  • src="URL" -> 창에 표시될 문서의 URL 지정
  • srcdoc="HTML코드"-> 창에서 보여줄 HTML 콘테츠 지정
    *srcdoc 속성이 지정되면 src 속성에서 지정된 콘테츠는 무시됨
    (브라우져 마다 지원하지 않는 경우도 있다.)
  • width= "픽셀"
  • height= "픽셀"
gravity   my page   my pic  

  • 링크 부분 → 〈a href=“#이동할 특정 위치”〉내용물〈/a〉
  • 이동할 위치 → 〈a id=“이동할 특정 위치”〉 ~ 〈/a〉
    ▶ 이메일 링크 → 〈a href=“mailto:이메일주소”〉내용물〈/a〉
    ▶ 자바스크립트 링크 → 〈a href=“javascript:코드”〉내용물〈/a〉
    ▶ 파일 링크 → 〈a href=“파일명”〉내용물〈/a〉

〈iframe〉 태그와 이미지맵
▶ 〈iframe〉 → 현재 페이지 안에 다른 웹페이지를 표시할 수 있는 창을 삽입 → 속성: name, src, srcdoc, width, height
▶ 이미지맵 → 하나의 이미지를 여러 개의 영역으로 나누어 각 영역마다 링크를 지정하는 것 → 〈img src="URL" usemap="#맵이름"〉, 〈map name=“맵이름”〉, 〈map〉 태그 내에서 각 영역을 지정하는 〈area〉 태그

0개의 댓글