1. 월드 와이드 웹
World Wide Web
웹의 탄생과 비전으로 그려보는 미래
웹 표준
Web Standard
웹 표준이란 무엇인가? 왜 필요한가?
웹 접근성
Web Standard
웹 접근성에 대한 바른 이해/적용
의미 구조화
Semantic Markup
의미있는 콘텐츠를 작성하는 방법
KTH.UXD ® Semantic Markup Course
UX/UI Design & Development Education

2. World Wide Web

4. WWW

5. WorldWideWeb

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

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

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

11. 이미 우리에게 친숙한 웹을 세상에 소개한
이는 영국의 한 과학자였습니다.
그의 이름은 팀 버너스-리 입니다.
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web

12. Tim Berners-Lee,
W3C Director and inventor of the World Wide Web
때는 1989년. 당시 유럽 분자 물리학 연구소
에서 근무하던 버너스-리는 단순한 하이퍼
텍스트 시스템을 제안합니다.

13. 여기저기 흩어져 있는 물리학자의 자료를
연결하려는 생각에서 정보를 링크하는 기본
시스템을 개발했습니다.
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web

14. 모든 요소에 고유 주소를 할당할 수 있는 URL
링크된 정보를 전송할 수 있는 규약 HTTP
정보를 만드는 언어 HTML
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web

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

16. 다른 운영체제에서도 작동되는 클라이언트(브라
우저)가 개발됨에 따라 시스템은 점차 대중화되었
습니다. 1994년에 이르러서 웹은 탄생되었습니다.
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web

17. 갑자기 모든 사람들은 믿을 수 없을 만큼 간단
하게 전자 문서를 교환할 수 있게 되었습니다.
이 모든 일은 갑자기 이루어진 것이죠.
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web

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

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

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

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

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

25. Web for Everyone

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

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

28. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.

29. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base

30. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.

31. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Trust and Confidence

32. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Trust and Confidence
그것은 믿음과 신뢰를 바탕으로 이루어져야 합니다.

33. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Trust and Confidence
그것은 믿음과 신뢰를 바탕으로 이루어져야 합니다.
팀 버너스-리 경

36. History
웹기술의흐름

37. History
웹기술의흐름

38. 1991
HTML 초안
History
도표로알아보는간단한웹의흐름

39. 1991
HTML 초안
History
도표로알아보는간단한웹의흐름

40. 1991
HTML 초안
History
도표로알아보는간단한웹의흐름
1995
HTML 2
1997
HTML 3.2

41. 1998
Web Standard Project
1991
HTML 초안
1999
HTML 4.0
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1995
HTML 2
1997
HTML 3.2

42. 1998
Web Standard Project
1991
HTML 초안
1999
HTML 4.0
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1995
HTML 2
1997
HTML 3.2
2004
XHTML 2.0

43. 1998
Web Standard Project
1991
HTML 초안
1999
HTML 4.0
2010 - 2012
HTML 5
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1995
HTML 2
1997
HTML 3.2
2004
XHTML 2.0
2009
XHTML 2.0 End
2004
Web Applications 1.0

44. 1998
Web Standard Project
1991
HTML 초안
1999
HTML 4.0
2010 - 2012
HTML 5
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1995
HTML 2
1997
HTML 3.2
2004
XHTML 2.0
2009
XHTML 2.0 End
2004
Web Applications 1.0

45. 1991
HTML 초안
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0

46. 1991
HTML 초안
1996
CSS 1.0
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0

47. 1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0

48. 1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0
2004
CSS 2.1
Revisions

49. 1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0
2004
CSS 2.1
Revisions

50. 1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0
2004
CSS 2.1
Revisions
2007 - 2010
iPhone &
Smart Device

51. 1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2011
CSS 3.0
2000
XHTML 1.0
2004
CSS 2.1
Revisions
2007 - 2010
iPhone &
Smart Device

52. 1991
HTML 초안
1996
CSS 1
1998
CSS 2
1999
HTML 4.01
2010
HTML 5
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1994
Livescript
1996
Javascript 1.0
1997
ECMAscript 1.0
2008
Javascript 1.8
1999
ECMAscript 3.0
2006
jQuery 1.0
2012
jQuery 1.7
2007
CSS 2.1
2004
CSS 2.1
Revisions
2011
CSS 3.0

53. 1991
HTML 초안
1996
CSS 1
1998
CSS 2
1999
HTML 4.01
2010
HTML 5
History
도표로알아보는간단한웹의흐름
2000
XHTML 1.0
1994
Livescript
1996
Javascript 1.0
1997
ECMAscript 1.0
2008
Javascript 1.8
1999
ECMAscript 3.0
2006
jQuery 1.0
2012
jQuery 1.7
2007
CSS 2.1
2004
CSS 2.1
Revisions
2011
CSS 3.0

