KTH Easing Markup DAY01

월드 와이드 웹World Wide Web

웹의 탄생과 비전으로 그려보는 미래

웹 표준Web Standard

웹 표준이란 무엇인가? 왜 필요한가?

웹 접근성Web Standard

웹 접근성에 대한 바른 이해/적용

의미 구조화Semantic Markup

의미있는 콘텐츠를 작성하는 방법

KTH.UXD ® Semantic Markup CourseUX/UI Design & Development Education

World Wide Web

WWW

World Wide Web

World Wide Web웹 세상을 연결하는 통로

social web network사람과 사람을 연결하는 매체

이미 우리에게 친숙한 웹을 세상에 소개한 이는 영국의 한 과학자였습니다.그의 이름은 팀 버너스-리 입니다.

이미 우리에게 친숙한 웹을 세상에 소개한 이는 영국의 한 과학자였습니다.그의 이름은 팀 버너스-리 입니다.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web


때는 1989년. 당시 유럽 분자 물리학 연구소에서 근무하던 버너스-리는 단순한 하이퍼텍스트 시스템을 제안합니다.

여기저기 흩어져 있는 물리학자의 자료를 연결하려는 생각에서 정보를 링크하는 기본 시스템을 개발했습니다.


모든 요소에 고유 주소를 할당할 수 있는 URL링크된 정보를 전송할 수 있는 규약 HTTP정보를 만드는 언어 HTML


버너스-리는 동료 연구자 마이크 샌들과 함께정보를 저장하고 서비스하는 서버와 브라우징을위한 어플리케이션을 만들고, 이 시스템을 월드와이드 웹이라고 불렀습니다.


다른 운영체제에서도 작동되는 클라이언트(브라우저)가 개발됨에 따라 시스템은 점차 대중화되었습니다. 1994년에 이르러서 웹은 탄생되었습니다.


갑자기 모든 사람들은 믿을 수 없을 만큼 간단하게 전자 문서를 교환할 수 있게 되었습니다. 이 모든 일은 갑자기 이루어진 것이죠.




웹의 믿기 어려운 성장은 일정 부분 그것의 단순함에서 기인합니다. 특히 브라우저로 읽어들일 수 있는 문서를 쉽게 제작할 수 있다는 점이 그렇습니다.HTML의 첫 버전은 간단한 기본 요소를 가지고 태어났습니다.h1-h6는 제목과 소제목, p는 단락, li는 목록을 표시할 수 있었습니다.이러한 간소한 표시 방법으로 웹은 대중화될 수 있었습니다.

웹의 믿기 어려운 성장은 일정 부분 그것의 단순함에서 기인합니다. 특히 브라우저로 읽어들일 수 있는 문서를 쉽게 제작할 수 있다는 점이 그렇습니다.HTML의 첫 버전은 간단한 기본 요소를 가지고 태어났습니다.h1-h6는 제목과 소제목, p는 단락, li는 목록을 표시할 수 있었습니다.이러한 간소한 표시 방법으로 웹은 대중화될 수 있었습니다.

복잡한 건 싫어요!어른들의 시선으로 보지 말아주세요.

월드 와이드 웹, 웹의 목표‘웹의 아버지’ 팀 버너스 리 경은 웹의 목표를 다음과 같이 이야기 합니다.

Goal

http://www.w3.org/Consortium/mission




Goal

Web for Everyone





Goal

Web for Everyone웹은 누구에게나 열려있습니다.





Goal


Web on Everything





Goal


Web on Everything웹은 어디에서나 접근할 수 있어야 합니다.





Goal



Knowledge Base





Goal



Knowledge Base그것은 사람들의 지식으로 구성됩니다.





Goal




Trust and Confidence





Goal




Trust and Confidence그것은 믿음과 신뢰를 바탕으로 이루어져야 합니다.





Goal




Trust and Confidence그것은 믿음과 신뢰를 바탕으로 이루어져야 합니다.

팀 버너스-리 경





History웹 기술의 흐름

History웹 기술의 흐름

1991HTML 초안

History도표로 알아보는 간단한 웹의 흐름

