[HTML] 이미지, 링크, hover

Web/HTML

[HTML] 이미지, 링크, hover

kimbangul 2020. 5. 16. 05:11

이미지 태그

<img src="이미지 파일의 경로 또는 url />

이미지 주의사항

1. 저장할 때 반드시 웹문서 이름 저장법과 동일하게 공백없이 영문으로 저장

2. 웹 문서를 작업하는 폴더에 불러오고자 하는 이미지 파일이 위치

3. 너무 크거나 저화질의 작은 이미지는 최소화 하기

4. 글자와 같이 옆으로 나열되는 성격을 가지고 있으므로 단락 구분시 태그 부여 (<br> 등)

부가 속성

src: 경로 지정

alt: 이미지를 설명하는 주석

width, height 값을 부여 가능하나 고정비를 수정하지 않는 것이 좋음. (css를 통해 수정하는 것이 더 좋음)

글자처럼 나열되는 속성 때문에 공백을 주는 키를 눌렀을 때 띄어쓰기 발생, 여백의 오류

경로의 이해

폴더 안에 있는 이미지 -> 슬러시 (/) 를 통해 표현

img라는 폴더 안에 있는 이미지는 img/사진.jpg 으로 표현한다

index 파일(작업하는 파일)의 경로는 옮기지 말 것

인터넷에서 이미지 경로 가져오기

상위 경로의 이미지 파일 불러오기

앞에 ../ 붙이기

하이퍼텍스트링크

문서를 연결하는 태그 - 웹페이지로의 이동 혹은 웹페이지의 특정한 위치로 이동할때 사용

a태그의 성격

1. 글자처럼 옆으로 나열되는 성격 (inline) >> 문단에 대한 구분을 짓고 싶다면 <br />

2. 자동으로 스타일이 생성 (밑줄/글자색)

3. 링크 연결시 마우스를 올리면 손모양 커서로 변경

4. 링크 클릭시 화면 내 전환

인터넷 페이지로 연결할 때는 반드시 http:// (인터넷 주소)를 붙여야 함.

빈 링크, 임시링크 표시

메뉴에 대한 링크, 시안 디자인 진행 후 컨펌 받을 때 임시링크 표시

페이지 전환, html문서 연결

아웃룩 메일 계정 연결

메일 주소 앞에 mailto: 를 붙이면 됨.

<a href="mailto: highcolor_12@naver.com">이메일연결</a>

a링크의 속성

title: 링크에 마우스를 올렸을 때 이름이 생성, 설명

target: 링크의 창이 열리는 방법을 지정

1. self: 현재의 창에서 바로 전환(기본)

2. _blank: 문서는 그대로 두고 새창으로 전환(다른 인터넷 주소, 패밀리사이트)

a링크에 사용되어지는 스타일(CSS)

<style>

a {

text-decoration: none; -> 밑줄 제거

color: grey; -> 색상

}

</style>

a:hover{color: coral;}

커서를 링크 위에 두면 색상이 변환

www.evernote.com/l/AlevgjNsxp1D-o6hh0VqAeKBlPn5pjb1hfs/