세종대학교 웹프로그래밍 강의를 듣고 요약한 글
- Internet? network of computer networks worldwide
sharing data + communication을 위해서 연결되어있다.
internet 동작원리
user > Router > ISP(Internet service Providers) >>backbone connection>> 연결
- backbone connection : 다양한 네트워크를 상호연결하는 컴퓨터 네트워크의 일부
IP 주소
모든기기는 IP주소를 가지고 있다.
IP 주소는 static(permanent) 할 수도 있고 dynamic(temporary)할 수도 있다.
DNS(DomainName System)
database를 이용하여 IP주소와 computer name을 map해준다.
DNS 서버에 subset of databse가 저장되어있다.
- 만약에 한 DNS에서 연결할 IP주소 못참으면 다음으로 넘어감
- Web주소 -> DNS -> IP주소 찾아서 연결
Protocol Stack
Application -> http, email, FTP 등등
TCP(Transmission Control Protocol) -> packet+ port number
IP(Internet Protocol) -> packet + IP주소
Hardware -> binary packet data
만약에 computer A가 B에게 전할 message가 길면, manageble한 chunk단위로 쪼개서 보낸다. 우리는 이를 packet이라고 부르며 port number와 IP주소가 포함되어있다.
- ISP의 router : 어디로 보내질지 검사
Application
- HTTP
stateless text based protocol
application level protocol - FTP
connection based protocol
text or binary data
login required
- default port
- HTTP : 80
- Telnet : 23
- SMTP : 25
- FTP : 20/21
Web
web site
= webpage의 합
- webpage? viewed in web browser.
web browser
- WWW에서 정보에 접근하기 위한 software application
- EX) Chrome,Firefox,Safari -> Developer Tool: Testing and Debugging the web documents.
web Application Architecture
Accessing static web pages
"static" 변하지 않는다!
- webpage와 다른 object(image)은 파일 형태로 web server에 저장
- HTTP요청으로 응답주고받음
Browser - server communication
1.URL이 domain name을 포함할 경우, broweser은 DNS에 연결하고 응답하는 IP주소를 가져옴
2.web browser는 web server와 연결하고 protocol stack을 통과하여 HTTP 요청을 보낸다.
3. web server는 요청을 받고 우너하는 page를 확인한다. 그 page가 존재하면, web server는 그것을 다시 보내준다. 못찾으면 404 error 메시지를 보낸다.
4. web browser가 page를 받으면 그 connection은 closed된다.
5. 그 후에, 브라우저가 웹 페이지 구문을 분석하고 페이지를 완성시킬 때 필요한 다른 요소들을 찾는다.(^ 다른 요소: 이미지,applet)
HTML기본
- HTML? Hyper Text Markup Language
standard markup language for creating web pages.
DOM : Document Object Model
html -render-> 웹사이트
- Client-side Web Programming
HTML + CSS +JS
HTML: 페이지 구조
CSS: 보이는 요소 조절
JS : 동작 추가
HTML최소한의 구조
- 인지 표시 -> 다른 tag나오기 전에 맨 위에!-> 대소문자 상관 x
- head는 document의 정보를 담고 있음
- title명시는 required됨
-> 검색엔진 의존. screen reader에서 가장 먼저 듣게 되는 것
-> avoid vague title - body는 browser에 보여지는 content들을 포함한다.
HTML Tags
-> Tree
- 대소문자 주의해야함
- 공백 무시하고 이상한 attribute 무시
- 모든 tag는 attribute를 갖고 있다.
- element에 추가적인 정보 제공: attribute->시작tag에서 정의됨
- 사용예시: <p style="color:red"> contents </p>semantic하게 짜야하는 이유
-
Better accessibility
-
Easier to read the code
-
Helps CSS work correctly
-
Search Engines & assistive tools like it
headings
- h1~h6까지 존재
- 접근성 용이, 검색엔진에 도움
blockquote
- 4줄 이상이면 쓰는게 좋음
- paragraphs,heading,list 랑 같이쓰는걸 추천
preformatted text
- browsers는 공백을 무시하기 때문에 이 태그를 써서 형식을 유지함(pre태그)
horizontal rules
- hr element 는 empty element다.
- block-level elements
Addresses
- mailing addressese같은거에는 잘 쓰이지않는다. Contributed by ~~이런거에 자주 쓰임
Lists
- unordered lists
<ul> <li>@</li> </ul>
list-style-type:disc(or circle or square or none) - ordered lists
<ol> <li>@</li> </ol>
- definition lists
<dl> <dt>제목</dt><dd>내용</dd> </dl> - block-level elements(new line에서 시작)
그 외
- Abbreviations and acronyms
준말 표시(검색엔진, 스크린리더,등등에 유용한 정보제공)
<acronym title="American Type Founders"> ATF </acronym>
<abbr title="Points">pts.</abbr> - Citation
인용문 -> italic text
Generic elements
- div
generic block-level element - span
generic inline element
Inline vs block-level
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>
<div style="border: 1px solid black">Hello World</div>
<p>The DIV element is a block element, and will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>
Element Identifiers
#id vs .class
id
unique id for an HTML element.
class
grouping similar elements
다른 element랑 class share가능
special characters
- "&" , ";"
HTML Validatioin
Links- Hyperlinks
- HTML Links are hyperlinks
<a href="UR">llink</a>
1. Absolute URL
<a href="http://www.asdasd.com">your domain</a>
2. Relative URL
<a href="about.html">your domain</a>your own site 에서 왔다갔다하면 relative URL쓴다.
id->#
