[html] a 태그, 절대경로와 상대경로, 이미지 태그

하이퍼 링크를 걸어주는 <a> 태그

<a> 태그는 앵커(anchor)의 약자로, 글자 또는 이미지를 통해 해당 페이지로 연결해주는 태그이다.

반드시 href( Hypertext Reference )속성을 이용해 연결하고자 하는 사이트의 주소나 페이지의 주소를 연결해야한다.

< 기본형 >
<a href="링크 또는 파일경로" target="페이지 전환 시 보여주는 방식" title="링크에 대한 설명"></a>

< href 의 속성값과 기능 >

1. 일반적인 사이트 링크
: http 로 시작하는 일반 사이트 링크 주소를 입력하면 해당 사이트로 이동한다
.
2. /파일명.html
: 해당 html 파일로 연결해준다. 이때 절대경로나 상대경로를 이용해야 한다.

3. mailto:이메일주소
: 해당 메일 주소로 이메일을 보낼 수 있게 outlook이 연결된다.

4. tel:전화번호
: 링크를 클릭하면 컴퓨터에 연결된 인터넷 전화 또는 모바일에서 전화를 걸 수 있다.

5. sms:전화번호
: 링크를 클릭하면 모바일에서 문자를 보낼 수 있다.

---

1. 일반적인 사이트 링크

네이버, 카카오, 다음, 구글 글자에 하이퍼링크를 건 모습

target의 _blank 속성만 자주쓴다.

_blank 효과로 인해 새로운 창으로 나오는 모습

마우스를 갖다 대면 나오는 설명(title)

---

2. /파일명.html

새로운 html 폴더를 생성하여 그 폴더의 주소를 입력한다.

test.html 파일 생성

a_tag.html 에서 <a>태그로 링크 연결

---

3. 이메일보내기, 전화걸기, 문자보내기

---

4. 임시경로 #

당장 연결할 링크가 없는 경우 임시로 링크를 걸어주는 속성 값.

링크는 걸려있지만 클릭하면 원래 페이지에서 #만 붙여서 연결된다.

 

 

---

절대경로(= 하향경로)

파일들을 모두 감싸고 있는 최상위폴더( = / =root ) 를 기준으로 파일 경로를 써서 나열하는 방식이다.

예를들어, 작업폴더 안에 'sub' 폴더가 있고 그 안에 'sub01.html' 파일이 있다면 "href="/sub/sub01.html" 로 명시하여 연결할 수 있다.

단, root로부터 시작하여 모든 폴더경로와 파일명이 드러나므로 보안이 취약하다는 단점이 있다.

 

- 맨 앞의 / : 파일 전체를 묶고 있는 프로젝트 폴더( =root = 최상위 폴더)
- / : ~폴더 안에 라는 뜻

 

상대경로(=상향경로)

현재 작성하고 있는 파일을 기준으로, 연결하고자 하는 파일까지를 기호로 나타내며 표현하는 방식.

기호 사용으로 인해 절대경로에 비해 폴더 경로 노출 우려가 적기 때문에, 보안에 더 유리하여 많이 사용된다.

- ./ : 현재 폴더. 현재 작성하고 있는 파일이 담긴 폴더를 뜻함.
- ../ : 한 폴더 위. 상위 폴더

적용) ../../ : 두 폴더 위

 

< 파일 내용 >

web - side - side.html

        - sub  - sub2 - sub02.html

                             - sub01. html

                  - a_tag.html

                  - test.html

 

 

절대경로로 sub 파일 가는 방법

sub 파일에서 side 파일로 가는 방법

side 파일에서 sub 파일로 가는 방법

---

폴더안에 파일이 없는 상태에서 새 폴더를 만들었을 경우

---

 

이미지태그

<img src="경로" alt"설명" width="숫자" height="숫자" />

 

이미지를 불러오는 태그. inline-block 속성의 대표 태그이다. 단독태그로 사용된다.

 

여러개의 이미지를 출력하면 가로로 출력되고, 이미지 사이에 공백 1칸이 생긴다. 이미 사각형의 형태를 가지고 있기 때문에 width와 height로 너비 높이도 조정할 수 있다. 이때, 이미지 비율을 정비율로 조절하고 싶다면, width만 사용하는 것이 좋다. width와 height의 값은 숫자를 입력하면 되고, 픽셀 단위일 경우 단위는 생략하고 숫자만 입력한다. 픽셀 이외의 단위를 입력하고자 하는 경우에는 단위까지 함께 작정해야 한다.

 

이미지를 불러 올  때에는, src 속성에 이미지 경로를 절대경로나 상대경로로 불러 올 수 있다. 이미지 설명은 alt 속성을 이용하여 반든시 적어주어야 한다.(웹표준) alt에 쓰여진 값은 화면낭독기를 통해 시각장애인에게 해당 이미지를 설명하기도 하고, 이미지 경로가 틀렸을 경우 해당이미지가 어떤 이미지인지 파악하는 용도로 쓰인다. 이미지 설명같은 경우 직관적이고 간단하게 쓰는 것이 좋다.

 

이미지를 폴더에 넣는 방법(드레그)

 

- 이미지 경로가 올바른 경우 정렬되어 나타난다.

 

- 이미지 경로가 틀린 경우 액박이 뜬다.

 

 

web02.zip

0.12MB