NHN NEXT에서 시작한 웹 스터디 자료입니다. 부족하지만 열심히 만들었습니다. 처음 웹을 시작하시는 분들을 위해 제작했습니다. 중급자 이상인 분들은 초보자용이니 재미있고, 가볍게 보시길... ㅎㅎㅎ

1. WEB과

2. HTML
[WEB

3. Basic

4. Study]
본

5. slide는

6. NHN

7. NEXT

8. 윤지수

9. 교수님의

10. 강의

11. 자료를

12. 바탕으로

13. 제작했습니다.
NHN

14. NEXT

15. 우재우

16. 오늘부터

17. WEB

18. 클라이언트

19.
프로그래밍을

20. 배워봅시다!

21.
어렵지

22. 않아요

23. ㅎㅎㅎ

24.
는

25. 뻥!

26. 저는

27. 우재우재우재우

28. 입니다.

29.
만나서

30. 반가워요!

31.
저도

32. 부족해서

33. 뭘

34. 알려줄

35. 수

36.
있을까

37. 걱정입니다

38. ㅠ

39. 건축

40. 디자인

41. 전공!

42. -

43. 자퇴

44. -

45.
NEXT

46. 게임

47. 클라이언트

48. 전공!

49.
-

50. NEXT

51. WEB

52. UI

53. 전공!

54.
나는야

55. 똥테크

56. 총대장!!!

57. 저도

58. BASIC

59. 밖에

60. 못

61. 알려드려요

62.
같이

63. 공부한다고

64. 생각하고

65. 합시다

66.
쉽고

67. 재미있게

68. WEB을

69. 알

70. 수

71. 있도록

72.
열심히

73. 도와드리겠습니다

74. ㅋ

75. 이번

76. 스터디

77. 학습

78. 목표
WEB과

79. WEB

80. UI가

81. 무엇이고

82. 필요한

83. 기술이

84. 무엇인지

85. 안다.

86.
클라이언트

87. 개발에

88. 대한

89. 대략적인

90. 이해를

91. 갖는다.

92.
클라이언트

93. 프로그래밍에

94. 필요한

95. HTML5

96. 기술을

97. 배운다.

98.
만들기

99. 원하는

100. 웹

101. 페이지를

102. 만들어(그려)낼

103. 수

104. 있다.

105.
2학기부터

106. 진행할

107. 개발경험프로젝트에서

108. 이

109. 정도는

110. 해주자.

111. WEB이

112. 뭔가요?

113. Browser,

114. 넌

115. 누구냐
우리는

116. 다양한

117. 기기에

118. 있는

119. Browser를

120. 통해

121. 웹을

122. 쉽게

123. 경험하고

124. 있어요!

125.
Notebook,

126. Mobile,

127. Tablet,

128. Smart

129. TV

130. etc…⋯

131.
Browser가

132. 인터넷만을

133. 위한

134. 도구라고

136.
생각하겠지만

137. 생각보다

138. Browser는

139.
다른

140. 일도

141. 할

142. 수

143. 있어요!

144.
그림

145. 파일이나

146. 텍스트

147. 파일을

148.
끌어다

149. 넣어

150. 봅시다!

151. WEB은

152. 이렇게

153. 동작해요!
설마

154. NEXT에

155. 와서

156. 서버와

157. 클라이언트를

158. 처음

159. 들어본

160. 건

161. 아니겠죠?

162.
아,

163. 그럴

164. 수

165. 있어요

166. ㅋㅋㅋ
가야

167. 할

168. 주소가

169. 있고,

170. 구체적인

171. 요청사항이

172. 있고,

173. 약속된

174. 방식이

175. 있어요!
스미스

176.
(클라이언트)
네이버

177.
(서버)
요청(Request)
응답(Response)

178. 좀

179. 더

180. 자세히

181. 봅시다
1) 특정

182. URI로

183. 서버에

184. 접근하여

185. resource를

186. 요청한다.

187. (Request)

188.
2) 서버에서는

189. 필요한

190. 정보가

191. 있는지

192. 저장소를

193. 확인한다.

194.
3) 저장소에

195. 있는

196. 정보를

197. 서버가

198. 받아서

199. 클라이언트에게

200. 보낸다.

201.
4) 클라이언트는

202. 서버가

203. 보내준

204. 정보를

205. 받는다.

206.
5) 사용자가

207. 쉽게

208. 알아볼

209. 수

210. 있도록

211. Browser가

212. UI

213. 형태에

214. 맞게

215. 보여준다.
CLIENT
BROWSER
WEB
SERVER
요청(Request)
응답(Response)
저장소
Server Side

216. 감사합니다!

217. 구글!!!
구글

218. 개발자

219. 도구를

220. 켜봅시다!

221.
윈도우라면

222. F12,

223. 맥이라면

224. Command

225. +

226. Alt

227. +

228. I

229.
Network

230. 탭을

231. 살펴보세요~

232.
개발자

233. 도구와

234. 많이

235. 친해지면

236. 좋아요

237. :)

238.
개발자

239. 도구에게

240. 인사해볼까요?

241. 안녕~

242. 그렇다면

243. WEB

244. UI는

245. 뭐지?

246. WEB

247. UI에

248. 대한

249. 오해
눈에

250. 보이는

251. 부분만

252. 개발하는

253. 개발자다?

254.
WEB

255. UI

256. 개발자는

257. 웹

258. 페이지를

259. 예쁘게

260. 만드는

261. 디자이너다?

262.
그래서

263. 디자인

264. 감각이

265. 뛰어나야

266. 한다?

267.
서버

268. 전공에

269. 비해

270. 공부가

271. 적어도

272. 괜찮다?

274. 이상적인

275. UI

276. 개발자?
UI

