[WEB UI ADVANCED] Mobile WEB 개발하기

1. 모바일

2. WEB

3. 개발하기 WEB UI BASIC ADVANCED NHN

4. NEXT

5. 우재우 모바일

6. 개발

7. 기본

8. 내용과

9. Grid

10. System

11. 써보기

12. 모바일

13. WEB에

14. 대응하는

15. 방식은

16. 크게

17. 두

18. 가지

19. 입니다.

20. 1.

21. 모바일

22. 웹페이지를

23. 따로

24. 만든다. like

25. m.naver.com

26. 2.

27. 웹페이지를

28. 반응형으로

29. 만든다. like

30. http://www.slideshare.net/

31. 따로

32. 모바일

33. 페이지를

34. 만들거면

35. 굳이

36. 이렇게

37. 스터디하지

38. 않아도

39. 괜찮았겠죠?

40. ㅋㅋㅋ

41. 우리는

42. 반응형으로

43. 만들겁니다!!!

44. 반응형

45. 모바일

46. 개발의

47. 시작은

48. meta!!!

49. meta는

50. head에

51. 넣어줍니다

52. 대체

53. meta는

54. 뭐하는

55. 녀석일까요?

56. meta

57. 너는

58. 누구냐!!! Metadata

59. is

60. data

61. (information)

62. about

63. data.

64. The

65. meta

66. tag

67. provides

68. metadata

69. about

70. the

71. HTML

72. document.

73. Metadata

74. will

75. not

76. be

77. displayed

78. on

79. the

80. page,

81. but

82. will

83. be

84. machine

85. parsable.

86. 출처:

87. http://www.w3schools.com/tags/tag_meta.asp 메타데이터는

88. 데이터에

89. 대한

90. 데이터

91. 입니다. meta

92. 태그는

93. HTML

94. document에

95. 대한

96. metadata를

97. 제공합니다. Metadata는

98. 페이지에

99. 보이지는

100. 않아요, 그러나

101. 구문분석은

102. 가능합니다.

103. meta

104. 태그의

105. 다른

106. Attribute는

107. 따로

108. 공부하시고,

109. 오늘은

110. meta

111. 중에서도

112. “viewport”!!!

113. viewport는

114. 브라우저에서

115. 웹

116. 페이지가

117. 표시되는

118. 영역입니다!

119. meta

120. name=“viewport”

121. 안타깝게도

122. viewport는

123. 아직

124. 웹표준이

125. 아닌

126. 것

127. 같습니다

128. 그리고

129. PC

130. 브라우저에서는

131. 무시되는

132. 속성입니다ㅠ

133. meta

135. content=“” 이제

136. 여기서

137. content를

138. 채우는

139. 것이

140. 중요합니다!!!

141. 속성 내용 단위 기본값 허용범위 특이사항 width viewport의

142. 너비 px 980px 200

143. ~

144. 10,000 device-width

145. 지정가능 height viewport의

146. 높이 px 가로화면

147. 비율에서

148. 계산된

149. 값 200

150. ~

151. 10,000 device-height

152. 지정가능 initial-scale 초기

153. 배율값 승수 viewport에서

154. 계산된

155. 값 0

156. ~

157. 10 minimum-scale 최소

158. 승수

159. 지정 승수 0.25 0

160. ~

161. 10 maximum-scale 최대

162. 승수

163. 지정 승수 1.6 0

164. ~

165. 10 user-scalable 확대,축소

166. 지원 yes,

167. no yes

168. 한

169. 번

170. 써봅시다! meta

172. content=“initial-scale=2,

173. width=490” width

174. 기본값은

175. 무조건

176. pc화면

177. 980px이

178. 기준이기

179. 때문에

180. 모바일

181. 기기의

182. 화면

183. 크기가

184. 490이면은

185. 화면의

186. 반만

187. 보이겠죠?

188. 그래서

189. width를

190. 490으로

191. 잡아주면

192. 화면에

193. 꽉차게

194. 보일거예요!!! 처음부터

195. 2배

196. 키워서

197. 보입니당!

198. 파...편...화 모바일

199. 기기의

200. 파...파...파편화

201. 문제는