1991HTML 초안


1991HTML 초안


1995HTML 2

1997HTML 3.2

1998Web Standard Project

1991HTML 초안

1999HTML 4.0


2000XHTML 1.0

1995HTML 2

1997HTML 3.2


1991HTML 초안

1999HTML 4.0


2000XHTML 1.0

1995HTML 2

1997HTML 3.2

2004XHTML 2.0


1991HTML 초안

1999HTML 4.0

2010 - 2012HTML 5


2000XHTML 1.0

1995HTML 2

1997HTML 3.2

2004XHTML 2.0

2009XHTML 2.0 End

2004Web Applications 1.0


1991HTML 초안

1999HTML 4.0

2010 - 2012HTML 5


2000XHTML 1.0

1995HTML 2

1997HTML 3.2

2004XHTML 2.0

2009XHTML 2.0 End

2004Web Applications 1.0

1991HTML 초안

1999HTML 4.01

2010HTML 5

History도표로 알아보는 CSS 테크닉 변천사

2000XHTML 1.0

1991HTML 초안

1996CSS 1.0

1999HTML 4.01

2010HTML 5


2000XHTML 1.0

1991HTML 초안

1996CSS 1.0

1998CSS 2.0

1999HTML 4.01

2010HTML 5


2000XHTML 1.0

1991HTML 초안

1996CSS 1.0

1998CSS 2.0

1999HTML 4.01

2010HTML 5


2000XHTML 1.0

2004CSS 2.1Revisions

1991HTML 초안

1996CSS 1.0

1998CSS 2.0

2007CSS 2.1

1999HTML 4.01

2010HTML 5


2000XHTML 1.0


1991HTML 초안

1996CSS 1.0

1998CSS 2.0

2007CSS 2.1

1999HTML 4.01

2010HTML 5


2000XHTML 1.0


2007 - 2010

iPhone &Smart Device

1991HTML 초안

1996CSS 1.0

1998CSS 2.0

2007CSS 2.1

1999HTML 4.01

2010HTML 5


2011

CSS 3.0

2000XHTML 1.0


2007 - 2010

iPhone &Smart Device

1991HTML 초안

1996CSS 1

1998CSS 2

1999HTML 4.01

2010HTML 5


2000XHTML 1.0

1994Livescript

1996Javascript 1.0

1997ECMAscript 1.0

2008Javascript 1.8

1999ECMAscript 3.0

2006jQuery 1.0

2012jQuery 1.7

2007CSS 2.1


2011

CSS 3.0

1991HTML 초안

1996CSS 1

1998CSS 2

1999HTML 4.01

2010HTML 5


2000XHTML 1.0

1994Livescript

1996Javascript 1.0

1997ECMAscript 1.0

2008Javascript 1.8

1999ECMAscript 3.0

2006jQuery 1.0

2012jQuery 1.7

2007CSS 2.1


2011

CSS 3.0

1991HTML 초안

1996CSS 1

1998CSS 2

2007CSS 2.1

1999HTML 4.01

2010HTML 5

1993Mosaic

1998IE 5

2007IE 7

1994NN 1

1995IE

2002IE 6

2006FF 2

2004FF 1

2008FF 3

2009IE 8


2010IE 9

2010CSS 3

2000XHTML 1.0

2003Safari

1996Opera

2008Chrome

1994Livescript

1996Javascript 1.0

1997ECMAscript 1.0

2008Javascript 1.8

1999ECMAscript 3.0

1991Nexus

2001NN 6

1991HTML 초안

1996CSS 1

1998CSS 2

2007CSS 2.1

1999HTML 4.01

2010HTML 5

1993Mosaic

1998IE 5

2007IE 7

1994NN 1

1995IE

2002IE 6

2006FF 2

2004FF 1

2008FF 3

2009IE 8


2010IE 9

2010CSS 3

2000XHTML 1.0

2003Safari

1996Opera

2008Chrome

1994Livescript

1996Javascript 1.0

1997ECMAscript 1.0

2008Javascript 1.8

1999ECMAscript 3.0