54. 1991
HTML 초안
1996
CSS 1
1998
CSS 2
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
1993
Mosaic
1998
IE 5
2007
IE 7
1994
NN 1
1995
IE
2002
IE 6
2006
FF 2
2004
FF 1
2008
FF 3
2009
IE 8
History
도표로알아보는간단한웹의흐름
2010
IE 9
2010
CSS 3
2000
XHTML 1.0
2003
Safari
1996
Opera
2008
Chrome
1994
Livescript
1996
Javascript 1.0
1997
ECMAscript 1.0
2008
Javascript 1.8
1999
ECMAscript 3.0
1991
Nexus
2001
NN 6

55. 1991
HTML 초안
1996
CSS 1
1998
CSS 2
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
1993
Mosaic
1998
IE 5
2007
IE 7
1994
NN 1
1995
IE
2002
IE 6
2006
FF 2
2004
FF 1
2008
FF 3
2009
IE 8
History
도표로알아보는간단한웹의흐름
2010
IE 9
2010
CSS 3
2000
XHTML 1.0
2003
Safari
1996
Opera
2008
Chrome
1994
Livescript
1996
Javascript 1.0
1997
ECMAscript 1.0
2008
Javascript 1.8
1999
ECMAscript 3.0
1991
Nexus
2001
NN 6

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

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

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

59. 시/겔/절/규
오래 지나지 않아 시겔은 자신이 괴물을 만들어
냈다는 사실을 깨닫고 절규하게 됩니다.
“웹은 망가졌고 그렇게 만든 건 바로 나다”
the Web is ruined and I ruined it

61. 어떤 사람들은 제가 웹을 망가뜨렸다고 말합니다. 사실 그 말은 틀리지 않았습니다.
저는 초컬릿과 땅콩버터를 마구 섞어 다시는 분리하지 못하게 한 것과 같이 웹을 망가뜨렸습니다.
저는 구조를 표현과 함께 뒤섞어 버리는 죄악을 저질렀기 때문에 처형되어도 마땅하다고 생각합니다.
데이빗 시겔 www.xml.com/pub/a/w3j/sl/people.html

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

63. <table> 태그를 사용해서 레이아웃을 만들던 과거에는 보이는
모양에 따라 컨텐츠를 배치해야 했기 때문에 컨텐츠와 구조
모두 분리되지 못했습니다.

65. 하지만 현대적인 웹 디자인 제작에서는
과거의 잘못된 방법을 답습하고 있지 않습니다.
비효율적인 구조와 표현을 한 몸으로 해서 제작하지
않으며, 목적에 부합하는 의미적인 구조와 다양한
스타일 제작을 위한 효울적인 표현, 동작 관리를 통해
효과적인 디자인 구현을 가능케합니다.
구조
표현
동작

66. 월드 와이드 웹의 원칙
Web for All
Web on Everything
월드 와이드 웹의 비전
Web for Rich Interaction
Web of Data and Services
Web of Trust

67. Web Standard

68. DVD의

69. 뒤를

70. 이을

71. 차세대

72. 광디스크

73. 표준은

74. 누가?!
VS

75. VS

76. VS

77. VS서로간의

78. 구현

79. 기술이

80. 다르다보니...
디스크

81. 드라이브

82. 역시

83. 양쪽

84. 진영으로

85. 나뉘고...

86. 업계

87. 표준이

88. 없다보니....
두

89. 포멧

90. 모두를

91. 지원해야

92. 하는

93. 상황

94. 초래...

95. DVD의

96. 뒤를

97. 이을

98. 차세대

99. 광디스크

100. 표준은

101.
도시바의

102. HD-DVD

103. 포기로

104. 소니의

105. Blue-Lay로

106. 확정

107. 두

108. 포멧

109. 모두를

110. 지원하는

111. 제품을

112. 출시한

113. 회사는
인적,

114. 물적

115. 자원

116. 낭비가

117. 이루말할

118. 수

119. 없다...

120. OTL
오! 샤우트!

121. ‘

130. ’
다시...

131. 웹

132. 환경으로

133. 돌아와

134.
웹

135. 표준을

136. 생각해보면...

137. ‘

146. ’
인터넷

147. 익스플로러는

148. 그동안
W3C

149. 웹

150. 표준

151. 권고안을

152. 지키지

153. 않았다.
훗! 그 까이꺼 뭐...
무시~ 무시~