202. 우리가

203. 어찌할

204. 수

205. 있는

206. 수준의

207. 것이

208. 아니죠 그래서

209. width=device-width

210. 혹은

211. height=device-height

212. 그래서

213. 이것저것

214. 써보면... meta

216. content=“initial-scale=1,

217. width=device-width,

218. user-scalable=yes,

220. minimum-scale=0.6,

221. maximum-scale=1.4” 단,

222. user-scalable=no

223. 일

224. 경우

225. minimum-scale과

226. maximum-scale은

227. 무시됩니다. m.naver.com

228. 의

229. meta

231. 태그를

232. 확인해봅시다.

233. 다음은

234. media-query에

235. 관한

236. 내용입니다!

237. Media

238. Query?? The

239. @media

240. rule

241. is

242. used

243. to

244. define

245. different

246. style

247. rules

248. for

249. different

250. media

251. types/devices. @media

252. 문법은

253. 다른

254. 미디어

255. 타입/기기에

256. 대해

257. 다른

258. 스타일

259. 규칙을

260. 정의할

261. 때

262. 쓰입니다. 출처:

263. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 상세한

264. 내용은

265. W3C의

266. 문서를

267. 참고하시면

268. 예시와

269. 설명을

270. 볼

271. 수

272. 있어요!

273. http://www.w3.org/TR/css3-mediaqueries/#media0

274. Media

275. Query

276. 기본

277. 문법 @media

278. [

279. only

280. |

281. not

282. ]

283. 미디어

284. 타입

285. and

286. (미디어

287. 속성

288. :

289. 값)

290. {

291. 해당

292. CSS스타일

293. 입력

294. } [참고]

295. HTML4에서는

296. 이렇게

297. 썼었어요~

298. link

299. rel=stylesheet

300. media=mediatype

301. and|not|only

302. (media

303. feature)

304. href=mystylesheet.css

305. 주의!

306. IE8에서는

307. media

308. query

309. 안

310. 먹습니다!!!

311. IE8,

312. 제발

313. 좀

314. 사라져버련ㅠ

315. 미디어

316. 타입:

317. screen과

318. print screen은

319. display가

320. 있는

321. 컴퓨터

322. 모바일

323. 기기에서

324. 보이는

325. 타입을

326. 말하고,

327. print는

328. print

329. style을

330. 정의할

331. 때

332. 쓴다고

333. 합니다...

334. 일단은

335. 보이는

336. 화면을

337. 개발하니까...

338. s..sc...screen?!?!

339. 이외에도

340. HTML4와

341. CSS2까지는

342. 다양한

343. 미디어

344. 쿼리가

345. 제안되었습니다만

346. (all,

347. aural(HTML4),

348. braille,

349. embossed(CSS2),

350. speech(CSS2),

351. handheld,

352. print,

353. projection,

354. screen,

355. tty,

356. tv)  현재는

357. all과

358. screen,

359. print

360. 정도로

361. 압축된

362. 것

363. 같습니다. @media

364. [

365. only

366. |

367. not

368. ]

369. 미디어

370. 타입

371. and

372. (미디어

373. 속성

374. :

375. 값)

376. 미디어

377. 제한자:

378. only

379. or

380. not only와

381. not은

382. 미디어

383. 타입을

384. 제한하는

385. 기능을

386. 합니다.

387. only는

388. 해당

389. 미디어

390. 타입에서만

391. 작동하는

392. 코드가

393. 되고,

394. not은

395. 해당

396. 미디어

397. 타입에서만

398. 작동하지

399. 않는

400. 코드가

401. 됩니다.

402. @media

403. [

404. only

405. |

406. not

407. ]

408. 미디어

409. 타입

410. and

411. (미디어

412. 속성

413. :

414. 값)

415. 미디어

416. 속성 width

417. :

418. 웹페이지의

419. 가로

420. 길이를

421. 판단합니다.

422. (max-나

423. min-을

424. 붙여

425. 쓸

426. 수

427. 있습니다.)

428. height

429. :

431. 세로

432. 길이를

434. (max-나

435. min-을

436. 붙여

437. 쓸

438. 수

439. 있습니다.)