1991Nexus

2001NN 6

괴/물/양/산오래된 이야기이지만 1997년 타이포그래피 전문가 데이빗 시겔은 웹 페이지 레이아웃을 만드는 새로운 기법에 대한 글을 썼고 그 이후 웹은 많이 변화하게 됩니다. 마치 영화 속 프랑켄슈타인처럼 HTML의 <table>태그와 공백gif 이미지를 결합한 괴물이 태어났습니다.

괴/물/양/산오래된 이야기이지만 1997년 타이포그래피 전문가 데이빗 시겔은 웹 페이지 레이아웃을 만드는 새로운 기법에 대한 글을 썼고 그 이후 웹은 많이 변화하게 됩니다. 마치 영화 속 프랑켄슈타인처럼 HTML의 <table>태그와 공백gif 이미지를 결합한 괴물이 태어났습니다.

http://www.amazon.com/Creating-Killer-Web-Sites-2nd/dp/1568304331/ref=ntt_at_ep_dpi_2%23reader_1568304331

http://www.amazon.com/Creating-Killer-Web-Sites-2nd/dp/1568304331/ref=ntt_at_ep_dpi_2%23reader_1568304331

괴/물/활/보그 이후 오랫동안 이 괴물같은 기법은 페이지 레이아웃을 만드는데 사용되었습니다. 당시 디자이너들은 전통적인 인쇄 매체에서 사용하던 레이아웃을 웹 페이지에 표현할 수 있다는 사실에 기뻐했습니다. 본래 테이블이 가지고 있는 의미는 무시된 채 세상에 활보하게 됩니다.

시/겔/절/규오래 지나지 않아 시겔은 자신이 괴물을 만들어 냈다는 사실을 깨닫고 절규하게 됩니다.

“웹은 망가졌고 그렇게 만든 건 바로 나다” the Web is ruined and I ruined it

어떤 사람들은 제가 웹을 망가뜨렸다고 말합니다. 사실 그 말은 틀리지 않았습니다.저는 초컬릿과 땅콩버터를 마구 섞어 다시는 분리하지 못하게 한 것과 같이 웹을 망가뜨렸습니다.

저는 구조를 표현과 함께 뒤섞어 버리는 죄악을 저질렀기 때문에 처형되어도 마땅하다고 생각합니다.

데이빗 시겔 www.xml.com/pub/a/w3j/sl/people.html

http://www.xml.com/pub/a/w3j/sl/people.html

http://www.xml.com/pub/a/w3j/sl/people.html

괴/물/확/산시겔이 만든 괴물은 더욱 강력해져 수백만의 웹 페이지 컨텐츠와 구조, 디자인이 뒤섞여 버렸습니다.덧붙여 웹디자이너들에게 보이는 모양대로 컨텐츠와 구조를 만들어야 한다는 잘못된 생각을 하게 만들었습니다.이러한 개념은 웹디자이너들의 사고에 많은 영향을 끼쳐서 결과적으로 웹은 유연하지 못하게 되었고 의미에 따른 구조는 사라지고 접근성이 떨어지게 되었습니다.

<table> 태그를 사용해서 레이아웃을 만들던 과거에는 보이는 모양에 따라 컨텐츠를 배치해야 했기 때문에 컨텐츠와 구조

모두 분리되지 못했습니다.

하지만 현대적인 웹 디자인 제작에서는

과거의 잘못된 방법을 답습하고 있지 않습니다.

비효율적인 구조와 표현을 한 몸으로 해서 제작하지

않으며, 목적에 부합하는 의미적인 구조와 다양한

스타일 제작을 위한 효울적인 표현, 동작 관리를 통해

효과적인 디자인 구현을 가능케합니다.

구조

표현

동작

월드 와이드 웹의 원칙

Web for AllWeb on Everything

월드 와이드 웹의 비전

Web for Rich InteractionWeb of Data and ServicesWeb of Trust

Web Standard

DVD의�� 뒤를�� 이을�� 차세대�� 광디스크�� 표준은�� 누가?!

VS

VS

VS

