12. Hyper Text Markup Language
1995년
브라우저 전쟁 시대(넷스
케이프 vs MS)
브라우저 회사들이 선두를
지키기 위해 자신들만의 독
점적인 확장자 추가
웹 개발자들은 종종 분리된
웹 페이지를 작성해야 했음
1989~1991년
단지 하이퍼텍스트만사용
표현에는 관심이 없음.
HTML1,2
HTML3
1998년
브라우저 전쟁이 끝나고
W3C가 출현하여 표준제시
구조를 위한 HTML과
표현을 위한 CSS의 분리
HTML4
2000년
대중성과 브라우저에 친숙
한 것 HTML
확장성과 견고함의 XML
한 마디로 확장 가능한
HTML
1999년
가장 최근의 HTML 버전
HTML4.01
XHTML
2009년
벡터그래픽 구현
모든디바이스 고려
시멘틱한 태그
HTML5
18. 설명이나 역할을 정해주기 위해서
준비되어 있는 속성들을 사용할 수 있습니다
열기태그
컨텐츠
닫기태그
h1 class=”art”제목입니다/h1
이름
속성
값
art라는 이름을 가진 반을 만들기 위해서 준비되어 있는
class라는 속성을 사용하고 자신이 원하는 art라는 이름을
지어 주었습니다. 이렇듯 값은 준비된 값만을 쓸수 있는
속성과 원하는 데로 넣을 수 있는 속성이 있습니다.
h2 class=”art”두번째 제목입니다./h2
img src=”images/foo.jpg” alt=”샘플이미지” /
foo.jpg파일을 img에 불러오기 위해서 src(source)속
성을 이용하고 경로와 파일명을 값에 넣어 주었습니다.
alt속성을 이용해서 불러온 이미지가 어떤 이미지인지
컴퓨터에 설명해 주고 있습니다.
속성들은
class, id, title, alt
src, href, type 등이
준비되어
있습니다
20. 모든 코드는 소문자로 작성합니다
h1 class=”art”제목입니다/h1
이름
속성
값
XHTML은 대소문자를 구분합니다. 대소문자를 구분하지 않는
HTML4나 HTML5를 사용한다고 해도 좋은 코드를 위해서 소문
자만을 스스로의 원칙으로 하는 것이 좋습니다.
21. HTML의 태그들은 부모-자식의
관계를 갖습니다
!
html
head
meta
meta charset=utf-8 /
head
titlehello world!/title
title
/head
body
html
!
phello world!/p 이런 관계모델을
body p
!
DOM (document
/body
object model)
/html
이라고 합니다
22. head안에는 페이지를 처리하기 위해
필요한 정보가 있습니다.
!doctype
html
head
meta charset=utf-8 /
titlehello world!/title
/head
body
!
charset=utf-8
phello world!/p
은 여러나라 언어를
!
사용할 수 있게 해줍니다.
/body
metatitle
/html
이외의 태그와 속성은
다음에 좀 더 자세히
다룰것입니다.
23. 브라우저의 화면영역(viewport)에 보이는
부분은 body입니다.
!doctype
html
head
meta charset=utf-8 /
titlehello world!/title
/head
body
!
phello world!/p
!
/body
/html
24. 또한 태그는 중첩해서 사용할 수 있으며
이에따라 구조가 만들어집니다.
div class=”naver”
h2네이버서비스/h2
div class=”navercast”
h3네이버 캐스트/h3
p우리가 일상생활에서 환경을 위해
할 수 있는 가장 손쉽고 간편한 방법은
무엇이 있을까? 아마도 전력을 아껴 쓰는
일일 것이다. /p
/div
div class=”opencast”
h3오픈 캐스트/h3
p스티커의 디자인이 참 독특하다. 전
이 생산되는 과정을 보여주는 스티커,
작성자의 효율과
전력 소비로 인한 환경 오염을 노골적으로
협업을 위해서
보여주는 스티커 등 다양하다. /p
/div
들여쓰기(tab키)를
/div
통해서 구조를 시각적
으로 구분해 줍니다
네이버서비스
네이버서비스
우리가 일상생활에서 환경을 위해 할 수 있는 가장 손쉽고 간편한 방
전력을 아껴 쓰는 일일 것이다.
오픈 캐스트
스티커의 디자인이 참 독특하다. 전력이 생산되는 과정을 보여주는
오염을 노골적으로 보여주는 스티커 등 다양하다.