440. device-width

441. :

442. 기기의

443. 실제

444. 가로

445. 길이를

447. device-height

448. :

449. 기기의

450. 실제

451. 세로

452. 길이를

454. orientation

455. :

457. width와

458. height을

459. 구하여

460. width

461. 값이

462. 길면

463. landscape로,

465. height

466. 값이

467. 길면

468. portrait로

470. aspect-ratio

471. :

472. width/height

473. 비율을

475. device-aspect-ratio

476. :

477. 단말기의

478. 물리적인

479. 화면

480. 비율을

482. color-index

483. :

484. 단말기에서

485. 사용하는

486. 최대

487. 색상수를

489. monochrom

490. :

491. 흑백

492. 컬러만을

493. 사용하는

495. 흰색과

496. 검은색

497. 사이의

498. 단계를

500. resolution

501. :

502. 지원하는

503. 해상도를

507. 값으로

508. dip(인치당

509. 도트

510. 수)나

511. dpcm(cm당

512. 도트

513. 수)를

514. 사용합니다.

515. color

516. :

518. 사용하는

519. 최대

520. 색상

521. 수의

522. 비트

523. 수를

524. 판단합니다. @media

525. [

526. only

527. |

528. not

529. ]

530. 미디어

531. 타입

532. and

533. (미디어

534. 속성

535. :

536. 값)

537. 반응형

538. 삼대장 데스크탑/노트북

546. 태블릿

553. 모바일 3가지만

554. 챙기자!

555. CSS에

556. 넣어봅시다! @media

557. (max-width:

558. 400px)

559. {

562. html

563. {

564. background:

565. red;

566. }

567. }

568. @media

569. (min-width:

570. 401px)

571. and

572. (max-width:

573. 800px)

574. {

577. html

578. {

579. background:

580. green;

581. }

582. }

583. @media

584. (min-width:

585. 801px)

586. {

589. html

590. {

591. background:

592. blue;

593. }

594. }

595. 추천

596. 사이즈 구

598. 분 사

599. 이

600. 즈 모

601. 바

602. 일 768px(600px) 태

603. 블

604. 릿 992px PC 1200px 더

605. 큰

606. 화면 768px(600px) 1024px(992px) 1824px(1200px) 여기저기서

607. 추천되는

608. 사이즈입니다~

609. 절대적이진

610. 않아요!

611. 다음은

612. position:

613. absolute와

614. float를

615. 적절히!!! float는

616. 화면

617. 크기에

618. 따라

619. 아래로

620. 떨어지고

621. 흐르기

622. 때문에

623. 화면

624. 크기

625. 조절(min-width,

626. max-width)을

627. 잘

628. 해주셔야

629. 합니다.

630. 어떤

631. 크기에도

632. 자연스럽고

633. 적절하게

634. 배치하는

635. 것이

636. 실력!!! position:

637. absolute로

638. 찍으면

639. 화면

640. 크기

641. 변화에

642. 반응하지

643. 않습니다!

644. 그러므로

645. 고정형

646. 레이아웃과

647. 유동형

648. 레이아웃을

649. 잘

650. 구분해서

651. 사용하는

652. 것이

653. 좋겠죠?? 아직도

654. CSS

655. Layouting이

656. 어렵다면

657. http://www.slideshare.net/jaewoow/web-ui-basic-css2

658. 글꼴

659. 사이즈도

660. 반응형!!! 글꼴

661. 사이즈로

662. px과

663. em을

664. 썼는데

665. rem이란

666. 것도

667. 있습니다!!!

668. rem은

669. 해당

670. html

671. 태그에

672. 지정한

673. font-size(단위:

674. px)에

675. 비례한다고

676. 합니다!!!

677. 여기

678. 포스팅

679. 참고하시길...

680. http://naradesign.net/wp/2014/11/06/2077/

681. 추가로

682. ‘%’

683. 잘

684. 쓰면

685. 되는건

686. 아시죠?

687. 이제

688. Grid

689. System을

690. 써봅시다!

691. 그

692. 유명한

693. 부트스트랩도

694. grid

695. system으로

696. 움직인다네요;;;

697. 실습

698. 코드를

