1주 WEB UI Overview

1. Overview

3. WEB

4. UI WEBUI

5. BASIC

10. 1주차

11. 목표 WEB

13. WEB

14. UI를

15. 왜

16. 배우는지

17. 내가

18. 무엇을

19. 할

20. 수

21. 있을지

22. 안다.

23. 이번학기에

24. 내가

25. 어떻게

26. 이

27. 과목을

28. 공부해야

29. 할지,

30. 무엇을

31. 꼭

32. 해야

33. 하는지

34. 알고

35. 있다.

36. 웹UI

37. 개발에

38. 필요한

39. 브라우저의

40. 동작에

41. 대한

42. 대략적인

43. 이해가

44. 있다.

45. codepen이나

46. jsbin,

47. 크롬

48. 개발자도구

49. 등으로

50. 웹UI

51. 개발에

52. 활용하는

53. 법을

54. 안다.

55. WEB

57. 우리가

58. 경험하고

59. 있는

60. Web “우리는

61. 다양한

62. 기기에

63. 포함되어

64. 있는

65. Browser를

66. 통해

68. 쉽게

69. 웹을

70. 경험하고

71. 있다” Browser Desktop Mobile Tablet SmartTV

72. Web의

73. 동작 은행에서

74. 돈

75. 찾기 은행을

76. 찾아가서,

77. 나의

78. 계좌에서

79. 돈을

80. 빼

81. 달라고,

82. 출금

83. 요청서를

84. 작성한다.

85. 가야

86. 할

87. 주소가

88. 있어야하고,

89. 구체적인

90. 요청사항이

91. 있을

92. 수

93. 있고,

94. 약속된

95. 방식으로

96. 요청해야

97. 한다. 요청 고객 은행 응답

98. Web의

99. 동작 은행에서

100. 돈

101. 찾기 은행을

102. 찾아가서,

103. 나의

104. 계좌에서

105. 돈을

106. 빼

107. 달라고,

108. 출금

109. 요청서를

110. 작성한다.

111. http://www.bank.com/getMoney/?customNum=310313

115. request client Server response html! div! ….! ! /html

116. URI

117. 의

118. 구성

119. Uniform

120. Resource

121. Indentifier http://www.bank.com/getMoney/?customNum=310313

126. scheme(스키마)

127. host

128. name path와

129. query

130. string

131. client

132. Browser web

133. server request response 1)

134. 특정

135. URI로

136. 서버에

137. 접근하여

138. resource를

139. 요청한다.

140. 2)

141. Server에서는

142. 필요한

143. 정보가

144. 있는지

145. 서버의

146. 저장소를

147. 통해

148. 확인한다

149. 3)

150. 저장소에서

151. 추출한

152. 정보를

153. Server가

154. 받아서

155. client에게

156. 보내준다.

157. 4)

158. Client는

159. Server가

160. 보내준

161. 정보를

162. 받는다

163. 5)

164. 사용자가

165. 쉽게

166. 알아볼

167. 수

168. 있도록

169. 정해진

170. UI의

171. 형태에

172. 맞게

173. 정보를

174. 보여준다.

175. 저장소 Server

176. Side Web의

177. 흐름과

178. 필요기술들

179. 내가

180. 보낸

181. 요청이

182. 어떻게

183. 처리되나요?

184. Web의

185. 흐름과

186. 필요기술들

187. 내가

188. 보낸

189. 요청이

190. 어떻게

191. 처리되나요? 1)

192. 특정

193. URI로

194. 서버에

195. 접근하여

196. resource를

197. 요청한다.

198. 현대의

199. 웹은

200. HTTP라는

201. protocol(통신규약)을

202. 사용해서

203. 웹의

204. 자원을

205. 요청

206. Server는

207. 항상

208. 대기중인

209. 상태로

210. 실행

211. 중이어야

212. 함

213. ! 2)

215. 필요한

216. 정보가

217. 있는지

218. 서버의

219. 저장소를

220. 통해

221. 확인한다

222. 정보는