154. ‘

163. ’
왜나하면!
MS

164. IE의

165. 시장

166. 점유율이

167. 상당했으니까.
훗!
83.4%
내가 최고!
누가 뎀벼?

168. ‘

177. ’
그

178. 사이...
다른

179. 브라우저

180. 벤더들은

181. 표준을

182. 준수했다.
표준장착 완료!

183. ‘

192. ’
결국!
MS

193. IE의

194. 시장

195. 점유율이

196.
위험할

197. 정도로

198. 떨어지는

199. 결과를

200. 초래.
헉!
32.2%
완전히
새 됐어~

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

202. ‘

211. ’
고집부리던

212. MS

213. IE가

214. 비로소

215. 적나라한

216.
시장의

217. 결과를

218. 보고

219. 이제야

220. 표준을

221.
잘

222. 준수하려나

223. 봅니다.
휴..
큰 코
다쳤네...

224. ‘

233. ’
차세대

234. 광디스크

235. 사례로

236. 알아본
비

237. 표준이

238. 존립할

239. 경우의

240. 제작자의

241.
어려움을

242. 엿봤습니다.

244. ‘

253. ’
핸드폰의

254. 충전기,

255. 표준

256. 전압

257. 규격

258. 사례

259. 등
우리

260. 삶

261. 속에서도

262. 표준이

263. 없을

264. 경우
많은

265. 불편이

266. 야기될

267. 수

268. 있다는

269. 사실.

271. ‘

280. ’
핸드폰의

281. 충전기,

282. 표준

283. 전압

284. 규격

285. 사례

286. 등
우리

287. 삶

288. 속에서도

289. 표준이

290. 없을

291. 경우
많은

292. 불편이

293. 야기될

294. 수

295. 있다는

296. 사실.

298. ‘

307. ’
규격이

308. 하나로

309. 통일되면

310. 정말

311. 편할텐데...
사람들의

312. 삶이

313. 한결

314. 좋아질텐데

315. 말이죠.

316. ‘

325. ’
웹

326. 표준이란?

327. 어/디/서/나
Mobile

328. Phone

329. /

330. Text

331. Browser

332.
PDA

333. /

334. PMP

335. /

336. IPTVGame

337. 어/디/서/나
Mobile

338. Phone

339. /

340. Text

341. Browser

342.
PDA

343. /

344. PMP

345. /

346. IPTVGame

347. 어/디/서/나
Mobile

348. Phone

349. /

350. Text

351. Browser

352.
PDA

353. /

354. PMP

355. /

356. IPTVGame

357. 어/디/서/나
Mobile

358. Phone

359. /

360. Text

361. Browser

362.
PDA

363. /

364. PMP

365. /

366. IPTVGame

367. 어/디/서/나
Mobile

368. Phone

369. /

370. Text

371. Browser

372.
PDA

373. /

374. PMP

375. /

376. IPTVGame

377. 어/디/서/나
Mobile

378. Phone

379. /

380. Text

381. Browser

382.
PDA

383. /

384. PMP

385. /

386. IPTVGame

387. 누/구/나
남녀노소

388. 그리고...
몸이

389. 불편하신

390. 분들

391. 또한

392. 누/구/나
남녀노소

393. 그리고...
몸이

394. 불편하신

395. 분들

396. 또한

397. 제약없이

398. 접근할

399. 수

400. 있는

401. 환경을

402. 만들기

403. 위한

404. 약속
입니다

405. ‘

414. ’
웹

415. 표준

416. -

417. 약속(웹을

418. 만드는

419. 사람들간의...)

420. ‘

429. ’
웹

430. 표준

431. -

432. 약속(웹을

433. 만드는

434. 사람들간의...)
웹 브라우저 제작자,
웹 기획자,
웹 디자이너,
웹 퍼블리셔,
웹 개발자

435. ‘

447. ’
[웹

448. 표준]은

449. 브라우저

450. 제작사가

451. 제품(브라우저)을

452. 만들고

453. 웹

454. 제작자가

455. 웹

456. 사이트를

457. 제작할

458. 때,

459. 표준

460. 사양(Spec.)에
따라

461. 규격을

462. 정하고,

463. 통일하는

464. 것을

465. 말합니다.
표준을 준수하자!

466. 월드 와이드 웹 표준
Recommend specification
Not compulsion
But Depending Rule!

467. Web Accessibility

468. 웹

469. 접근성

470. (Web

471. Accessibility)

472. 웹

473. 접근성

474. (Web

475. Accessibility)
W3C

476. WAI(2006a)

