3주 CSS Basic
- 1. css WEB
- 2. UI
- 3. BASIC
- 4. |
- 7. 3주차
- 8. 목표 웹페이지에
- 9. ٲ을
- 10. 어떻게
- 11. 적용하는지
- 12. 안다.
- 13. cascading과
- 14. 상속을
- 15. 이해하고
- 16. 있다
- 17. css의
- 18. 기본적인
- 19. selector를
- 20. 다룰
- 21. 줄
- 22. 안다.
- 23. font,
- 24. background
- 25. 등의
- 26. 기본
- 27. 속성을
- 28. 적용할
- 29. 줄
- 30. 안다
- 31. BOX
- 32. MODEL을
- 33. 이해한다.
- 34. position
- 35. 으로
- 36. 내
- 37. 프로젝트의
- 38. 영역을
- 39. 만들
- 40. 수
- 41. 있다
- 42. Quiz
- 44. 1)
- 45. 빨간
- 46. 색이
- 47. 되는
- 48. 부분은
- 49. 무엇인가요?,
- 50. 그
- 51. 이유도
- 52. 적어보세요.
- 53. ! div id=jisu! spanabc/span! spanefg/span! p첫번째 단락/p! p두번째 단락/p! /div #jisu p:nth-child(2) {! color : red;! } 2)
- 54. 다음의
- 55. 결과로
- 56. 떤
- 57. 색이
- 58. 나올까요?
- 59. 이유는
- 60. 무엇인가요?
- 61. .myClass { color : red; } ! #myId { color : blue; } 1분반
- 63. 2분반
- 64. 1)
- 65. 아래를
- 66. 붉은
- 67. 색으로
- 68. 지정할
- 69. 수
- 70. 있는
- 71. CSS를
- 72. 작성해보세요.
- 73. 여러가지
- 74. 방법이
- 75. 있다면
- 76. 다
- 77. 작성합니다
- 78. 그렇게
- 79. 작성한
- 80. 이유도
- 81. 적어주세요. body! ! section! h2단락정보/h2! ! ! p첫번째 단락입니다./p! ! ! p두번째 단락입니다./p! ! ! p세번째 단락입니다./p! ! /section! /body
- 82. 1) 다음의
- 83. css에는
- 84. 몇가지
- 85. 문제점이
- 86. 있다.
- 87. 모두
- 88. 찾아
- 89. 수정하고
- 90. 이유를
- 91. 적으세요
- 92. 결과는
- 93. ‘두번째
- 94. 단락입니다’
- 95. 부분만
- 96. 붉은색으로
- 97. 나와야
- 98. 하며
- 99. 다른
- 100. 엘리먼트와는
- 101. 간 격이
- 102. 아래
- 103. 숫자(10)만큼
- 104. 있어야
- 105. 합니다. 3분반
- 106. HTML CSS body! ! section! h2단락정보/h2! ! ! p첫번째 단락입니다./p! ! ! p두번째 단락입니다./p! ! ! p세번째 단락입니다./p! ! /section! /body #section h2 p:nth-child(2){! ! padding : 10pt;! background-color : red! }
- 107. 숙제확인 HTML5
- 108. Semantic
- 109. TAG
- 110. -
- 111. nav,
- 112. section
- 113. 의
- 114. 사용
- 115. ID
- 116. 이름
- 117. 공백
- 118. UL
- 119. /
- 120. LI
- 121. 의
- 122. 폭넓은
- 123. 사용
- 124. Class,
- 125. id
- 126. 무조건
- 127. 필요한가요?
- 128. c s s
- 131. 화면의
- 132. 디자인을
- 133. 입히다
- 134. 䳧갶
- 135. 없을
- 136. 때
- 137. 떤지
- 138. 우린
- 139. 봤다.
- 140. C S S
- 141. 적 용 하 기
- 142. selector(선택자) property value span { color :red; }
- 143. ٲ을
- 144. HTML페이지에
- 145. 적용하는
- 146. 세
- 147. 가지
- 148. 방법
- 149. inline
- 150. internal
- 151. external
- 153. html
- 154. 태그
- 155. 안에다가
- 156. inline
- 157. !DOCTYPE html html head meta charset=”utf-8” / titleNEXT !/title /head ! body span style=”color:red;” HELLO NEXT ! /span /body /html
- 158. style
- 159. 태그로
- 160. 지정하기
- 161. internal
- 162. !DOCTYPE html html head meta charset=”utf-8” / titleNEXT !/title style span { color :red; } /style /head ! body span HELLO NEXT ! /span /body /html
- 163. 외부파일(.)로
- 164. 지정하기
- 165. external
- 166. span { color :red; } !DOCTYPE html html head meta charset=”utf-8” / titleNEXT !/title link rel=”stylesheet” type=”text/css” href=”main.css” / /head ! body span HELLO NEXT ! /span /body /html main.css
- 167. 떤
- 168. 방법이
- 169. 왜
- 170. 더
- 171. 좋을까? inline
- 172. internal
- 173. external
- 174. 내
- 175. 프로젝트의
- 176. css
- 177. 파일을
- 178. 만들고
- 179. 분리해보자. #wrap { color : pink; }
- 180. cascading
- 181. 䳧
- 182. 여러가지
- 183. 스타일정보를
- 184. 기반으로
- 186. 최종적으로
- 187. ‘경쟁’에
- 188. 의해서
- 189. 적절한
- 190. 스타일이
- 191. 반영된다.
- 193. span { color : red; } ! span { color : blue; } blue
- 194. span { color : red; } ! span { color : blue; } blue 동일하면
- 195. 나중에
- 196. 것
- 197. body span { color : red; } ! span { color : blue; } red
- 198. body span { color : red; } ! span { color : blue; } red 구체적인
- 199. 것이
- 200. 있다면
- 201. 먼저
- 202. #a { color : red; } ! .b { color : blue; } div id=a class=“b text.. /div red
- 203. #a { } ! .b { } div id=a class=“b red color : red; color : blue; text.. id
- 206. class
- 208. element /div
- 209. Google search ! ‘css specificity’
- 210. 미션 내
- 211. 프로젝트의
- 212. 제일
- 213. 바깥쪽
- 214. 영역의
- 215. 넓이,높이를
- 216. 지정하자,
- 217. ex)width
- 218. :
- 219. 1000px;
- 221. 미션 중앙정렬을
- 222. 해보자
- 224. (margin을
- 225. 이용한
- 226. 중앙정렬
- 227. 방법
- 228. 검색)
- 229. 상속
- 230. css
- 231. 속성은
- 232. 위
- 233. 태그에
- 234. 상속된다.
- 235. 뒤에
- 236. 나오는
- 237. box관련
- 238. 스타일은
- 239. 제외 (border,
- 240. padding,
- 241. margin)
- 242. body
- 243. {
- 244. color
- 245. :red
- 246. } body
- 247. div
- 248. id=”jisu”
- 250. div
- 257. span
- 258. span
- 259. tag
- 260. /span
- 262. /div
- 264. span
- 265. span
- 266. tag
- 267. 2
- 268. /span
- 269. /div
- 270. bod
- 271. CSS
- 272. Selector
- 273. WEB
- 274. UI
- 275. 개발이라는
- 276. 거..
- 277. DOM
- 278. 을
- 279. 찾고
- 280. 지우고
- 281. 바꾸고
- 282. 변경하고
- 283. ..뭐
- 284. 그런거
- 285. 아니겠어요?
- 286. !
- 288. WEB
- 289. UI
- 290. 개발이라는
- 291. 거..
- 292. DOM
- 293. 을
- 294. 찾고
- 295. 지우고
- 296. 바꾸고
- 297. 변경하고
- 298. ..뭐
- 299. 그런거
- 300. 아니겠어요?
- 301. !
- 302. 일단
- 303. 찾아야지.
- 305. css
- 306. selector
- 308. HTML의
- 309. 요소를
- 311. tag,
- 312. id,
- 313. class,
- 314. html
- 315. 태그속성등을
- 316. 통해
- 317. 쉽게
- 318. 찾아주는
- 319. 방법
- 321. css
- 322. selector
- 324. 기본
- 326. Գ에
- 327. ٲ을
- 328. 지정하기
- 329. 위해서,
- 331. 3가지
- 332. 기본
- 333. 선택자를
- 334. 사용할
- 335. 수
- 336. 있음
- 337. tag
- 338. id
- 339. class
- 341. ٲ로
- 342. 지정하기.
- 343. !DOCTYPE html html head meta charset=”utf-8” / titleNEXT !/title style span { color :red; } /style /head ! body span HELLO NEXT ! /span /body /html
- 344. 로
- 345. 지정하기 !DOCTYPE html html head meta charset=”utf-8” / titleNEXT !/title style #spantag { color :red; } /style /head ! body span id=”spantag” HELLO NEXT ! /span /body /html
- 346. class
- 347. 로
- 348. 지정하기 !DOCTYPE html html head meta charset=”utf-8” / titleNEXT !/title style .spanClass { color :red } /style /head ! body span class=”spanClass” HELLO NEXT ! /span /body /html
- 349. 미션 내
- 350. 프로젝트의
- 351. li에
- 352. 기본
- 353. ٲ을
- 354. reset
- 355. 해주자.
- 356. 원하는
- 357. 영역의
- 358. 글자색(color)을
- 359. 반영해보자.
- 360. css
- 361. selector
- 364. 다양한
- 365. 활용
- 367. id,class
- 368. 요소
- 369. 선택자와
- 370. 함께
- 371. 활용
- 372. ! #myid {color : red} div.myclassname { color : red}
- 373. 그룹
- 374. 선택
- 375. h1, span, div { color :red } h1, span, div#id {color : red} h1. span, div.classname { color : red}
- 376. 위
- 377. 요소
- 378. 선택
- 379. (공백) 자식
- 380. 선택
- 381. (
- 383. ) #jisu span { color :red } div id=”jisu” div span span tag /span /div span span tag 2 /span /div #jisu span { color :red } div id=”jisu” div span span tag /span /div span span tag 2 /span /div
- 384. 번째
- 385. 자식요소를
- 386. 선택
- 387. (nth-child) #jisu
- 389. p:nth-child(2)
- 390. {
- 391. color
- 392. :red
- 393. } div id=”jisu”! h2단락 선택/h2! p첫번째 단락입니다/p! p두번째 단락입니다/p! p세번째 단락입니다/p! p네번째 단락입니다/p! /div 떤
- 394. 것이
- 395. 선택될까?
- 396. 그밖의
- 397. selector
- 399. 미션 아래
- 400. 접속해서,
- 402. 속성
- 403. 선택자를
- 404. 사용해서
- 406. ‘nhn’
- 407. 문자열을
- 408. 포함하는
- 409. link에만
- 410. 빨간색으로
- 411. 표시하게
- 412. 해보자.
- 414. 미션 다음그림과
- 415. 같이
- 416. 붉은배경이
- 417. 나오도록
- 418. 해보세요.
- 419. (단.
- 420. id
- 421. selector를
- 422. 사용할
- 423. 수
- 424. 없습니다)
- 425. f o n t ,
- 427. c o l o r ,
- 428. b a c k g r o u n d
- 429. font
- 430. style
- 431. 선택
- 432. font-family
- 433. :
- 434. ‘sans-serif’;
- 435. font-family
- 436. :
- 437. ‘굴림’,Gulim,
- 439. font-face라는
- 440. 걸
- 441. 사용하면
- 442. web
- 443. font를
- 444. 다운로드해서
- 445. 다양한
- 446. font제공도
- 447. 가능. (ex
- 448. ‘google
- 449. web
- 450. font’) font
- 451. size
- 452. 선택
- 453. 기본
- 454. :
- 456. 16px
- 457. (1em)
- 458. font-size
- 459. :
- 460. 0.9em;
- 462. ڴDzԳ의
- 463. 색깔을
- 464. 변경
- 466. color
- 467. :
- 468. red;
- 487. /*
- 488. color
- 489. name
- 490. (google에서
- 491. ‘css
- 492. color
- 493. names’
- 494. 를
- 495. 검색해보자)
- 496. */
- 498. color
- 499. :
- 500. rgb(255,
- 501. 255,
- 502. 0);
- 515. /*
- 516. red,
- 517. green,
- 518. blue
- 519. */
- 521. color
- 522. :
- 523. rgba
- 524. (255,
- 525. 255,0,0.5);
- 530. /*
- 531. red,
- 532. green,
- 533. blue,
- 534. alpha
- 535. */
- 537. color
- 538. :
- 539. #3344ff
- 567. /*
- 568. 16
- 569. 진수
- 570. 표기법
- 571. */
- 573. color
- 574. :
- 575. #34f
- 608. /*
- 609. 16진수
- 610. 축약
- 611. 표기법
- 612. */ 색상의
- 613. 선택
- 615. Chrome
- 616. 개발자
- 617. 도구
- 619. 미션 자신의
- 620. 프로젝트에
- 621. 임의
- 622. 폰트를
- 623. 설정하자.(ex)
- 624. gulim
- 625. 적용)
- 626. body
- 627. 태그에
- 628. font
- 629. 크기를
- 630. 12로
- 631. 한다.
- 632. 위
- 633. 엘리먼트에
- 634. em을
- 635. 사용해서
- 636. font
- 637. size를
- 638. 조정해보자
- 639. background
- 640. 배경에
- 641. 이미지를
- 642. 넣을
- 643. 수
- 644. 있다.
- 646. 이미지를
- 647. 어디에
- 648. 어떻게
- 649. 넣는지에
- 650. 대한
- 651. 속성이
- 652. 있음.
- 654. (윈도우
- 655. 바탕화면을
- 656. 변경했던
- 657. 걸
- 658. 기억해보자!)
- 659. background-color
- 660. background-image
- 661. background-position
- 662. background-repeat
- 663. ! 한
- 664. 줄로
- 665. 적용할
- 666. 수도
- 667. 있음
- 668. background
- 669. :
- 670. #0000ff
- 671. url(“.../gif”)
- 672. no-repeat
- 673. center
- 674. top;
- 676. b o x
- 677. Box
- 678. Model
- 679. HTML의
- 680. element는
- 681. 사각형
- 682. 박스의
- 683. 형태를
- 684. 가지며,
- 685. 다음과
- 686. 같은
- 687. 속성을
- 688. 가진다 참고 : http://www.w3schools.com/css/css_boxmodel.asp
- 689. naver
- 690. 검색창의
- 691. box
- 692. 확인하기
- 693. 개발자
- 694. 도구
- 695. 활용
- 696. Գ에
- 698. 크기를
- 699. 지정하자.
- 700. width
- 701. :
- 702. 200px;
- 703. height
- 704. :
- 705. 200px;
- 706. ! width
- 707. :
- 708. 50%;
- 709. height
- 710. :
- 711. 50%;
- 712. Գ의
- 713. 테두리를
- 714. 부여하자.
- 715. border
- 716. :
- 717. ??? border next는 SW인재를 양성하기 위한 SW전문학교입니다. 그 곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분 을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next 는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에 는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해 서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW 인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지 수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이 content
- 718. 미션 자신의
- 719. 프로젝트에
- 720. 각
- 721. 영역별
- 722. 높이/넓이를
- 723. 설정하고
- 724. 테두리를
- 725. 만들자.
- 726. padding
- 728. 테두리와
- 729. 콘텐츠와의
- 730. 간격
- 731. padding-top
- 732. padding-right
- 733. padding-bottom
- 735. padding-left
- 736. padding next는 SW인재를 양성하기 위한 SW전문학교입니다. 그 곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분 을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next 는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에 는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해 서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW 인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지 수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이 content border margin
- 737. margin
- 739. 다른
- 740. element와의
- 741. 간격
- 742. padding과
- 743. 비슷한
- 744. 방법으로
- 745. 값을
- 746. 설정 next는 SW인재를 양성하기 위한 SW전문학교입니다. 그 곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분 을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next 는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에 는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해 서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW 인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지 수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이 content margin border
- 747. margin
- 748. 의
- 749. 특성
- 750. ! 인Ϊ
- 751. 두
- 752. 개의
- 753. block
- 754. element가
- 755. 서로
- 756. 다른
- 757. margin을
- 758. 가지고
- 759. 있다면?
- 760. 큰
- 761. 값을
- 762. 가진
- 763. margin값이
- 764. 공유되어
- 765. 사용됨
- 767. 10px
- 768. +
- 769. 20px
- 770. =
- 771. 20px
- 772. ! ! 인Ϊ
- 773. 두
- 774. 개의
- 775. inline
- 776. Գ의
- 777. margin은?
- 778. 각각의
- 779. margin
- 780. 의
- 781. 합으로
- 782. 표현된다.
- 784. 10px
- 785. +
- 786. 20px
- 787. =
- 788. 30px
- 789. margin,
- 790. padding의
- 791. 다양한
- 792. 축약표기법
- 793. ! margin
- 794. :
- 795. 0px
- 796. 0px
- 797. 0px
- 798. 10px;
- 800. (top
- 801. ,
- 802. right
- 803. ,
- 804. bottom,
- 805. left)
- 806. margin
- 807. :
- 808. 10px;
- 810. (네개의
- 811. 분면이
- 812. 모두
- 813. 10px)
- 814. margin
- 815. :
- 816. 10px
- 817. 15px;
- 819. (top,
- 820. bottom
- 821. 은
- 822. 10px
- 823. ,
- 825. right,
- 826. left는
- 827. 15px)
- 828. 미션 자신의
- 829. 프로젝트에
- 830. 영역별로
- 831. margin과
- 832. padding을
- 833. 설정해보자.
- 834. Box
- 835. Model
- 836. 깊게
- 837. 보기
- 839. p o s i t i o n
- 840. CSS
- 841. -
- 842. position
- 844. position은
- 845. element를
- 846. 어떻게
- 847. 배치할
- 848. 것인가를
- 849. 결정.
- 850. ! static absolute relative fixed
- 851. static
- 853. ! 모든
- 854. element
- 855. 의
- 856. default
- 857. 값이다.
- 859. 문서의
- 860. 흐름대로
- 861. 위치가
- 862. 결정된다.
- 863. relative
- 865. ! 원래
- 866. 위치에
- 867. 상대적인
- 868. 위치. div:nth-child(2) {! position : relative;! top: 30px;! left: 30px;! } 30px 30px
- 869. absolute
- 871. ! 절대적인
- 872. 위치이며
- 873. 문서의
- 874. 흐름에서
- 875. 제외.
- 876. 기준점은
- 877. 상위element
- 878. 중
- 879. static
- 880. 속성이
- 881. 아닌
- 882. element
- 883. 위치설정은
- 884. top,
- 885. bottom
- 886. 중
- 887. 한
- 888. 개와
- 889. left,
- 890. right
- 891. 중
- 892. 한개를
- 893. 선택해서
- 894. 설정
- 895. 30px 30px
- 896. fixed
- 898. ! 진정한
- 899. 절대적인
- 900. 위치를
- 901. 차지
- 902. 문서의
- 903. 흐름에서
- 904. 제외.
- 905. viewport(보이는
- 906. 화면)를
- 907. 기준으로
- 908. 위치값을
- 909. 가짐
- 911. relative
- 912. 속성의
- 913. 실제
- 914. 사용은,
- 915. absolute속성을
- 916. 가진
- 917. 자식의
- 918. 기준점으로
- 919. 더
- 920. 많이
- 921. 활용됨.
- 922. absolute absolute absolute relative
- 923. 각각의
- 924. 속성은
- 925. 무엇인가?
- 926. position ? position ?
- 927. 미션 프로젝트의
- 928. 영역을
- 929. position
- 930. 속성을
- 931. 활용해서
- 932. 원하는
- 933. 대로
- 934. 배치해보자.
- 935. margin,
- 936. padding
- 937. 으로
- 938. 간격을
- 939. 일정하게
- 940. 유지하고,
- 941. width,
- 942. height
- 943. 로
- 944. 크기를
- 945. 설정한다.
- 947. End ;-D