223. Database(DB)에

224. 보관되고

225. 있으며,

228. DB에

229. 접근할

230. 수

231. 있는

232. 웹서버

233. 프로그래밍

234. 기술이

235. 필요

236. ! 3)

237. 저장소에서

238. 추출한

239. 정보를

240. Server가

241. 받아서

242. client에게

243. 보내준다.

244. 모든

245. 서버는

246. Web표준에

247. 맞는

248. response

249. 를

250. 보내줌.

251. ! 4)

252. Client는

253. Server가

254. 보내준

255. 정보를

256. 받는다

257. HTTP통신을

258. 하는

259. 과정에서

260. Browser는

261. 이를

262. 받아서

263. 처리

264. 할

265. 준비를

266. 하고

267. 있다.

268. ! 5)

269. 사용자가

270. 쉽게

271. 알아볼

272. 수

273. 있도록

274. 정해진

275. UI의

276. 형태에

277. 맞게

278. 정보를

279. 보여준다.

280. server에서

281. 보내준

282. 정보를

283. 분석하고

284. 이를

285. 화면에

286. 적절히

287. 보여주기

288. 위한

289. Client

290. 프로그래밍이

291. 필요.

292. WEBUI

293. ?

294. 무엇이

295. 필요할까

297. ? WEB

298. UI

299. 의

300. 요소에는

302. web

303. UI

304. 의

305. 요소

306. ! 직관적이고

307. 감성을

308. 호소하기

312. 흐름에

313. 맞는

314. 콘텐츠의

315. 구조

316. 정의

317. 스타일과

318. 레이아웃의

319. 완성

320. 사용자와

321. 반응하고

322. 서버와

323. 소통

328. http://www.daum.net

329. 에서

330. css를

331. 지우면

332. ?

333. http://www.csszengarden.com

334. ! Web

335. Design

336. HTML

337. CSS

338. JavaScript

339. HTML CSS JavaScript

340. 현장에서는

341. ? 전략 기획 UX

342. 디자인

343. HTML/CSS Javascript Server DB

344. 이상적인

345. UI개발자는

346. ?

347. ! UI

348. 구성요소간의

349. 관계를

350. 잘

351. 이해

352. 함

353. 내가

354. 만들고

355. 싶은

356. UI를

357. 만들

358. 수

359. 있어야

360. 함

362. 이상적인

363. UI개발자는

364. ?

365. ! 디자인

367. VS.

368. 기술

369. 모바일

370. 앱

371. 개발자에게

372. 웹UI

373. 는?

374. 웹서버

375. 개발자에게

376. 웹UI는?

377. WEBUI

378. in

379. NEXT

380. ?

381. Web

382. UI

383. 개발에서

384. 알아야

385. 할

386. 것들 HTML CSS J a v a S c r i p t HTML5 CSS3 DOM E v e n t Object Oriented Javascript J a v a s c r i p t WEB G r a p h i c s 반 응 형 레 이 아 웃 S V G , CANVAS DATA Visualization ECMAScrip t 패 턴 웹 최 적 화 J a v a s c r i p t MVC nodeJS web socket web storage M o b i l e Web J a v a s c r i p t l i b r a r y w e b components WEBGL U I T e s t b u i l d C I A j a x Hybrid Web App

387. 웹UI

388. 개발에서

389. 가장

390. 많이

391. 사용되는

392. 기술

393. (이번학기에

394. 배운

395. 것)

396. 웹UI

397. 개발에서

398. 가장

399. 많이

400. 사용되는

401. 기술

402. (이번학기에

403. 배운

404. 것) Hybrid HTML CSS J a v a S c r i p t HTML5 CSS3 DOM E v e n t Object Oriented Javascript J a v a s c r i p t WEB G r a p h i c s 반 응 형 레 이 아 웃 S V G , CANVAS DATA Visualization ECMAScrip t 패 턴 웹 최 적 화 J a v a s c r i p t MVC nodeJS web socket web storage M o b i l e Web J a v a s c r i p t l i b r a r y w e b components WEBGL U I T e s t b u i l d C I A j a x Web App