VS서로간의�� 구현�� 기술이�� 다르다보니...디스크�� 드라이브�� 역시�� 양쪽�� 진영으로�� 나뉘고...

업계�� 표준이�� 없다보니....두�� 포멧�� 모두를�� 지원해야�� 하는�� 상황�� 초래...

DVD의�� 뒤를�� 이을�� 차세대�� 광디스크�� 표준은�� 도시바의�� HD-DVD�� 포기로�� 소니의�� Blue-Lay로�� 확정

두�� 포멧�� 모두를�� 지원하는�� 제품을�� 출시한�� 회사는인적,�� 물적�� 자원�� 낭비가�� 이루말할�� 수�� 없다...�� OTL

오! 샤우트!

‘�� ’다시...�� 웹�� 환경으로�� 돌아와�� 웹�� 표준을�� 생각해보면...

‘�� ’인터넷�� 익스플로러는�� 그동안

W3C�� 웹�� 표준�� 권고안을�� 지키지�� 않았다.

훗! 그 까이꺼 뭐...무시~ 무시~

‘�� ’왜나하면!

MS�� IE의�� 시장�� 점유율이�� 상당했으니까.

훗!

83.4%

내가 최고! 누가 뎀벼?

‘�� ’그�� 사이...

다른�� 브라우저�� 벤더들은�� 표준을�� 준수했다.

표준장착 완료!

‘�� ’결국!

MS�� IE의�� 시장�� 점유율이�� 위험할�� 정도로�� 떨어지는�� 결과를�� 초래.

헉!

32.2%

완전히새 됐어~

이봐~ ̂ ;̂;이제 우리도 표준준수한다고다시 우리에게 돌아와주면 안되겠니?...

http://ie.microsoft.com/testdrive/























































‘�� ’고집부리던�� MS�� IE가�� 비로소�� 적나라한�� 시장의�� 결과를�� 보고�� 이제야�� 표준을��

잘�� 준수하려나�� 봅니다.

휴.. 큰 코 다쳤네...

‘�� ’차세대�� 광디스크�� 사례로�� 알아본비�� 표준이�� 존립할�� 경우의�� 제작자의��

어려움을�� 엿봤습니다.��

‘�� ’핸드폰의�� 충전기,�� 표준�� 전압�� 규격�� 사례�� 등우리�� 삶�� 속에서도�� 표준이�� 없을�� 경우많은�� 불편이�� 야기될�� 수�� 있다는�� 사실.��

‘�� ’핸드폰의�� 충전기,�� 표준�� 전압�� 규격�� 사례�� 등우리�� 삶�� 속에서도�� 표준이�� 없을�� 경우많은�� 불편이�� 야기될�� 수�� 있다는�� 사실.��

‘�� ’규격이�� 하나로�� 통일되면�� 정말�� 편할텐데...

사람들의�� 삶이�� 한결�� 좋아질텐데�� 말이죠.

‘�� ’웹�� 표준이란?

어/디/서/나Mobile�� Phone�� /�� Text�� Browser�� PDA�� /�� PMP�� /�� IPTV&Game






누/구/나남녀노소�� 그리고...

몸이�� 불편하신�� 분들�� 또한

누/구/나남녀노소�� 그리고...

몸이�� 불편하신�� 분들�� 또한

제약없이�� 접근할�� 수�� 있는�� 환경을�� 만들기�� 위한

약속입니다

‘�� ’웹�� 표준�� -�� 약속(웹을�� 만드는�� 사람들간의...)

‘�� ’웹�� 표준�� -�� 약속(웹을�� 만드는�� 사람들간의...)

웹 브라우저 제작자, 웹 기획자, 웹 디자이너, 웹 퍼블리셔, 웹 개발자

‘�� ’[웹�� 표준]은�� 브라우저�� 제작사가�� 제품(브라우저)을�� 만들고�� 웹�� 제작자가�� 웹�� 사이트를�� 제작할�� 때,�� 표준�� 사양(Spec.)에

따라�� 규격을�� 정하고,�� 통일하는�� 것을�� 말합니다.

표준을 준수하자!