477. Thatcher,et.al.(2006)
장애를

478. 가진

479. 사람들도

480. 웹을

481. 이용할

482. 수

483. 있도록

484. 보장하는

485. 것으로,

486. 장애를

487. 가진

488. 사람들이

489. 웹

490. 콘텐츠를

491. 인지하고(Perceivable),

492.
운영하고(Operable),

493. 이해하고(Understandable),

494. 기술에

495. 상관없이

496. 이용할

497. 수

498. 있도록

499. 견고(Robust)하게

500. 웹

501. 콘텐츠를

502. 만드는

503. 것.

504. 웹

505. 접근성

506. (Web

507. Accessibility)
W3C

508. WAI(2006a)

509. Thatcher,et.al.(2006)
장애를

510. 가진

511. 사람들도

512. 웹을

513. 이용할

514. 수

515. 있도록

516. 보장하는

517. 것으로,

518. 장애를

519. 가진

520. 사람들이

521. 웹

522. 콘텐츠를

523. 인지하고(Perceivable),

524.
운영하고(Operable),

525. 이해하고(Understandable),

526. 기술에

527. 상관없이

528. 이용할

529. 수

530. 있도록

531. 견고(Robust)하게

532. 웹

533. 콘텐츠를

534. 만드는

535. 것.
Wikipedia(2006)
표준

536. 브라우저

537. 뿐만

538. 아니라

539. 다양한

540. 사용자

541. 에이전트(User

542. Agent)

543. 를

544. 사용하는

545. 사람들이

546. 웹

547. 페이지에

548. 접근하기

549. 쉽게

550. 만드는

551. 것으로,

552.
이를

553. 통해

554. 장애인들도

555. 웹을

556. 사용할

557. 수

558. 있도록

559. 보장하는

560. 것

562. ※

563. 장애인들이

564. 사용하는

565. 보조기술은

566. 사용자

567. 에이전트에

568. 포함됨.

569. 웹

570. 접근성

571. (Web

572. Accessibility)
W3C

573. WAI(2006a)

574. Thatcher,et.al.(2006)
장애를

575. 가진

576. 사람들도

577. 웹을

578. 이용할

579. 수

580. 있도록

581. 보장하는

582. 것으로,

583. 장애를

584. 가진

585. 사람들이

586. 웹

587. 콘텐츠를

588. 인지하고(Perceivable),

589.
운영하고(Operable),

590. 이해하고(Understandable),

591. 기술에

592. 상관없이

593. 이용할

594. 수

595. 있도록

596. 견고(Robust)하게

597. 웹

598. 콘텐츠를

599. 만드는

600. 것.
Wikipedia(2006)
표준

601. 브라우저

602. 뿐만

603. 아니라

604. 다양한

605. 사용자

606. 에이전트(User

607. Agent)

608. 를

609. 사용하는

610. 사람들이

611. 웹

612. 페이지에

613. 접근하기

614. 쉽게

615. 만드는

616. 것으로,

617.
이를

618. 통해

619. 장애인들도

620. 웹을

621. 사용할

622. 수

623. 있도록

624. 보장하는

625. 것

627. ※

628. 장애인들이

629. 사용하는

630. 보조기술은

631. 사용자

632. 에이전트에

633. 포함됨.
Microsoft(2002)
접근성이란

634. 접근을

635. 가능하게

636. 만드는

637. 것으로,

638. 모든

639. 사용자들이

640. 제품과

641. 서비스를

642. 사용할

643. 수

644. 있도록

645. 만드는

646. 것.

647. 부산

648. 점자

649. 도서관

650. 웹

651. 접근성

652. 실태

653. 어플리케이션

654.
접근성

656. 월드 와이드 웹 접근성
Not! Only World Wide Web
Thinking Everyone for Application

657. Markup

658. document

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

660. document
MARKUP
브랜드
주요내용사이트
정보
보조내용

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

662. document
영역 A
영역 B
영역 C
영역 D
각 영역에 대한 구분이 나눠지면, 우선적으로 사용자에게 전달되어야 할 영역과
보조 영역을 구분해내어 우선권 별로 순서를 부여할 수 있는 능력을 키워야 합니다.MARKUP
브랜드
주요내용사이트
정보
1
24
보조내용
3

663. document
영역 A
영역 B
영역 C
영역 D
MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4

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

665. document
영역 A
영역 B
영역 C
영역 D
MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4

