The document discusses front-end web development using Flask and Bootstrap in Python. It introduces front-end development, the main front-end components of HTML, CSS, and JavaScript, and how they work together with the back-end. It also explains what Bootstrap is and how it can be used to simplify front-end design.

1. 파이썬

2. 플라스크로

3. 배우는

4. 웹프로그래밍

5. #2

28. ABCD

29. Foundation

30.
스노우키위,

31. 한

32. 성

33. 일

35. #2. 부트스트랩(Bootstrap) 으로
프론트엔드(Front-end) 개발하기

36. 0. 프롤로그

37. 에디터 변경
• 에디터를

38. brackets

40. 으로

41. 변경

42. (돈내라고

43. 뜸

44. 짜증)
https://github.com/adobe/brackets/releases/tag/release-0.44
맥사용자

45. :

46. Brackets.Release.0.4.4.dmg
윈도우

47. 사용자

48. :

49. Brackets.Release.0.4.4.msi

50. 에디터 변경
어두운

51. 테마가

52. 좋으신

53. 분은

54. 변경을

55. ..

56. 1. 프론트엔드(Front-end) 개발이란?

57. 프론트엔드(Front-end)란?
브라우져의

58. 영역 서버의

59. 영역
전달받은

60. HTML

61. 을

62. 해석해서

63. 화면에

64. 보여줌 HTML

66. 형태로

67. 가공한

68. 데이터를

69. 보냄
인터넷
HTML

70. 프론트엔드(front-end)란?
백

71. 엔드(back-end)

72.
서버,

73. 플라스크,

74. 데이터베이스
프론트

75. 엔드(front-end)

76.
html,

77. css,

78. javascript

79. 웹서비스 구조도
사용자 인터넷 서버
처리된 HTML
데이터베이스
보고 싶다.
데이터
1
2
3
여기

80. 2. 프론트엔드(Front-end) 구성 요소
(HTML, CSS, Javascript)
*

81. 참조

83. http://www.w3schools.com/html/default.asp

84. HTML (HyperText Markup Language)
•브라우져에서

85. 처리

87. 플라스크에서

88. 작성된

89. html

90. 파일을

91. 브라우져가

92. 처리
• 브라우져에서

93. 처리

94. 가능하도록

95. 데이터의

96. 규격화

97. (약속)

99. 이렇게

100. 보내주면

101. 나는

102. 이렇게

103. 처리할께
•태그로

104. 구성됨

105. html

106. /html
•html,

107. 자바스크립트와

108. 함께

109. 사용

110. HTML
(구조)
!DOCTYPE

111. html

112.
html

113.
!

114. head

117. meta

118. charset=utf-8

121. title타이틀

122. 입니다./title

124. /head

125.
!

126. body

129. h1안녕/h1

132. p나는

133. html

134. 이야

135. :D/p

137. /body

138.
!
/html
1.

139. hello.html

140. 로

141. 저장

142.
2.

143. 기본적인

144. 구조

145.
html

147. head/head

149. body/body

150.
/html

151.
!
3.

152. title

153. /title

155.
은

156. 뭘까요?

157.
!
4.

158. meta

159. charset=“utf-8

160.
은

161. 또

162. 뭘까요?
head

163.
/head
body

164.
/body
html

165.
/html
hello.html

166. HTML
(태그 기본)
html

167. /html 항상

168. 짝이있다.

169. (TAG)
img

170. src=“blarblar”

171. / 짝으로

172. 끝나지

173. 않는

174. 태그는

175. /

176. 로

177. 끝낸다.
!--

178. 여기에

179. 넣습니다.

180. --
주석

181. 처리

182. 이부분은

183. 읽지

184. 않는다.

186.
메모용

