[1]웹퍼블리싱이란? = 웹문서 만들기
: 컨텐츠를 html로 구조화 & css로 디자인입히기
ㄴ 웹 : 문서를 전달받고 요청하는 환경
✔ 웹문서만들기
기획 틀 설계(use case 시나리오 스케치) ▶ 웹디자인 = 비트맵 ▶ 브라우저용 (html+css)
[2] 웹과 인터넷의 차이
인터넷: 인터 네트워크 기술 중 하나. 다리가 만들어진 셈
프로토콜 = 일반적인 규약
- FTP: file transfer protocol 인터넷에서 파일을 전송하는 표준 규약
ㄴ tcp/ip: 네트워크 (인터넷) 상의 장치가 파일을 전송할때 쓰는 규약
- smtp: simple mail transfer protocol 인터넷에서 이메일을 보내기 위한 프로토콜
- telnet : 인터넷이나 로컬영역 네트워크 연결에 쓰이는 네트워크 프로토콜
- www(http): 문서를 전달하는 규약
[3] 웹의 탄생 배경
- 좀 더 쉬운 문서 공유의 필요성
| 🟩 문서의 구성요소 1. 콘텐츠 : 제목 / 목록/ 내용 등등 2. 구조(화) : 콘텐츠 그룹핑 3. 스타일 HT(HyperText) + (MarkUp) (+ 링크가 더해지면 웹문서) 🟩 content는 아래 5가지 중 하나에 해당한다 제목 / 목록 / 표 / 폼 / 문장 |
[4] Markup Language = 문서의 콘텐츠를 구분하기 위한 태그 집합
웹문서는 하이퍼텍스트'만'가지고 있는 문서가 아님. > 문서 편집과 콘텐츠 구분자의 필요성
: <b>예약어로 텍스트에 대한 표시를 함 </b>
: 감싸진 내용은 컨텐츠로 인식되지 않는다. 기호도 문서 작성시 자주 사용되지 않는 것으로 사용 <>
출력영역(body)
이미지 (img)
목록 (ul)
문장 (p)
하이퍼텍스트(a)
하이퍼텍스트를 구분하기 위한 마크업 도구 = 태그
- 방을 만드는 태그
- 컨텐트를 꾸미는 태그
[5] HyperText <a></a>
Html = hyper text markup language
✔ Hyper Text
: 문서편집용 마크업이 아닌, 페이지를 연결하는 마크업
* element 항상 참고하고 태그는 외우기!
HTML elements reference - HTML: HyperText Markup Language | MDN
This page lists all the HTML elements, which are created using tags.
developer.mozilla.org
[6] HTML 파일의 기본구조 = 규칙 (문법)
<html />
<head />
- <meta /> 웹문서의 속성을 담은 특수태그 charset =”UTF-8”
- <title /> 웹페이지 제목
<body />
- 제목: <h1 /> <hgroup /> ...
- 목록: <ul /> 순서가 있는 리스트, <ol /> 순서가 없는 리스트, <dl /> 용어와 설명을 리스트 형식으로 나타내는 태그
- 문장: <div> 구역나누기, 특별한 의미가 없는 파트 나누기 등 두루 사용, <p /> 문장
- 표: <table />
- 입력폼: <form />
<html>
<head>
<title> 안녕하세요 </title>
</head>
<body>
<div>
<p>
안녕하세요~ <b><a href="http://www.newlecture.com/index">뉴렉처</a>입니다.</b> <br />
<font color ="blue">뉴렉처 강의는</font> 단편적인 지식보다는 <br />
<u>용어의 올바른 이해</u>와 그것을 제대로 사용할 수 있도록 하는 <br />
<i>올바른 코딩 지침</i>을 알려주고 있습니다.
</p>
</div>
</body>
</html>
안녕하세요~ 뉴렉처입니다.
뉴렉처 강의는 단편적인 지식보다는
용어의 올바른 이해와 그것을 제대로 사용할 수 있도록 하는
올바른 코딩 지침을 알려주고 있습니다.
* 웹페이지에서 우측 버튼-페이지소스보기. 에서 위 html내용을 확인 가능
[7] DOC TYPE & W3C
✔ HTML DTD
: Document Type Definition의 종류
: document type 이 없다면 표준화된 방식을 따르지 않고 자체적인 방식 = Quirks방식
브라우저간, 화면에 랜더링하는 방식이 다름 ▶ 호환성 문제 발생, 브라우저 자체 태그들도 출현 ▶ 웹 표준기구 W3C 탄생
✔ W3C의 역할
- Draft (공통으로 사용할법한 제안서) > Working Draft > Candidate Recommendation (시범테스트) > Recommendation (권고안)
: strict.dtd - 태그를 엄격히 제한. 모든 브라우저가 사용할 수 있는 태그 사용 및 규칙도 엄밀히 적용
: loose.dtd
: framset.dtd - frameset이 될수록 특정 브라우저에 종속된 랜더링 방식
-------------------------------------------- html 4까지의 방식. html 5 부터는 <!DOCUTYPE html> or Quirks 방식 둘중 하나로 진행.
[8] 상대경로와 절대경로
/ 어디에 있든 루트로 감
./ 현재디렉토리 (생략가능)
../ 상위 디렉토리
상대경로: 현재 띄운 html페이지가 기준. 상위 폴더로 가서 다른 폴더로 내려가는 경로 자체를 설정 👉추후 수정 용이성을 위해 권장됨
절대경로 : 현재 페이지가 어디든, 홈(root)을 기준으로 내려가는 경로