4일. HTML(3) - 상대경로, 절대경로, 컨텐츠 블록 태그 5개(제목, 목록, 문장, 표, 입력폼)

404 error : 사용자가 요청할 수 없는 곳에다가 요청을 했구나 / +a...

 

* 홈 -> 로그인 -> 다시 홈 갈 수 있도록 해주기

index.html에서

- login은 member안에 있기에 member/login.html이라고 해주기

login.html에서

- ../ (상위폴더에서) index를 찾아줘. 

  ../index.html 라고 해주기. 

 

// 재밌네~ 왔다갔다 할 수 있구나.

 

* 내가 있는 경로로부터 다른 경로 찾아가기 (상대적으로) 

- home directory에 있는 파일들이, 

  member/login.html 

- member/? 가 상위에 간다고 하면? 

 

* 로그인 페이지에서, 공지사항 목록 페이지를 가려면

그림 5

../ 는 현재 폴더로부터 위로 올라가라! 

- 상대경로

- 내가 어딨냐에 따라서 위치를 따라가는

 

*절대경로 (내가 있는 위치가 아니라, root로부터 경로를 쓰는것)

- 그림 6

/ -> 절대경로!!!

- 슬래시로 시작하는거

 

- 둘 다 아무렇게 쓰는 건 안 될 것 같다.  

  -> 여기 수업에서는 상대경로만 쓰기록 약속

- 여기 수업에서뿐만 아니라, 유지관리를 위해 상대 경로로 쓰는게 좋다. 

 

앞에 ./는 생략 가능 (현재 위치!)

설명 쓰기

가입동의 페이지에서, 가입페이지를 가려고 <a> 만들어둔다고 할 때

같은 member내에 signup.html이 있으니까 그냥 현재 (./)에서 시작해서 signup.html을 적어주면 되는데, 앞에 ./는 생략 가능

 

난 customer하고 member를 같은 단으로 봐서 ../를 한 번만 해줬는데, 한 번 더 올라가줘야했음!

 

---

/ 절대 경로

./ 현재 위치

../ 위로

---

그림 2

구분 필요 (마크업하기 위한 언어=태그 활용해서)

- html은 태그가 고정되어 있다. 

 

 

 

스타일을 걷어내면 형식밖에 없다.

- web developer 설치해두면 모든 페이지에서 스타일 빼서 볼 수 있다.

- 구글에서 'web store' 검색해서 web developer 다운

web developer의 기능

 

1. 컨텐츠 구분해주는 태그

어떤 내용도 크게는 이 5개 안에 들어간다. "외우세요"

제목은 6개 레벨로 

- <h1>은 문서 내에서 1개 존재 (보통)

- 숫자가 커질수록 크기 작아짐 

그림 6

 

순서 없는거 / 있는거 / 정의를 위한 <dl>

그림 7

요즘은 <menu>가 나오기도. 

 

form 등은 "사용해보면서 느끼도록 할게요~" 

 

내려쓰기. 띄어쓰기는 브라우저에게 아~~무 의미없다. 

<tag>로 명령어를 써줘야만 한다. 

이 때, 구분해주기 위해 위의 5개가 필요한 것 ! (제목, 목록, 문장, 표, 입력폼) 

 

저 '고객센터' 부분은 어떻게 구분한담...?!

고객센터 부분은 어떻게 구분하지..! 를 되게 어렵게 생각했는데, 그냥 ul로 구분하면 되는거였따.... 

 

실습) 뉴렉처 사이트 ctrl + all 해서 html에 넣은 후에 -> 구분해보기~! 

- "단순하게 생각하셔야 해요" 

-  ul>li*3 이것도 다시 활용하고~ 

- 이미지는 선택이 안 됨 (아래 이미지는 선택이 되었는데....)

  위에 이미지는 css로 만든거기 때문에 선택이 안되었던 것 (아래 이미지는 html로 만든거고)

- 목록의 제목! 구분해줘야 한다. 

 

*문서의 아웃라인 잡기

- 문서의 컨텐츠가 잘 만들어졌는지 알아보기 위해서는 "제목을 보라"

- 구분한 녀석에 대한 '제목'이 항상 있어야 한다. (실제로 화면에 보이는건 제목이 없더라도)

  -> 제목 뽑기가 어렵다. 

  web store에서 html5 outlier 설치. 

 

 

// 문서에서의 큰 틀을 볼 필요가 있다. 이건 내일

   오늘까지 한 내용은 outline이 다 깨진 상태