405. 1학년$ 2학년$ 3학년$ 인턴십$ 1학기$(4개월)$ 2학기$(4개월)$ 3학기$(4개월)$ 4학기$(4개월)$ 5학기$(4개월)$ 6학기$(4개월)$ 4~6개월$ NEXT$$ 소프트웨어$개론$ 프로그래밍$연습$ (Lab)$ HTML,$Javascri pt$Basic$ 물리학$ 자료구조$및$알고 리즘$ 기초수학$ 운영체제$ Linux$운영체제$ 실습$(Lab)$ 프로그래밍$언어$ in$Java$$Lab$ 데이터베이스$Ba sic$ 컴퓨터$네트워크$ 컴퓨터$그래픽스$ 멀티미디어$개론$ HTML,$Javascri pt$Advanced$ SW$Architectin g$ HCI$ SW$공학$ Java$Web$$ 프로그래밍$ HTML$5$$ 프로그래밍$ Data$Visualizati on$ 확률과$통계$ UX디자인1$ UX디자인2$ 실전$창업$ 인문사회학$ Critical$thinking$ 휴먼디자인$ 프로젝트(1)$ 휴먼디자인$ 프로젝트(2)$ 실전프로젝트$ (2)$ Communication$ 실전프로젝트$ (1)$ Business$English$ (1)$ Entrepreneurship$ 인문사회학$ (2)$ 인문사회학$ (4)$ 인문사회학$ (3)$

406. 1학기 2학기 3학기 4학기 5학기 6학기

407. 1학기 WEB UI BASIC 개발경험 프로젝트 WEB UI Advanced / 프로젝트 고급응용 애플리케이션 실전프로젝트

408. 강의계획

409. 구글

410. Docs

411. 사이트

412. 참고!

413. 브라우저로

415. 웹의

416. 동작을

417. 좀더

418. 알 아보기

419. 웹의

420. 브라우저가

421. 어떻게

422. 동작되는지

423. 아는

424. 것이,

426. 왜

427. 중요할까?

428. !!!

429. 막연하지만

430. 추정해보기

432. ! 브라우저는

433. 어떤

434. 동작을

435. 해야

436. 할까

437. ?

438. WEB

439. Flow image : learning web design(book)

440. !! 브라우저는

442. HTML,

443. CSS,

444. Javascript와

445. UI의

446. 파일을

447. 해석해서

448. 동작한다.

451. 브라우저는,

453. ! !! ! 1

456. HTML파일을

457. 분석해서(파싱)

458. 화면의

459. 구조를

460. 잡는다.

461. ! 2

464. CSS파일을

465. 분석하고(파싱)

466. 화면에

467. 필요한

468. 걸

469. 배치를

470. 하고

471. 스타일을

472. 입힌다.

475. (Rendering작업

476. 이라고

477. 함)

478. ! 3

481. JS파일을

482. 통해서

483. UI의

484. 동작을

485. 추가로

486. 조작한다.

488. 간단하게

489. 말하자면,

490. HTML + 화면에 표시 CSS

491. 1.

492. HTML파일을

493. 받고 2.

494. Tree형태로

495. 변환후에 ! html! head! title! meta! ! body! h1next !/h1! p ! a링크/a! ul! li1기 /li! li2기 li! li3기 li! /ul! /body! /html! 이미지URL : http://www.webstepbook.com/supplements/slides/lecture16-dom_tree.shtml

496. 3.

498. 스타일

499. 정보도

500. 분석 이미지URL : http://taligarsiel.com/Projects/howbrowserswork1.htm

501. 브라우저

502. 엔진(웹킷)의

503. 처리과정 이미지

504. 출처

505. :

506. http://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/

507. 실제

508. 네트웍

509. 상황을

510. 한번

511. 들여다

512. 보기

513. 개발

514. 환경

515. 어떤

516. 도구가

517. 최선일까?

518. 개발