월드 와이드 웹 표준

Recommend specificationNot compulsion

But Depending Rule!

Web Accessibility

웹�� 접근성�� (Web�� Accessibility)


W3C�� WAI(2006a)&�� Thatcher,et.al.(2006)장애를�� 가진�� 사람들도�� 웹을�� 이용할�� 수�� 있도록�� 보장하는�� 것으로,�� 장애를�� 가진�� 사람들이�� 웹�� 콘텐츠를�� 인지하고(Perceivable),��

운영하고(Operable),�� 이해하고(Understandable),�� 기술에�� 상관없이�� 이용할�� 수�� 있도록�� 견고(Robust)하게�� 웹�� 콘텐츠를�� 만드는�� 것.




Wikipedia(2006)표준�� 브라우저�� 뿐만�� 아니라�� 다양한�� 사용자�� 에이전트(User�� Agent)�� 를�� 사용하는�� 사람들이�� 웹�� 페이지에�� 접근하기�� 쉽게�� 만드는�� 것으로,��

이를�� 통해�� 장애인들도�� 웹을�� 사용할�� 수�� 있도록�� 보장하는�� 것�� ※�� 장애인들이�� 사용하는�� 보조기술은�� 사용자�� 에이전트에�� 포함됨.




Wikipedia(2006)표준�� 브라우저�� 뿐만�� 아니라�� 다양한�� 사용자�� 에이전트(User�� Agent)�� 를�� 사용하는�� 사람들이�� 웹�� 페이지에�� 접근하기�� 쉽게�� 만드는�� 것으로,��

이를�� 통해�� 장애인들도�� 웹을�� 사용할�� 수�� 있도록�� 보장하는�� 것�� ※�� 장애인들이�� 사용하는�� 보조기술은�� 사용자�� 에이전트에�� 포함됨.

Microsoft(2002)접근성이란�� 접근을�� 가능하게�� 만드는�� 것으로,�� 모든�� 사용자들이�� 제품과�� 서비스를�� 사용할�� 수�� 있도록�� 만드는�� 것.

부산�� 점자�� 도서관�� 웹�� 접근성�� 실태

어플리케이션�� 접근성

keynote:/Users/yamoo9/Desktop/%E1%84%8B%E1%85%B4%E1%84%89%E1%85%B5%E1%86%A8%E1%84%80%E1%85%A2%E1%84%89%E1%85%A5%E1%86%AB%20A/%E1%84%8B%E1%85%B4%E1%84%89%E1%85%B5%E1%86%A8%E1%84%80%E1%85%A2%E1%84%89%E1%85%A5%E1%86%ABA%20-%2040%20%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%8C%E1%85%A5%E1%86%B8%E1%84%80%E1%85%B3%E1%86%AB%E1%84%89%E1%85%A5%E1%86%BC%20%E1%84%90%E1%85%A6%E1%84%8F%E1%85%B3%E1%84%82%E1%85%B5%E1%86%A8.key






월드 와이드 웹 접근성

Not! Only World Wide WebThinking Everyone for Application

Markup

document

조금 복잡했다면 좀 더 쉽게 정리해보도록 할까요?웹 문서 제작시 가장 우선적으로 고려해야 할 것은 문서에 담을 내용을준비하고 각 영역을 브랜드, 주요/보조 내용, 사이트 정보 등 구분하는 것입니다.MARKUP

브랜드 주요내용 보조내용사이트정보

document

document

MARKUP

브랜드

주요내용사이트정보

보조내용

document

영역 A

영역 B

영역 C

영역 D

각 영역에 대한 구분이 나눠지면, 우선적으로 사용자에게 전달되어야 할 영역과보조 영역을 구분해내어 우선권 별로 순서를 부여할 수 있는 능력을 키워야 합니다.MARKUP

브랜드


보조내용

document

영역 A

영역 B

영역 C

영역 D

각 영역에 대한 구분이 나눠지면, 우선적으로 사용자에게 전달되어야 할 영역과보조 영역을 구분해내어 우선권 별로 순서를 부여할 수 있는 능력을 키워야 합니다.MARKUP