187. (파이썬은

188. #)
h1/h1
글자

189. 크기

190. 변경

191.
h1,

192. h2,

193. h3

194. …⋯

195. 으로

196. 변경

197. 해보면

198. 알게됨

200. HTML
(forms)
• form

201. /form

202. 사이에

203. 위치

204.
• 입력

205. 태그들

206.
• type

207. 과

208. name

209. 속성으로

210. 구분된다.

211.
• Text

213. form

216. First

217. name:

218. input

219. type=text

220. name=firstnamebr

223. Last

224. name:

225. input

226. type=text

227. name=lastname

229. /form
• Password

231. form

234. Password:

235. input

236. type=password

237. name=pwd

239. /form

240. HTML
(forms)
• radio

242. 와

244. Checkbox

245. 인

246. 경우

247. value

248. 도

249. 있어야함
• radio

250.
form

252. input

253. type=radio

254. name=sex

255. value=maleMalebr

257. input

258. type=radio

259. name=sex

260. value=femaleFemale

261.
/form
• checkbox

262.
form

264. input

265. type=checkbox

266. name=vehicle

267. value=BikeI

268. have

269. a

270. bikebr

272. input

273. type=checkbox

274. name=vehicle

275. value=CarI

276. have

277. a

278. car

280.
/form
• submit

281. 버튼

282.
form

283. name=input

284. action=“/login

285. method=get

287. Username:

288. input

289. type=text

290. name=user

292. input

293. type=submit

294. value=Submit

295.
/form

296. HTML (HyperText Markup Language)
소스

297. 보기
(소스보기)
소스

298. HTML
(실습1 - 이미지 넣기)
hello.html

299. 의

300.
body

301. /body

302. 사이에

303. 넣는다.

304.
img

305. src=“여기에

306. 붙여넣기”/
1
2
아무

307. 이미지나

308. URL

309. 복사

311. HTML
(실습2 - 링크)
1
아무

312. URL

313. 복사
2 a

314. href=“여기로

315. 복사“유튜브

316. 보러가기/a

318. HTML
(실습3 - 유튜브 동영상)
1 https://www.youtube.com/watch?v=VpZmIiIXuZ0
2

319. body

322. !--

323. 여기에

324. 넣습니다.

325. --

327. 3

328. iframe

329. width=560

330. height=315

331. src=“http://www.youtube.com/embed/VpZmIiIXuZ0”

332. frameborder=0

333. allowfullscreen/
iframe

335. /body

336. CSS (Cascading Style Sheets)
•html

337. 처럼

338. 브라우져가

339. 처리합니다.
•html

340. 형태(디자인)을

341. 바꾸거나

342. 꾸밀

343. 수

344. 있습니다.

346.
(html

347. 에는

348. 디자인

349. 요소가

350. 없음)
•head

351. 와

352. /head

353. 사이에

354. 위치합니다.
head

357. style

360. 여기에

361. CSS

362. 가

363. 위치

365. /style

366.
/head
•기본구조는

367. 다음과

368. 같다.
body

369. {

374. background-color:

375. #d0e4fe;

376.
}
•CSS3의

377. 경우는

378. 그림자,

379. 그라데이션,

380. 그래픽,

381. 플래시

382. 대체

383. CSS
style

384.
body

385. {

390. background-color:

391. #d0e4fe;

392.
}

393.
!
h1

394. {

399. color:

400. orange;

405. text-align:

406. center;

407.
}

408.
!
p

409. {

414. font-family:

415. Times

416. New

417. Roman;

422. font-size:

423. 20px;

424.
}

425.
/style
(구조)
배경색을

426. 바꾼다.

427.
body

428. 태그에

429. 적용된다.
h1태그에

430. 적용된다.

431.
h1

432. 태그는

433. 글씨

434. heading
p

435. 태그에

436. 적용된다.

437.
폰트

438. 변경,

439. 사이즈

440. 변경

441. CSS
(선택자)
!DOCTYPE

442. html

443.
html

444.
head

446. meta

447. charset=utf-8

448.
!!!
/head

449.
body

451. p

452. 기본태그

453. /p

455. p

456. id=para1

457. 아이디

458. para1

459. /p

461. h1

462. class=centerCSS

463. 클래스가

464. 적용된

465. 태그/h1

467. p

468. class=center클래스가

469. 적용된

470. 태그/p

472. h2

473. heading

474. 1

475. /h2

477. h3

478. heading

479. 2

480. /h3

482. h4

483. heading

484. 3

485. /h4

486.
/body

487.
/html
style

488.
p

489. {

494. text-align:

495. center;

500. color:

501. red;

502.
}

504.
!
#para1

505. {

510. text-align:

511. center;

516. color:

517. blue;

518.
}

519.
!
.center

520. {

525. text-align:

526. center;

531. color:

532. black;

533.
}

534.
!
p.center

535. {

540. text-align:

541. center;

546. color:

547. green;

548.
}

549.
!
h2,

550. h3,

551. h4

552. {

557. text-align:

558. center;

563. color:

564. crimson;

565.
}

566.
/style
ch2/hello2.html
여기

567. CSS
(폰트:font)
!DOCTYPE

568. html

569.
html

570.
head

572. meta

573. charset=utf-8

574.
!!!!
/head

575.
body

577. p

578. 폰트

579. 적용

580. /p

581.
/body

582.
/html
style

583.
p

584. {

586. font-family:

587. Times

588. New

589. Roman,

590. Times,

591. serif;

593. font-style:

594. italic;

596. font-size:

597. 40px;

599. font-size:

600. 2.5em;

601.
}

603.
/style
ch2/hello3.html
여기

604. CSS
(패딩:padding)
!DOCTYPE

605. html

606.
html

607.
head

609. meta

610. charset=utf-8

611.
!!!!
/head

612.
body

614. p패딩이

615. 적용되지

616. 않은

617. 상태/p

619. p

620. class=padding패딩이

621. 적용된

622. 상태/p

623.
/body

624.
/html
style

625.
p

626. {

631. background-color:

632. crimson;

633.
}

634.
!
p.padding

635. {

640. padding-top:

641. 25px;

646. padding-right:

647. 50px;

652. padding-bottom:

653. 25px;

658. padding-left:

659. 50px;

660.
}

661.
/style
ch2/hello4.html
여기

662. CSS
(마진:margin)
!DOCTYPE

663. html

664.
html

665.
head

667. meta

668. charset=utf-8

669.
!!!!
/head

670.
body

672. p마진이

673. 적용되지

674. 않은

675. 상태/p

677. p

678. class=ex마진이

679. 적용된

680. 상태/p

681.
/body

682.
/html
style

683.
p

684. {

689. background-color:

690. crimson;

691.
}

692.
!
p.ex

693. {

698. margin-top:

699. 100px;

704. margin-bottom:

705. 100px;

710. margin-right:

711. 150px;

716. margin-left:

717. 50px;

718.
}

719.
/style
ch2/hello5.html
여기

720. 자바스크립트 (JAVASCRIPT) ?
• html

721. 페이지를

722. 동적으로

723. 활용

724. 할

725. 수

726. 있도록

727. 해주는

728. 프로그래밍
• script

729. /script

730. 속에

731. 위치한다.
• 주석

732. (파이썬은

733. #,

734. html

735. 은

736. !--

737. --)
//

738. 주석입니다.

739.
/*

741. 여러줄

742. 주석입니다.

743.
*/
• 다양한

744. 소프트웨어에

745. 탑재되어

746. 유망언어로

747. 전환중

750. (node.js,

751. mongodb…⋯)

752. 기본 구성
!DOCTYPE

753. html

754.
html

755.
head

757. title

758. 자바스크립트

759. 테스트

760. /title

762. meta

763. charset=utf-8

764.
!!!!
/head

765.
body

767. p자바스크립트

768. 테스트/p

769.
/body

770.
/html
script

772. var

773. x

774. =

775. 5;

777. var

778. y

779. =

780. 10;

782. document.write(x+y);

783.
/script
ch2/hello6.html
여기

784. 자바스크립트 (JAVASCRIPT) ?
(에러확인)
요소검사
에러확인

785. 파이썬 자바스크립트
기본 변수명

786. =

787. 대입값 var

788. 변수명

789. =

790. 대입값

791. ;
숫자형
x

792. =

793. 5

794.
y

795. =

796. 10

797.
print

798. x+y
var

799. x

800. =

801. 5;

802.
var

803. y

804. =

805. 10;

806.
document.write(x+y);
문자형
lastName

807. =

808. “Johnson”

809.
print

810. lastName
var

811. lastName

812. =

813. “Johnson;

814.
document.write(lastName);
변수

815. 함수
파이썬 자바스크립트
구성
def

816. 함수명(인자):

818. 동작

819. 내용

821. return

822. 값
function

823. 함수명(인자)

824. {

826. 동작

827. 내용

829. return

830. 값

831.
}
예제
def

832. test_function():

834. a

835. =

836. 5

838. b

839. =

840. 7

842. c

843. =

844. a+b

846. return

847. c
function

848. test_function()

849. {

851. var

852. a

853. =

854. 5;

856. var

857. b

858. =

859. 7;

861. var

862. c

863. =

864. a+b;

866. return

867. c;

868.
}

869. if
파이썬 자바스크립트
기본
if

870. (

871. 참

872. ):

873. #

874. 만약

875. 참이면

876.
elif

877. (

878. 참

879. ):

880. #

881. 없을수도

882. 있고

883. 있을수도

884. 있다.

885.
elif

886. (

887. 참

888. ):

889.
else:

890. #

891. 둘다아니라면.

892. 없을수도

893. 있고

894. 있을수
도

895. 있다.
if

896. (참)

897. {

898. //

899. 만약

900. 참이면

901.
}

902. else

903. if

904. (참){

905. //

906. 없을수도

907. 있고

908. 있을수도

909. 있다.

910.
}

911. else

912. if

913. (참){

914.
}

915. else

916. {

918. //

919. 둘다아니라면.

920. 없을수도

921. 있고

922. 있을수도

923. 있다.

924.
}
예제
if

925. (1

927. 2

928. ):

929. #

930. 1이

931. 2보다

932. 작다면

939. print

940. “1이작다”

941.
elif

942. (2

943. 3):

944. #

945. 2가

946. 3보다

947. 작다면

954. print

955. “2가

956. 3보다

957. 작다면”

958.
else:

959. #

960. 둘다아니면

966. print

967. “둘다

968. 아니다.”
if

969. (12)

970. {

977. alert(“1이작다”);

978.
}

979. else

980. if

981. (23)

982. {

989. alert(“2가

990. 3보다

991. 작다면”);

992.
}

993. else

994. {

1000. alert(“둘다

1001. 아니다.”);

1002.
}
최소형 if

1003. (1

1005. 2

1006. ):

1007. #

1008. 1이

1009. 2보다

1010. 작다면

1017. print

1018. “1이작다”
if

1019. (1

1021. 2)

1022. {

1029. alert(“1이

1030. 2보다

1031. 작다”);

1032.
}

1033. for
파이썬 자바스크립트
기본 for

1034. i

1035. in

1036. range(시작값,

1037. 끝값):

1039. #

1040. 반복실행할

1041. 내용
for

1042. (var

1043. 변수=1;

1044. 변수끝값;

1045. 변수++)

1046. {

1048. //

1049. 반복실행할

1050. 내용

1051.
}
예제 for

1052. i

1053. in

1054. range(1,

1055. 10):

1057. print

1058. “i

1059. 값은

1060. ”

1061. +

1062. i
for

1063. (var

1064. i=0;

1065. i10;

1066. i++)

1067. {

1069. document.write(“i

1070. 값은

1071. ”

1072. +

1073. i

1074. +”br/”);

1075.
}

1076. JAVASCRIPT
(if문: 성적)
!DOCTYPE

1077. html

1078.
html

1079.
head

1081. title

1082. 자바스크립트

1083. 테스트

1084. /title

1086. meta

1087. charset=utf-8

1088.
!!!!
/head

1089.
body

1091. p자바스크립트

1092. 테스트/p

1093.
/body

1094.
/html

1095. script

1098. /*

1099. 성적

1100. */

1103. var

1104. score

1105. =

1106. 0;

1110. document.write(나는

1111. );

1114. if

1115. (

1116. score

1117. =

1118. 4.3)

1119. {

1123. document.write(A+

1124. 신이지);

1127. }

1128. else

1129. if

1130. (score

1131. =

1132. 3.0)

1133. {

1134. //

1135. B0

1139. document.write(B

1140. 일반인이야

1141. );

1144. }

1145. else

1146. if

1147. (score

1148. =

1149. 2.0)

1150. {

1151. //

1152. C

1156. document.write(C

1157. 오락문화의

1158. 선구자

1159. );

1162. }

1163. else

1164. {

1168. document.write(F

1169. 시대를

1170. 앞서가는

1171. 혁명의

1172. 씨앗);

1175. }

1178. document.write(br/);

1179. //

1180. 개행

1181.
!

1183. /*

1184. F

1185. */

1188. var

1189. isF

1190. =

1191. true;

1192. //

1193. 참

1194. 또는

1195. false(거짓)

1198. document.write(아!!

1199. );

1202. if

1203. (isF)

1204. {

1208. document.write(죽어야지..);

1211. }

1212. else

1213. {

1217. document.write(살았다.);

1220. }

1223. document.write(“br/);

1224. //

1225. 개행

1226.
!

1228. /*

1229. A

1230. */

1233. var

1234. isA

1235. =

1236. true;

1237. //

1238. 참

1239. 또는

1240. false(거짓)

1243. document.write(나는

1244. );

1247. if

1248. (isA)

1249. {

1253. document.write(현

1254. 체제의

1255. 수호자.);

1258. }

1260. /script
ch2/hello6.html
여기

1261. JAVASCRIPT
(for문;구구단)
!DOCTYPE

1262. html

1263.
html

1264.
head

1266. title

1267. 자바스크립트

1268. 테스트

1269. /title

1271. meta

1272. charset=utf-8

1273.
!!!!
/head

1274.
body

1276. p자바스크립트

1277. 테스트/p

1278.
/body

1279.
/html

1280. script

1283. /*

1284. 원하는

1285. 단만

1286. */

1289. var

1290. num

1291. =

1292. 3;

1293. //

1294. 3단

1297. document.write(num

1298. +

1300. 단

1301. br

1302. /);

1305. for

1306. (var

1307. i=1;

1308. i10;

1309. i++)

1310. {

1314. document.write(num

1315. +

1317. *

1319. +

1320. i

1321. +

1323. =

1324. );

1325. //

1326. 3

1327. *

1328. 1

1329. =