699. 여기서

700. 다운

701. 받으세염

702. https://github.com/WooJaeWoo/WEB_UI_BASIC/tree/master/%5BWeek6%5D%20Mobile_WEB

703. 12

704. Grid

705. System Grid

706. System은

707. 화면을

708. 12개의

709. column으로

710. 자릅니다. 이미지출처:

711. http://www.artcontext.org/edu/cuny/webdesign/gridSystems

712. 굳이

713. Grid로

714. 나눈다면... 꼭

715. 이렇지는

716. 않겠지만;;;

717. 그래,

718. 일단

719. 잘랐는데

720. 이게

721. 반응형이랑

722. 무슨

723. 상관?

724. 화면

725. 사이즈가

726. 바뀌어도

727. 그

728. 화면을

729. 여전히

730. 12등분

731. 하거든!!! 이미지출처:

732. http://www.nextree.co.kr/p8622/ grid.css

733. 파일을

734. 살짝

735. 열어서

736. 어떻게

737. 되어있는지

738. 확인해봅시다.

739. Grid

740. System

741. 사용법

742. 1단계 div

743. class=“row”

744. div

745. class=“col

746. s??

747. m??

748. l??/div

749. div

750. class=“col

751. s??

752. m??

753. l??/div

754. div

755. class=“col

756. s??

757. m??

758. l??/div

759. /div 그리드의

760. 기본틀은

761. 다음과

762. 같습니다.

763. 디자인

764. 단위

765. 한

766. 줄을

767. class=“row”로

768. 선언한

769. 뒤,

770. 필요한

771. column

772. 수만큼

773. div를

774. 넣어줍니다. 굳이

775. 꼭

776. div가

777. 아니어도

778. block

779. element면

780. 사용가능합니다!

781. Grid

782. System

783. 사용법

784. 2단계 div

786. div

787. class=“col

788. s??

789. m??

790. l2/div

791. div

792. class=“col

793. s??

794. m??

795. l4/div

796. div

797. class=“col

798. s??

799. m??

800. l6/div

801. /div 한

802. row에

803. l(큰

804. 화면)기준으로

805. 숫자의

806. 합이

807. 12가

808. 되게

809. 잡아줍니다.

810. 이렇게

811. 되면

812. 전체

813. 화면에서의

814. 비율을

815. 잡을

816. 수

817. 있습니다. 큰

818. 사이즈

819. 화면에서

820. 한

821. row에

822. col

823. div가

824. 차지하는

825. 비율이

826. 2:4:6이

827. 됩니다. 이거

828. 숫자

829. 일

830. 아니고

831. 영어

832. 엘입니다!

833. Grid

834. System

835. 사용법

836. 3단계 div

838. div

839. class=“col

840. s??

841. m12

842. l2/div

843. div

844. class=“col

845. s??

846. m6

847. l4/div

848. div

849. class=“col

850. s??

851. m6

852. l6/div

853. /div 한

854. row에

855. m(중간

856. 화면)기준으로

857. 배치하고

858. 싶은

859. 비율을

860. 정합니다.

861. 꼭

862. 12를

863. 맞추지

864. 않아되

865. 괜찮아요,

866. 반응형으로

867. 움직일

868. 사이즈를

869. 만듭니다. 이렇게

870. 하면

871. 중간

872. 사이즈

873. 화면에서

874. 첫번째

875. col이

876. 한

877. 줄을

878. 다

879. 차지하고(m12),

880. 나머지

881. 두

882. 개는

883. 화면의

884. 반씩(m6,

885. m6)

886. 차지하게

887. 됩니다.

888. Grid

889. System

890. 사용법

891. 4단계 div

893. div

894. class=“col

895. s12

896. m12

897. l2/div

898. div

899. class=“col

900. s12

901. m6

902. l4/div

903. div

904. class=“col

905. s12

906. m6

907. l6/div

908. /div 같은

909. 방식으로

910. s(작은

911. 화면)일

912. 경우에

913. 사용할

914. 비율을

915. 정합니다. 작은

916. 사이즈

917. 화면에서

918. 각각

919. 한

920. 줄씩(s12,

921. s12,

922. s12)

