0916 HTML - 경로, 링크로 나타낼 수 있는 종류
목차
경로(Path)
문서에서 다른 문서로 연결하거나 문서 내에 이미지 및 음악 파일을 넣을 때, 해당 파일의 위치를 브라우저에게 알려주어야 한다.
<a>는 href 속성을 이용해서, <img>는 src 속성을 이용해서 명시한다.
이 때, 해당 파일의 위치를 경로(path)라고 한다.
경로를 표기할 때 두가지 방법이 있는데 절대경로와 상대경로가 있다.
절대경로(Absolute path, Absolute pathname, Full path)
컴퓨터내의 그곳이 폴더가 있는 경로까지의 모든 경로를 적어 주는 것.
정해져 있는 경로라고 하기 때문에 절대 경로라고 한다.
루트 디렉토리를 포함한 주소를 갖는 경로, 컴퓨터 상의 디렉토리에서 C:\를 항상 포함
URL에서는 http://를 항상 포함 항상 기준은 루트가 됨
ex ) 서울특별시 관악구 신림동 00번지 000호 . 같은 이 집을 찾아가기 위한 주소를 만드는 것과 같다.
언제 쓰는지?
일반적으로 다른 사람이 만든 문서나 파일을 연결할 때, 외부 사이트를 연결할 때
장점:
루트 디렉토리를 항상 포함하기 때문에 외부에서도 절대경로를 이용하여 파일 연결 가능
어디에서나 해당 파일을 찾을 수 있음
단점:
서버의 주소가 달라지면 절대경로로 설정된 주소들을 모두 수정해야 함
로딩속도는 상대경로에 비해 느림
이유: 서버 내부에서 처리가 되는게 아니고 DNS조회를 통해 해당파일을 찾기 때문
절대경로로 링크걸기
a 태그로 링크 걸기
<a href = "이동할 주소"> ... </a> <a href = "경로" > ... </a> <br>
<a href="https://www.w3schools.com/">w3schools.com</a>
링크 걸린 텍스트는 밑줄이 나타나고 커서 모양이 바뀐다.
색상은 세가지 중에서 나온다!
<a href="https://www.naver.com.com/">naver</a>
<a href="https://www.google.com/">google</a>
<a href="https://jeoniee.tistory.com/">tistory.com</a>파랑 - 초기 링크
빨강 - 활성화 링크
보라 - 방문한 링크
상대경로(Relative path)
현재 위치한 곳을 기준 혹은 이곳, 저곳의 위치. 루트 디렉토리를 포함하지 않는 주소를 갖는 경로.
현재 참조하고 있는 문서가 항상 기준이 되고, 이 문서를 통해 상위, 하위 또는 현재폴더를 연결한다.
A가의 폴더에 있는 혹은 A라는 파일의 있는 폴더 기준 을 상대적 경로라고 한다.
C:/Users/Administrator/Downloads 앞의 절대경로를 정해서 위치를 정해주는것이 아닌
./with_jquery/index.html 같은 것으로 나 자신 부터의 경로를 생성하는 것.
상위폴더 ../파일명
현재폴더 파일명
하위폴더 디렉토리명/파일명
장점
서버주소가 달라져도 이전 서버와 디렉토리 구조만 같다면 경로수정 안해도 됨
이유: 현재문서를 기준으로 경로를 연결, 루트 디렉토리는 사용하지 않음
상대경로로 링크걸기
<a href="./sub/shop.html">샵으로이동</a>
<a href="C:\Users\Administrator\Downloads\프론트엔드\part1\02\sub\shop.html">샵으로이동</a>
=> 내부파일을 불러올 때 상대경로
=> 외부파일을 불러올 때 절대경로
ul /ul ol /ol dl /dl
<ul></ul>
<ul> 태그는 순서가 없는 HTML 리스트(list)를 정의할 때 사용한다.
<ul> 요소에 속하는 각 아이템은 <li> 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현된다.
<h1> img 로 이미지 넣기 </h1>
<img src = "이미지경로" alt = "이미지설명문(대체텍스트)">
<h2> web용 이미지 형식 </h2>
<ul>
<li>*.gif - 256 가지 색상표현 가능. 투명배경. 움짤 지원.
단순한 이미지(로고나 아이콘 버튼 등) 적합
</li>
<li>*.jpg - 실사 느낌의 색상표현 가능.
</li>
<li>*.png - 위의 두가지 장점 결합
실사 느김의 색상 표현, 투명 배경 가능
</li>
</ul>
<h2> 1. 상대경로로 이미지 넣기 </h2>
<img src ="img/pexels-mohamed.jpg" alt = "photo">
<img src ="img/pexels-osman.jpg" alt = "photo2">
<img src ="../pexels-william-.jpg" alt ="photo3">
<h2> 2. 절대경로로 이미지 넣기 </h2>
HTML 링크를 여는 방식 지정하기
target = "_self/_blank/_top/_parent"
_self
기본 값. 현재 위치에서 링크를 여는 것
<b>_blank
새 탭 </b>에서 링크를 연다. (새 창으로 연다는 뜻)
<a href="https://www.naver.com" target="_blank">naver</a>
_top
(프레임구조) 브라우저가 나뉨없이 전체에서 링크를 연다.
_parent
한 단계 상위 창에 링크를 연다.
링크로 나타낼 수 있는 종류
URL
html
image or movie
<a href="img/pexels-mohamed.jpg">photo</a>
내용으로 띄운 것이 아니라 그림 링크로 나온다. 클릭 시 그림이 있는 페이지로 이동!
text