상대경로와 절대경로 차이 /크롬 확장프로그램/ HTML 문서구조

HyperText : 다른 페이지로 이동

404 에러 : 경로확인해볼것

 

---

 

상대경로와 절대경로

상대경로

선택한 파일에 대한 상대적인 루트를 지정하는 방법

 <a href="../index.html">홈</a>

 

 

 

Signup.html에서 Front-web에있는 index.html을 연결하려면 <a href="../index.html">홈</a>와 같이 ../로 지정하여 한계층 위 폴더를 지정해야한다.

/ 하위폴더 지정

./현재폴더 지정(동일폴더)

../한 계층 위 폴더 지정

 

절대경로

각 폴더의 지정된 이름을 나열

어떠한 웹페이지나 파일이 가지고있는 고유한 경로, 절대적인 위치

<a href="member/signup.html">가입페이지</a>

위치가 변경될 경우 다 경로를 수정해야한다.

 

 

Q. list.html에서 signup.html을 링크하고싶다면 어떤경로로 설정해야하는가?

 

 

 

 

../../member/signup.html

로 지정해야한다. Root안에 member 폴더와 customer폴더가있다.

list.html은 customer ->notice folder안에 있으므로 두계층위로 올라가야한다.

 

 

---

 

 

경로지정 실습

Front-web 폴더안에 member폴더, notice폴더가 있다.

Front-web폴더에는 index.html 홈화면이있고, member 폴더에는 agree.html, login.html, signup.html 이,

notice폴더에는 detail.html, list.html이있다.

 

 

login페이지의 Home링크 <a href = "index.html">Home</a>으로 입력할 경우 member폴더의 index.html로 자동인식하게된다.

클릭시 Front-web폴더의 index.html으로 넘어가지않고 오류가 발생한다.

 

 

 

 index.html은 member폴더 밖에 있으므로 상위표시 '../'를 넣어준다. 

 

 

 

상대경로입력 후 적용된 모습확인가능.

 

index.html 에서 '로그인'클릭 후 이동한 모습

 

 

 

login.html에서 공지사항목록 클릭 후 이동한 모습

 

 

 

 

 

---

크롬 확장 프로그램 활용

크롬안에서 실행될 수있는 여러 확장 프로그램이있다.

Chrome 웹스토어(https://chrome.google.com/webstore)에서 Web Developer 다운로드.

 

 

 

 

다운로드 후 크롬브라우저 상단에서 확인가능

 

 

 

 

톱니바퀴를 누르면 여러메뉴가 나온다.

 

 

 

 

---

 

 

콘텐츠 블록의 종류

 

 

 

body에는 제목,목록,문장,표,입력폼이 있다.

 

 

HTML 문서의 기본구조

 

 

 

 

제목 태그

 

 

 

목록 태그

 

 

 

HTML 문서의 아웃라인

 

 

 

 

 

 

---

 

크롬 확장 프로그램 활용

HTML5 Outliner

각 페이지별 구성형태 파악용 ( 웹 정책 홈페이지 구조 및 검색 반영 시 유용 )