3일. HTML(2) - HTML이란, 폴더 정리법

Q. 웹 퍼블리싱이란? (=웹 출판) 

- 기획자, 디자이너가 만든 것을 html, css, js 등을 활용하여 퍼블리싱하는 것

- 웹 문서 만들어서 사람들이 볼 수 있게끔 공개하는 것 (just '웹 문서 만들기')

 

Q. 웹 문서를 만들기 위한 기술 스펙

- html, css

 

Q. html이란?

- 마크업 : '범위'를 표시하는 것 

  마크업 언어 : 표시를 위한 기호를 정의하고, 사용하는 방법을 통일화한 명령어 집합 

- 뭘 마크업하는 언어냐. 

  HT(hyper text)를 마크업하는 언어. 

  HT만을 마크업하는건 아니고 문서에서 HP를 마크업할 수 있는 언어. (여기서 여기까지는 HP입니다~)

- sgml -> html -> ml -> 태그를 이용해서 문서의 구조를 표시 : 제목, 문장, 표, 목록 ... + 여기에 HT가 추가! 

(소그룹 스터디에서 추가)  sgml : 제일 표준이 되는 마크업 언어, xml : 간단하게 편집기로 편집이 hard  (jsp에서 사용)

 

Q. HT란 (Hyper Text) : 문서를 연결해주는 텍스트

- <태그> : 텍스트를 구분하는 약속

  마크업할 때 이 수단을 사용

- 마크업은 이거고... HT는 무엇? 

  Bernerse-Lee가 Hypertext Project 제안 for 좀 더 쉬운 문서 공유의 필요성

  ... 양자(=입자)... 연구할 때마다 문서가 많아짐. 그래서 제안하게 됨. 링크를 통해서 관련 문서를 쉽게 찾아볼 수 있도록 한 것 (문서에다가 하이퍼링크 포함) 세상이 뒤집어질 줄 알았으나 별로 반응이 없었음. 그러다가 93년 Mark Andreeseen 사람 등장. (mosaic, netscape라고 불리는거 만든 사람. 이 사람 이전에는 검은 콘솔창에다가 쳐야했는데, 이 사람 이후 컴맹도 컴퓨터 할 수 있게 됨. 파란색만 눌러도 컴퓨터 된다-는 개념 펼치신 분) 

 

그림 7

- a 태그 사용법

  a (닻을 내리다) / href(하이퍼 reference) / 여기 사이트에 

- 핵심 : HT 이용해서 문서를 쉽게 찾을 수 있게 만들어주었구나~~ 

 

* 웹 문서 : 브라우저 리더기

- 웹 서버 : 웹 문서 받는 입장 

 

* 문서의 3요소

- 컨텐츠 + 구조 + 스타일

- 컨텐츠를 구분해주며 쓰기 위해 mark up

 

* 파일 구조 준비하기

- 초기페이지 (웰컴파일), 공지목록, 공지 자세한 페이지, 로그인 페이지, 회원가입 동의 페이지, 회원가입 페이지 등

- 가이드, 규칙 없이 만들면 중구난방 문제가 된다.

* 파일명 정하기 (디렉토리명은 뭐가 다르지?)

비) 사람 얼굴이 디렉토리라면, 눈, 코, 입은 파일

     (나중에 파일이 많아지면 관리하기가 힘들어서, 디렉토리 명명해주어 관리)

 

(아래는 나하고 팀원들끼리 만든 거) 

- main

- notice

- notice_detail

- login

- agreetojoin

- join

 

- 파일은 서로 엮여주어야 한다.

- 이름은 무조건 소문자 사용

세번째가 보기 구조화되어 깔끔하당

폴더명을 '~의'로서 존재한다고 이해하면 쉽다. (대상, 주체) ex) 멤버의~ 로그인, 멤버의~회원가입

폴더 정리를 해주었찌

(1) 우선 ! + enter 눌러서 기본 구조 불러오고

(2) body에 제목 다르게, 그리고 index로 가게끔 <a>로 넣어준다

 

(소그룹 스터디에서 알게 된 이유 : 어느 페이지로 가든 (로그인 페이지든, 회원가입 페이지든) 다 홈으로 돌아가는 홈버튼이 있어서 각 페이지마다 넣어준 것으로 추정 ex - 네이버에서 어느 페이지 가든 네이버 로고 있어서 홈으로 갈 수 있게 해주는 것처럼)

위치를 내가 예쁘게 바꿔도 되겠지...? 로그인은 로그인 뒤에 HT를 넣고 싶다...ㅋㅋㅋ

(3) index에서는 3페이지에 가도록 <a> 넣어준다. 

 

'문서 보유하고 있는 서버'에 구현하게 되어있음.

-> 간단하게 웹 서버를 설치해보자. (비쥬얼스튜디오 블로같은 아이콘 눌러서 - live server 설치)

 

*웹 서버 개념

- 문서 갖고 있는 쪽: 서버 ----------- 요청하는 쪽 : 클라이언트

- 덕지 덕지 모아두는게 아니라, 디렉토리에 잘 모아둠 ~ 

  이 디렉토리를 웹 서버/클라이언트 입장에서 '홈 디렉토리'라고 함

- 웹을 통해서 문서를 제공해주는자. 

  <-> 웹 클라이언트 (브라우저 형태)

- ex) 링크를 클릭한다던지, 주소창에 입력을 한다던지 문서를 요청. 

       서버에서는 요청을 받고 "서버야, 너 홈 디렉토리에서 cern이라는 자료가 있는데 좀 줄래?" 

 

cf) live server 설치한건 

- 홈 디렉토리라고 생각하고, 요청한거 보내줘~ 하는거. 

 

* 경로 내용은 내일!