반응형
HTML
- Hyper Text Markup Language 웹 페이지를 보여주기 위해 알아야할 모든 걸을 브라우저에게 알려줌.
- 웹 페이지를 구조화 하는데 사용.
- Hyper Text는 사용자가 연상하는 순서에 따라 원하는 정보를 얻을 수 있는 시스템임.
(건너뛰어 읽거나 각주로 옮겨가거나 다른 텍스트를 참고하려고 읽기를 멈추거나 아니면 다른 텍스트가 더 좋을 듯 싶어 읽기를 포기하는 일 등)
- Markup Language는 웹페이지의 구조를 설명함
웹서버(web server)
- 브라우저로부터 요청을 기다리는 인터넷에 연결된 하나의 컴퓨터(웹 페이지, 그림, 음악, 영화 등등의 요청을 기다림)
- 각각의 서버는 HTML파일이나 그림, 음악, 다른 종류의 파일을 저장하고 서비스를 제공함.
- 브라우저는 HTML페이지나 그림과 같은 리소스를 요청 함.
- 서버가 해당 리소스들의 위치를 찾아내면 브라우저에게 응답을 보냄.
웹 브라우저(web browser)
- 웹서버에 해당 HTML 페이지를 요청하고 요청에 대한 응답을 받아 브라우저 화면에 페이지를 보여줌.
- 브라어저가 웹페이지를 보여주는 방법은 HTML에서 브라우저에게 웹페이지의 구조와 내용에 대해 알려줌.
태그(tag)
ex) <h1> 제목을 입력합니다. </h1>
<h1> : 시작태그
제목을 입력합니다. : 콘텐츠
</h1> : 종료 태그
시작태그 + 콘텐츠 + 종료태그 = 엘리먼트
시작태그와 종료 태그 = 매칭 태그
- 시작 태그는 속성을 가질수 있음
- 웹페이지는 항상 <html>과 <head>, <body>엘리먼트를 가져야함
- <head> 엘리먼트는 웹페이지에 대한 정보를 가지고 있음
- <body> 엘리먼트 안에 넣는 내용은 브라우저에서 볼수 있음
- CSS는 <style> 엘리먼트 내부에 위치하고 <style> 엘리먼트는 <head> 엘리먼트 내부에 위치함
상대경로
- 원점이 되는 파일(현 파일의 위치)과 상대적으로 같은 웹사이트에 있는 다른파일을 가르키는 링크
- 현재의 위치를 아는 것이 중요함
- 한단계 상위 폴더에 있는 파일에 링크를 걸때는 ..을 사용(부모 폴더를 의미)
- 경로의 각각의 부분은 / 문자를 사용 해서 분리
절대 경로
파일의 루트 폴더로부터의 경로
엘리먼트의 종류(element)
- 블록 엘리먼트 : 앞과뒤에 라인 브레이크를 가진것처럼 표시(스스로 자립할 수 있음)
- 인라인 엘리먼트 : 테스트의 흐름 내부에있는 라인 위에 표시(문단안에 흐름을 따라감)
- 빈 엘리먼트 : 아무런 콘텐츠도 가지고 있지 않은 엘리먼트(속성은 가질 수 있으나 콘텐츠와 종료 태그가 없음)
URL
- 웹콘텐츠를 포함해 웹에 있는 어떤 것의 위치를 가르키기위해 사용할 수있는 글로벌 주소
ex) http://www.naver.com/index.html
http
· 웹을 통해 하이퍼 텍스트 문서를 전송하기위해 합의된 프로토콜(하이퍼텍스트 전송 프로토콜)
· 간단한 요청과 응답 프로토콜
· http 요청 → /index.html파일을 찾아주세요
· http 응답 → 파일을 찾았습니다. 여기 있습니다. / 404에러 해당 페이지를 찾을수가 없어요.
www.naver.com
웹사이트 이름, 도메인에있는 하나의 웹사이트임(corporate.naver.com으로 웹사이트를 만들수 있음), 외부 사이트와의 연결
naver.com
도메인 이름, 사이트의 위치를 가르키지위해 사용되는 유일한 이름
www
도메인 내부에 있는 특정 서버의 이름
/index.html
루트폴더로 부터 자원들을 지칭하는 절대 경로, 같은 사이트의 다른 페이지와의 연결
ex) file:///Windows/Fonts/SDMiSaeng.ttf
file : 프로토콜의한종류
/Windows/Fonts/SDMiSaeng.ttf : Windows폴더 밑에 Fonts폴더 밑에 SDMiSaeng.ttf파일을 읽으라고 알려줌
<a> 태그
- 인라인 엘리먼트
- href 속성
hypertext reference(인터넷이나 서버에 있는 자원들)
브라우저에게 링크의 목적지를 알려줌
다른 웹페이지와의 연결을 위해 상대경로나 URL을 사용할 수 있음
ex1) <a href= "../index/index.html">
ex2) <a href= "../index/index.html#chai"> : index폴더의 index.html파일의 id가 chai 인 태그로 이동
- title 속성
링크로 연결할 페이지에대한 텍스트의 설명을 나타냄
ex) <a title="툴팁의 기능">
- target 속성
목표윈도우가 무엇인지 알려줌
_blank는 새 윈도우에서 링크를 열게함
ex) <a target="_blank">
<image> 태그
- 인라인 엘리먼트
- src 속성
이미지의 경로를 나타냄
a 태그의 href 속성과 마찬가지로 상대경로나 URL을 사용할 수 있음
ex) <image src= "http://www.naver.com/images/logo.gif" />
- alt 속성
이미지가 보이지 않을때 alt속성에 설정한 텍스트가 보임
ex) <image alt= "이미지입니다." />
- width, height속성
이미지의 width(너비)와 이미지의 height(높이)를 pixel단위로 제어함
ex) <image width= "48" height= "100" />
이미지(image)
- JPEG와 GIF
.png)
thumbnail
- 엄지손톱이란 뜻으로, 미리보는 축소 화상을 말함
문서 타입 정의(doctype, 신뢰성 있는 웹페이지, 표준HTML)
ex) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
!DOCTYPE : 문서타입임을 브라우저에게 알림
HTML : <html>이 이페이지의 첫번째 엘리먼트라는 의미
PUBLIC : HTML 표준이 공개적으로 사용 가능 함을 의미
"-//W3C//DTD HTML 4.01 Transitional//EN"
· -//W3C//DTD HTML 4.01 : HTML의 버전
· Transitional : 표준과 예전 HTML의 과도적임을 의미
"http://www.w3.org/TR/html4/loose.dtd" : 특정한 표준을 식별하는 파일을 가리킴
※ Transitional을 삭제하면 엄격한 HTML 표준을 지킨다는 것을 의미
※ "http://www.w3.org/TR/html4/loose.dtd"의 loose.dtd 를 strict.dtd 로 바꾸면 엄격한 HTML 표준을 지킨다는 것을 의미
W3C : 월드와이드 웹 컨소시엄, 표준 HTML이 무엇인지 정의하는 표준화 기구
브라우저의 HTML을 보여주기 위한 모드
- 쿼크 모드 : HTML의 예전버전의 규칙을 사용하는 모드
- 표준 모드 : W3C에서 정한 표준 HTML 모드
W3C의 유효성 검사기 사이트 : http://validator.w3.org
<meta> 태그(meta)
- 이 페이지에 관한 무엇인가를 브라우저에게 말해주는 태그
ex) <meta http-equiv= "Content-Type" content= "text/html; charset= "UTF-8 " >
http-equiv= "Content-Type" : 컨텐트 타입에 관한 설명임을 명시
content= "text/html; charset= "UTF-8 " : 컨텐트 타입정보를 명시, 인코딩 형식을 명시
반응형
'개발의 흔적 > Front' 카테고리의 다른 글
| 웹 접근성 점검 규칙(웹 접근성 오류 해결 방안) (1) | 2016.03.22 |
|---|---|
| CSS정리 (0) | 2016.02.22 |
| JQuery 선택자의 종류(HTML 태그명, ID명에 접근하는 방법) (0) | 2016.02.01 |
| input 박스 name과 id의 차이 (0) | 2016.02.01 |
| JavaScript, jstl Select박스 원하는 값 선택 (0) | 2016.02.01 |