277. 구성요소

278. 간의

279. 관계를

280. 잘

281. 이해하는

282. 개발자!

283.
만들고

284. 싶은

285. UI를

286. 상상한대로

287. 만들

288. 수

289. 있는

290. 개발자!

291.
통신의

292. 앞뒤를

293. 모두

294. 이해하는

295. 개발자!

296. WEB

297. UI를

298. 구현하려면…⋯
WEB

299. Design

300.
HTML

301.
CSS

302.
Java

303. Script

304. HTML CSS Javascript

305. WEB

306. UI

307. 삼대장
HTML

308.
CSS

309.
Java

310. Script
명사

311.
형용사

312.
동사
이

313. 정도

314. 생각하면

315. 편할까요?

316. 실제로

317. 어떻게

318. 동작하죠?
크롬

319. 개발자

320. 도구에서

321. 살펴봅시다!
百聞而不如一見

322. 개발환경

323. 세팅!
우리는

324. 서브라임

325. 텍스트를

326. 쓸

327. 것이외다.

328.
그냥

329. 배경이

330. 까만

331. 메모장이죠.

332.
그렇지만

333. 메모장보단

334. 재미있는

335. 기능이

336. 많아요.

337.
Brackets,

338. codepen,

339. jsbin.com

340. 등

341. 다른

342. 툴도

343. 많으니

344. 살펴보시길…⋯

345. 이제

346. 우리는

347.
HTML이란

348. 것을

349.
해볼

350. 것이오!!!

351. HTML(Hyper

352. Text

353. Markup

354. Language)?
정의를

355. 쓰기

356. 너무

357. 귀찮으니

358. 그냥

359. 위키를

360. 봅시다!

361. HTML

362. 맛보기!
!DOCTYPE

363. html

364.
html

365.
head

370. titleHello,

371. HTML!/title

372.
/head

373.
body

378. pHello,

379. world!/p

380.
/body

381.
/html

382. HTML은

383. 이

384. 모양

385. 이

386. 꼴
a

387. href=“http://www.google.com”구글구글/a
요것은

388. 태그(tag)요,
요것은

389. 애트리뷰트(attribute)요.
W3schools에서

390. a태그를

391. 더

392. 자세히

393. 알아봅시다.

394.
http://www.w3schools.com/tags/tag_a.asp

396. HTML

397. tag는

398. 100개가

399. 넘는다!
여기

400. 가면

401. 볼

402. 수

403. 있어요~

404.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
OMG!!!

405. BLOCK

406. vs

407. INLINE
BLOCK

408. element
Block

409. element는

410. 넓이와

411. 높이를

412. 지정할

413. 수

414. 있어요.

415.
영역을

416. 차지하고

417. 있어서

418. 위/아래/위/위/아래로

419. 늘어섭니다.

420.
div,

421. p,

422. ul,

423. li,

424. form

425. 등
INLINE

426. element
Inline

427. element는

428. block

429. element

430. 안에서

431. 스타일을

432. 넣기

433. 위해

434. 사용됩니다.

435.
좌에서

436. 우로

437. 흐르듯이

438. 쌓이죠.

439.
span,

440. img,

441. q,

442. em,

443. input

444. 등

445. div:

446. 내가

447. 그렇게

448. 만만하니
div(division)

449. tag는

450. 가장

451. 많이

452. 사용되는

453. block

454. element입니다.

455.
화면의

456. 영역을

457. 구별하는

458. 데에

459. 쓰이지만

460. 특별한

461. 의미를

462. 갖진

463. 않아요.

464.
와꾸(레이아웃)를

465. 잡을

466. 때

467. 편하게

468. 쓰시면

469. 됩니다!

470. divdivdivdivdivdivdivdiv
솔까말

471. div만

472. 써도

473. 웹페이지

474. 레이아웃을

475. 잡을

476. 수는

477. 있어요!

478.
속성(attribute)으로

479. id나

480. class를

481. 주면

482. 서로

483. 구분

484. 가능하겠죠?

485.
먼저

486. id와

487. class의

488. 차이는

489. 무엇일까요?

490.
만약

491. div로

492. 다

493. 가능하면

494. 다른

495. block

496. element들은

497. 왜

498. 있는

499. 거죠?
divdivdivdivdivdivdivdiv
divdivdivdivdivdivdivdiv
divdivdivdivdivdivdivdiv

500. Semantic

501. HTML
적절한

502. 곳에

503. 적절한

504. 태그를

505. 쓰는

506. 것을

507. 추천!

508.
div로

509. 떡칠해도

510. 되지만

511. 의미를

512. 생각해서!

513.
http://semantic-ui.com/kitchen-sink.html

514. ul,

515. ol,

516. dl

517. 삼총사
ul,

518. ol,

519. dl은

520. 무언가를

521. 열거할

522. 때

523. 쓰이는

524. List용

525. 태그입니다!

526.
실제로

527. 코딩

528. 해보고

529. 어떻게

530. 생겼는지

531. 봅시다.

532.
각각의

533. 차이점이

534. 무엇인가요?

535. 다른

536. 태그들은

537. 쓰면서

538. 배우죠
괜찮…⋯죠??

539. 뭐

540. 만들까요?
http://magazine.good.is/

541.
이거

542. 만듭시다!!!

543. 첨엔

544. 힘들

545. 거예요;;;

546.
저를

547. 미워하게

548. 될지도…⋯

549.
다음

550. 시간까지

551. HTML

552. 구조만

553. 잡아와

554. 봅시다!

555. 질문

556. 및

557. 건의사항
ex)

558. 먹으면서

559. 수업합시다.

560. 제대로

561. 좀

562. 가르치쇼.

563. 너

564. 못

565. 생겼다.

566. 등등