666. document
영역 A
영역 B
영역 C
영역 D
위치에 대한 우선 적용이 정해지면 각 해당되는 영역을 구조화하여야 합니다.
이는 문서를 해독하여 사용자에게 정보를 제공하는 역할을 수행하는 브라우저가
해석할 수 있도록 문서를 마크업(Markup)한다는 의미입니다. 때문에 의미 전달의
정확성을 염두에 두고 심혈을 기울여 작성하여야 합니다.
MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드

667. document
영역 A
영역 B
영역 C
영역 D
위치에 대한 우선 적용이 정해지면 각 해당되는 영역을 구조화하여야 합니다.
이는 문서를 해독하여 사용자에게 정보를 제공하는 역할을 수행하는 브라우저가
해석할 수 있도록 문서를 마크업(Markup)한다는 의미입니다. 때문에 의미 전달의
정확성을 염두에 두고 심혈을 기울여 작성하여야 합니다.
MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용

668. document
영역 A
영역 B
영역 C
영역 D
위치에 대한 우선 적용이 정해지면 각 해당되는 영역을 구조화하여야 합니다.
이는 문서를 해독하여 사용자에게 정보를 제공하는 역할을 수행하는 브라우저가
해석할 수 있도록 문서를 마크업(Markup)한다는 의미입니다. 때문에 의미 전달의
정확성을 염두에 두고 심혈을 기울여 작성하여야 합니다.
MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용

669. document
영역 A
영역 B
영역 C
영역 D
위치에 대한 우선 적용이 정해지면 각 해당되는 영역을 구조화하여야 합니다.
이는 문서를 해독하여 사용자에게 정보를 제공하는 역할을 수행하는 브라우저가
해석할 수 있도록 문서를 마크업(Markup)한다는 의미입니다. 때문에 의미 전달의
정확성을 염두에 두고 심혈을 기울여 작성하여야 합니다.
MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address

670. document
영역 A
영역 B
영역 C
영역 D
MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address

671. document
영역 A
영역 B
영역 C
영역 D
문서의 해당영역에 적합한 구조를 구현하였다면,
각 영역의 덩어리를 그룹화(Grouping)하여 영역을 묶어주는 것이 필요합니다.
이는 차후 문서의 레이아웃을 잡고, 표현 디자인을 입히는데 중요한 역할을 합니다.MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address
div /div

672. document
영역 A
영역 B
영역 C
영역 D
문서의 해당영역에 적합한 구조를 구현하였다면,
각 영역의 덩어리를 그룹화(Grouping)하여 영역을 묶어주는 것이 필요합니다.
이는 차후 문서의 레이아웃을 잡고, 표현 디자인을 입히는데 중요한 역할을 합니다.MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address
div /div
div /div

673. document
영역 A
영역 B
영역 C
영역 D
문서의 해당영역에 적합한 구조를 구현하였다면,
각 영역의 덩어리를 그룹화(Grouping)하여 영역을 묶어주는 것이 필요합니다.
이는 차후 문서의 레이아웃을 잡고, 표현 디자인을 입히는데 중요한 역할을 합니다.MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address
div /div
div /div
div /div

674. document
영역 A
영역 B
영역 C
영역 D
문서의 해당영역에 적합한 구조를 구현하였다면,
각 영역의 덩어리를 그룹화(Grouping)하여 영역을 묶어주는 것이 필요합니다.
이는 차후 문서의 레이아웃을 잡고, 표현 디자인을 입히는데 중요한 역할을 합니다.MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address
div /div
div /div
div /div
div
/div

675. document
영역 A
영역 B
영역 C
영역 D
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address
div /div
div /div
div /div
div
/div

676. document
영역 A
영역 B
영역 C
영역 D
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address
div /div
div /div
div /div
div
/div
id=”header”

677. document
영역 A
영역 B
영역 C
영역 D
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address
div /div
div /div
div /div
div
/div
id=”header”
id=”main”

678. document
영역 A
영역 B
영역 C
영역 D
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address
div /div
div /div
div /div
div
/div
id=”header”
id=”main”
id=”aside”

679. document
영역 A
영역 B
영역 C
영역 D
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?MARKUP
브랜드
주요내용
보조내용
사이트
정보
1
2
3
4
h1 /h1브랜드
h2 /h2제목
p /p내용
h4 /h4제목
p /p내용
address
사이트
정보
/address
div /div
div /div
div /div
div
/div
id=”header”
id=”main”
id=”aside”
id=”footer”

680. header
main
aside
footer

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

682. PRESENTATION
header
mainaside
footer

683. PRESENTATION
header
main aside
footer

684. PRESENTATION
header
main
footer
aside

685. PRESENTATION
main
footer
aside
header

686. 월드 와이드 웹 마크업
Not! Expression
This is Meaning Work!