[SIST] Web_HTML_days02_html 링크(link), 절대/상대경로, id 속성

1. <a></a> 태그

1. 모든 웹 페이지에서 찾을 수 있다.

2. 링크를 클릭하면 다른 문서로 이동할 수 있다.

3. 링크 위로 마우스를 이동하면 마우스가 작은 손 모양으로 바뀐다.

 

4. 링크는 텍스트, 이미지 또는 기타 html 요소가 될 수 있다.

5. html 링크는 하이퍼링크라고 한다.

6. 가장 중요한 속성 - href 속성(이동할 목적지 주소(url)를 입력) ***

7. 한 번이라도 방문한 링크 : 보라색
   방문하지 않은 링크 : 파랑색
   방문하려고 마우스를 누른 상태(활성:active) : 빨간색

8. target 속성 - 어디에서 링크된 문서를 열지를 결정하는 속성(대상)

    [타겟명]
   _self(기본값) : 자기자신 창
   _blank  : 새로운 창(새 탭)
   _parent  : 부모(상위) 프레임(frame)
   _top  : 창의 전체 본문에 열겠다

9. a 태그의 4가지 기능

1) 문서 이동

2) 자바스크립트 실행

  브라우저 제공하는 기본 내장 객체 == BOM

  최상위객체 : window

3) 이메일 전송

4) 책갈피 기능

 

* 프레임은 아직 배우지 않아서 저런 타겟명이 있다는 정도만 익히고 넘어갔다.

 

위와 같이 코딩 후 웹 브라우저를 띄우면 색이 파란색으로 바뀌면서 밑줄이 생기게 된다.

클릭을 하면 각 주소로 이동하게 된다.

---

2. URL

1. URL(Uniform Resource Locators)

2. 웹에서 원하는 문서의 주소를 지정하는데 사용

3. 웹서버에 URL를 사용해서 응답

4. URL 구성

http://localhost/webPro/html/days02/ex11.html

 

ㄱ. 통신규약(프로토콜) - 인터넷 서비스의 유형
http://
https:// -> s가 붙으면 보안과 관련된 통신규약
ftp://
file://
등등

ㄴ. IP Address
localhost
127.0.0.1
192.168.35.1
IP 주소를 외울 수 없으니 사용하기 쉽게 도메인을 사용함
www. 접두사
도메인명 naver.com

ㄷ. 포트(port)
http:// 기본 포트값 : 80 -> 생략가능
server.xml에서 포트번호 8090으로 바꾼 뒤 실행시키면
http://localhost:8090/webPro/html/days02/ex11.html
위와 같이 포트번호가 나옴

ㄹ. /webPro
이클립스로 웹프로젝트를 생성하면 그 프로젝트명(webPro)이 구분하는 경로명 - Context Root(path)
외부에서 다음과 같이 접근한 것은 http://localhost/webPro
내 PC의 물리적으로는 [content directory ] /src/main/webapp 까지 들어와져있음

외부 : http://localhost/webPro/html
물리적 : /src/main/webapp/html

외부 : http://localhost/webPro/html/days02/ex11.html
물리적 : /src/main/webapp/html/days02

ㅁ. 파일명(리소스명) ex11.html

htm 확장자는 리눅스 계열에서 사용

ㅂ. QueryString(쿼리 스트링) ?where=...&test=???
http://localhost/webPro/html/days02/ex11.html?where=...&test=???

 

5. URL은 인코딩을 ASCII 문자셋으로 사용하기 때문에 한글 문자 X *****
한글 문자 => %16진수값으로 변환해서 URL에 사용된다.
공백 => +기호 또는 %20 변환

[요청한 주소 URL]

> 구글에서 홍길동으로 검색시 URL이 아래와 같이 나온다.

> https://www.google.com/search?q=%ED%99%8D%EA%B8%B8%EB%8F%99&oq=%ED%99%8D%EA%B8%B8%EB%8F%99&aqs=chrome..69i57l2j35i39i362l8.798j0j15&sourceid=chrome&ie=UTF-8

 

https://
www.
google.com
/search
?
q=%ED%99%8D%EA%B8%B8%EB%8F%99  /  %ED%99%8D%EA%B8%B8%EB%8F%99 브라우저상에서 : 홍길동
&
oq=%ED%99%8D%EA%B8%B8%EB%8F%99 /    %ED%99%8D%EA%B8%B8%EB%8F%99 브라우저상에서 : 홍길동
&
aqs=chrome..69i57j0i131i433i512j46i131i199i291i433i512j46i131i199i433i465i512j0i131i433i512j46i131i199i433i465i512j46i199i433i465i512j46i3j46i131i199i433i465i512j0i131i433i512.1303j0j15
&
sourceid=chrome&ie=UTF-8

---

3. 절대경로와 상대경로

- 절대경로 : http://localhost/webPro/html/days02/ex11.html

   위와 같이 절대 변경할 수 없는 경로

 

- 웹은 경로구분자 /

 

- 상대경로(기준이 어디냐에 따라 달라짐)

  보고있는 페이지가 기준(ex11.html)
  현재 상대경로의 기준 :  http://localhost/webPro/html/days02

 

- 상위로 한 단계 올라가자 -> ../

 

 

- 경로를 http://localhost/webPro 이것만 준다면 web.xml에 있는 파일들 중 해당하는 것을 찾아줌

 

- Tomact v8.5 클릭 후 web 모듈에서 edit 후 경로 / 바꾸면 아래와 같이 경로가 바뀜
  http://localhost/html/days02/ex11.html
  바뀐 후 아래 링크 클릭하면 이동 가능
  다시 /webPro 바꾸면 이동 X

 

열고자 하는 파일이 절대경로와 같은 폴더에 있다면 파일명만 주어도 경로를 찾아갈 수 있다.

단, 앞에 / 붙이지 않도록 주의하자

---

4. html 링크를 사용해서 javascript 호출할 수 있다. (맛보기)

아직 javascript를 배우지는 않는 단계이지만, 맛보기로 조금 다뤄보았다.

 

[ 자바스크립트 처리 ]

<a href="javascript:자바스크립트코딩을하면된다.">javascript 처리</a>

 

[ 버튼 사용 ]

<button on이벤트명="javascript 코딩 실행">경고창을 띄우자</button><br> 

 

- Browser가 제공하는 기본 객체 모델(Object Model) == BOM
  BOM : window 내장객체
  BOM : document 내장객체

 

[ html 링크로 메일보내기 ]

<a href="mailto:메일계정">send mail(admin)</a>

 

 

메일보내기는 저런게 있구나 하고 넘어갔다.

클릭하면 아웃룩이 뜨는데 이 부분은 다시 알려주신다고 하셨다.

 

< 결과 >

 

링크, 버튼을 누르면 아래와 같이 메시지 창이 나오게 된다.

ex01.html을 누르면 ex01.html 파일이 열리게 된다.

---

* id 속성 (책갈피)

- 태그에 id 속성으로 id명을 부여해주면 책갈피를 만들 수 있다.

 

아래와 같이 원하는 위치에 id 속성을 주고

id명을 준 곳으로 갈 수 있도록 태그에 href="#id명" 속성을 입력해주고 웹브라우저를 띄우면 원하는 곳으로 화면을 이동해준다.

 

< 결과 >

---

오늘 <img> 태그에 대해서도 살짝 배웠는데 이 부분은 다음 주에 추가로 배운 부분까지 합쳐서 정리를 하려고 한다.