브랜드


1

24

보조내용

3

document

영역 A

영역 B

영역 C

영역 D

MARKUP

브랜드

주요내용

보조내용

사이트정보

1

2

3

4

document

영역 A

영역 B

영역 C

영역 D

각 영역에 대한 우선권을 부여했다면, 다음에 진행해야 할 일은 각 내용을 의미에 맞게구조화하여 우선권이 높은 영역부터 문서의 상단에 위치하도록 작성하여야 합니다.그래야 사용자에게 우선적으로 보여줘야 할 내용이 전달될 수 있는 가능성이 높습니다.MARKUP

브랜드

주요내용

보조내용

사이트정보

1

2

3

4

document

영역 A

영역 B

영역 C

영역 D

MARKUP

브랜드

주요내용

보조내용

사이트정보

1

2

3

4

document

영역 A

영역 B

영역 C

영역 D

위치에 대한 우선 적용이 정해지면 각 해당되는 영역을 구조화하여야 합니다.이는 문서를 해독하여 사용자에게 정보를 제공하는 역할을 수행하는 브라우저가해석할 수 있도록 문서를 마크업(Markup)한다는 의미입니다. 때문에 의미 전달의정확성을 염두에 두고 심혈을 기울여 작성하여야 합니다.

MARKUP

브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

document

영역 A

영역 B

영역 C

영역 D


MARKUP

브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

document

영역 A

영역 B

영역 C

영역 D


MARKUP

브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용

document

영역 A

영역 B

영역 C

영역 D


MARKUP

브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용

<address> 사이트정보 </address>

document

영역 A

영역 B

영역 C

영역 D

MARKUP

브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용


document

영역 A

영역 B

영역 C

영역 D

문서의 해당영역에 적합한 구조를 구현하였다면,각 영역의 덩어리를 그룹화(Grouping)하여 영역을 묶어주는 것이 필요합니다.이는 차후 문서의 레이아웃을 잡고, 표현 디자인을 입히는데 중요한 역할을 합니다.MARKUP

브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용


<div> </div>

document

영역 A

영역 B

영역 C

영역 D


브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용


<div> </div>

<div> </div>

document

영역 A

영역 B

영역 C

영역 D


브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용


<div> </div>

<div> </div>

<div> </div>

document

영역 A

영역 B

영역 C

영역 D


브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용


<div> </div>

<div> </div>

<div> </div>

<div>

</div>

document

영역 A

영역 B

영역 C

영역 D

영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까? MARKUP

브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용


<div> </div>

<div> </div>

<div> </div>

<div>

</div>

document

영역 A

영역 B

영역 C

영역 D


브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용


<div> </div>

<div> </div>

<div> </div>

<div>

</div>

id=”header”

document

영역 A

영역 B

영역 C

영역 D


브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용


<div> </div>

<div> </div>

<div> </div>

<div>

</div>

id=”header”

id=”main”

document

영역 A

영역 B

영역 C

영역 D


브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용


<div> </div>

<div> </div>

<div> </div>

<div>

</div>

id=”header”

id=”main”

id=”aside”

document

영역 A

영역 B

영역 C

영역 D


브랜드

주요내용

보조내용

사이트정보

1

2

3

4

<h1> </h1>브랜드

<h2> </h2>제목

<p> </p>내용

<h4> </h4>제목

<p> </p>내용


<div> </div>

<div> </div>

<div> </div>

<div>

</div>

id=”header”

id=”main”

id=”aside”

id=”footer”

header

main

aside

footer

보이는데로 영역의 이름을 지으면 제한적인 레이아웃 밖에구상할 수 없습니다. 아래 그래프를 통해 확인해 볼까요?PRESENTATION

header

main

aside

footer

PRESENTATION

header

mainaside

footer

PRESENTATION

header

main aside

footer

PRESENTATION

header

main

footer

aside

PRESENTATION

main

footer

aside

header

월드 와이드 웹 마크업

Not! ExpressionThis is Meaning Work!

Investor Relations

KTH Easing Markup DAY01