923. 다

924. 차지하게

925. 됩니다.

926. Grid

927. System

928. 사용법

929. 5단계 div

930. id=“a”

932. div

933. id=“b”

934. class=“col

935. s12

936. m12

937. l2/div

938. div

939. id=“c”

940. class=“col

941. s12

942. m6

943. l4/div

944. div

945. id=“d”

946. class=“col

947. s12

948. m6

949. l6/div

950. /div id를

951. 정해서

952. CSS

953. 스타일도

954. 먹일

955. 수

956. 있습니다. 클래스에

957. 이름을

958. 더

959. 추가해서

960. 스타일

961. 입히셔도

962. 무방하나

963. 분리해서

964. 관리하는게

965. 편하므로

966. id를

967. 쓰는

968. 것을

969. 추천합니다!

970. Grid

971. System

972. 사용법

973. 6단계 그리드

974. 안에

975. 있는

976. 세부

977. 태그

978. 요소들은

979. box-model(margin,

980. border,

981. padding)을

982. 이용해

983. 원하는

984. 곳에

985. 배치합니다.

986. 마치

987. position:

988. relative안에

989. 있는

990. position:absolute를

991. 다룬다는

992. 기분으로!

993. Grid

994. System의

995. 장단점 장점 단점 media쿼리를

996. 일일이

997. 작업할

998. 필요가

999. 없어서

1001. 기기

1002. 대응이

1003. 편해집니다.

1004. 또

1005. 격자에

1006. 맞는

1007. 디자인

1008. 덕분에

1009. 정돈된

1010. 느낌의

1011. 페이지를

1012. 만듭니다. HTML

1013. 코드에

1014. 디자인

1015. 요소가

1016. 개입하게

1017. 되기

1018. 때문에

1019. 구조와

1020. 디자인을

1021. 완벽하게

1022. 분리할

1023. 수

1024. 없습니다.

1025. 그리드

1026. 시스템을

1027. 이용해서

1028. 만들어

1029. 봅시다!!!

1030. grid.html,

1031. grid.css,

1032. grid_mission.css를

1033. 다운

1034. 받아서

1035. 손봅시당~ 미션!!!

1036. 사실

1037. 우리는

1038. 아직

1039. 모바일

1040. 대응

1041. JS를

1042. 건들지도

1043. 않았다!!!

1044. ㅠ_ㅠ

1045. 터치

1046. 이벤트에

1047. 대해

1048. 또

1049. 준비하겠습니다~

1050. 결론 모바일

1051. WEB

1052. 개발의

1053. 가장

1054. 불편한

1055. 점은

1056. 아마도

1057. 기기의

1058. 파편화

1059. 아닐까요?

1060. 오늘

1061. 스터디에서

1062. 파편화에

1063. 대응할

1064. 수

1065. 있는

1066. 이런저런

1067. 방법들을

1068. 보여드렸는데,

1069. 결국

1070. 서비스의

1071. 성격에

1072. 가장

1073. 부합하는

1074. 방식을

1075. 잘

1076. 선택해서

1077. 최선의

1078. UI가

1079. 나올

1080. 수

1081. 있도록

1082. 코딩하는

1083. 것이

1084. 우리의

1085. 몫이겠죠.

1086. ‘정답은

1087. 없다’라는

1088. 결론이

1089. 가장

1090. 뻔하지만

1091. 맞는

1092. 얘기네요.

1093. 모바일

1094. WEB

1095. 잘

1096. 공부해두면

1097. 웹앱도

1098. 만들

1099. 수

1100. 있을

1101. 것

1102. 같군요

1103. 후훗

1104. ㅋ

1105. 열심히

1106. 공부합시다!!!

1107. 고생하셨습니다

1108. :)

[WEB UI ADVANCED] Mobile WEB 개발하기

Recomendados

Recomendados

Más contenido relacionado

Similar a [WEB UI ADVANCED] Mobile WEB 개발하기

Similar a [WEB UI ADVANCED] Mobile WEB 개발하기 (20)

Más de Jae Woo Woo

Más de Jae Woo Woo (17)

[WEB UI ADVANCED] Mobile WEB 개발하기