519. 도구는

520. 제한

521. 없음

523. (UI개발에

524. 컴파일은

525. 없도다)

526. Sublime

527. text

528. coda

529. editorPlus

530. aptana

532. vi,

533. vim

534. ! ! 간단한

535. 테스트

537. chrome

538. -

539. 개발자도구

540. jsbin.com

541. ,

542. codepen

544. 경고창

545. 띄우기

547. ! Chrome을

548. 열고,

549. 키보드

550. 단축키

551. 실행

553. :

554. option+command

555. +

556. i

558. console

559. 탭에서

560. alert(1);

561. ! #console

562. 탭에서

563. 간단한

564. Javascript

565. 코드

566. 테스트를

567. 할

568. 수

569. 있다

570. 경고창

571. 띄우기

573. ! jsbin.com

574. 에서

576. javascript

577. 탭에서

578. alert(1);

579. 을

580. 실행

582. 경고창

583. 띄우기

585. ! codepen

586. 에서

587. javascript

588. 탭에서

589. alert(1);

590. 을

591. 실행

593. 브라우저

595. ! UI개발자에게

596. 어떤

597. 기능이

598. 필요로

599. 할까?

600. 힌트

601. :

602. 브라우저의

603. 동작과정을

604. 생각해보자

605. Chrome

607. 살펴보기

608. 이미

609. 존재하는

610. 페이지를

611. 동적으로

612. 변경할

613. 수가

614. 있다.

615. ! Elements탭

616. 선택,

617. 하단

618. 돋보기

619. 아이콘

620. 클릭

621. -

622. 화면을

623. 이것저것

624. 선택

625. ,

626. 우측은

627. CSS

628. 속성임.

630. 아무거나

631. 체크를

632. 제거해보기

633. Chrome

635. 살펴보기

636. ! 네이버에서

637. 날씨

638. 영역을

639. 찾아보자

640. !

642. 감으로

643. 때려잡기

644. network

645. 탭과

646. Sources

647. 탭이

648. 무엇을

649. 하는걸까?

650. !

651. 개발에

652. 필요한

653. 걸

654. 찾는

655. 방법

656. 웹을

657. 통한

658. 빠른

659. 검색

660. !

661. 책을

662. 통한

663. 원리의

664. 이해

665. ! Google

667. 검색

668. Google

669. -

670. ‘hasownproperty

671. mdn’

672. Google

673. -

674. ‘site:w3schools.com

675. hasownproperty’

676. ! 기타

677. 자가학습

678. http://www.codecademy.com/tracks/

679. http://www.w3schools.com/

680. https://developer.mozilla.org/en-US/learn/javascript

681. Project

682. http://goo.gl/Ixxdwx

683. 피드백

685. :-) 이번주

686. 학습목표들에

687. 대해서

689. 수업을

690. 통해서

691. 알게

692. 된

693. 것을

694. 점수를

695. 쓰고,

696. 왜

697. 자신이

698. 그

699. 점수인지

700. 의견달기.

701. 5점만점으로

702. 작성.

703. 1)

704. WEB

705. ,

706. WEB

707. UI를

708. 왜

709. 배우는지

710. 내가

711. 무엇을

712. 할

713. 수

714. 있을지

715. 안다.

716. 2)

717. 이번학기에

718. 내가

719. 어떻게

720. 이

721. 과목을

722. 공부해야

723. 할지,

724. 무엇을

725. 꼭

726. 해야

727. 하는지

728. 알고

729. 있다.

730. 3)

731. 웹UI

732. 개발에

733. 필요한

734. 브라우저의

735. 동작에

736. 대한

737. 대략적인

738. 이해가

739. 있다.

740. 4)

741. codepen이나

742. jsbin,

743. 크롬

745. 등으로

746. 웹UI

747. 개발에

748. 활용하는

749. 법을

750. 안다.

751. End ;-D

1주 WEB UI Overview

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to 1주 WEB UI Overview (20)

More from 지수 윤 (20)

1주 WEB UI Overview