[WEB UI BASIC] CSS_1
7 likes•838 views
This document discusses the basics of CSS3 and HTML. It covers setting the character encoding to UTF-8, creating unordered lists with <ul> tags, the order of opening and closing tags, using comments with <!-- -->, and applying CSS styles either inline with the style attribute or with an external CSS file. The goal is to beautify HTML pages with CSS.
![Study]
본](https://image.slidesharecdn.com/webuibasicweek2css-150419055801-conversion-gate02/85/WEB-UI-BASIC-CSS_1-4-320.jpg)
[WEB UI BASIC] CSS_1
- 1. CSS3
- 2. 1탄 [WEB
- 3. Basic
- 4. Study] 본
- 5. slide는
- 6. NHN
- 7. NEXT
- 8. 윤지수
- 9. 교수님의
- 10. 강의
- 11. 자료를
- 12. 바탕으로
- 13. 제작했습니다.
- 14. 오늘은…⋯
- 19. 일단
- 20. HTML부터
- 21. 살펴봅시다!
- 22. 1.
- 23. UTF-8 UTF-8로
- 24. 안
- 25. 쓰면
- 26. 특수문자나
- 27. 한글이
- 28. 깨집니다!!
- 29. head에
- 30. 넣어줍시다. meta
- 33. charset=UTF-8
- 34. 2.
- 35. 보이지
- 36. 않는
- 37. 너 지금
- 38. 당장
- 39. 보이지
- 40. 않는
- 41. 부분도
- 42. 잊지
- 43. 않고
- 44. 코딩을
- 45. 꼭
- 46. 해줘야
- 47. 합니다! --
- 48. ul로
- 49. 만들어
- 50. 줍니다. form에
- 51. 있는
- 52. input으로
- 53. 만들어
- 54. 줍니다.
- 55. 3.
- 56. 태그
- 58. 둘의
- 59. 차이는?
- 60. 4.
- 61. 주석처리 !--
- 66. --
- 67. 오늘의
- 68. 학습
- 69. 목표 거지같은
- 70. HTML을
- 71. 이쁘게
- 72. 꾸며보자!
- 73. 레이아웃(layout)은
- 74. 오늘
- 75. 못
- 76. 할
- 77. 것
- 78. 같으니
- 79. 다음
- 81. Style
- 82. Sheets)
- 83. CSS가
- 84. 없을
- 85. 때
- 86. 어떤지
- 95. 우리는
- 96. 봤다.
- 97. CSS를
- 98. 적용하는
- 99. 방법
- 100. 1 style을
- 101. html
- 102. tag에
- 103. 직접
- 104. 적용하는
- 105. 방법 -
- 106. inline
- 107. 방식 body
- 112. div
- 121. span
- 122. style=“color:red;”
- 127. /div
- 128. /body
- 129. CSS를
- 130. 적용하는
- 131. 방법
- 132. 2 style
- 133. tag를
- 134. 이용하여
- 135. html에
- 136. 넣는
- 137. 방식 -
- 138. internal
- 139. 방식 head
- 144. titlehello,
- 145. world/title
- 154. style
- 167. span
- 168. {
- 169. color:
- 170. red;
- 171. }
- 180. /style
- 181. /head
- 182. CSS를
- 183. 적용하는
- 184. 방법
- 185. 3 외부
- 186. 파일
- 187. (.css)로
- 188. 지정하기 -
- 189. external
- 190. 방식 span
- 191. {
- 192. color:red;
- 193. } head
- 198. link
- 199. rel=“stylesheet”
- 200. type=“text/css”
- 201. href=“main.css”
- 203. inline,
- 204. internal,
- 205. external
- 206. 중
- 207. 어떤
- 208. 방법이
- 209. 좋은
- 210. 걸까?
- 211. + 개발자
- 212. 도구에서는
- 213. 스타일이
- 214. 어떻게
- 215. 적용될까?
- 216. 시작하기
- 217. 전에
- 218. reset! Google
- 219. “css
- 220. reset”
- 221. 검색하기
- 222. 시작하기
- 223. 전에
- 224. 추천
- 225. 프로그램!
- 226. Sip 원하는
- 227. 색깔을
- 228. pick!!!
- 229. CSS
- 230. 냠냠
- 231. 먹이기
- 232. 1 div
- 234. {
- 239. width:
- 240. 100px;
- 245. height:
- 246. 200px;
- 247. } -
- 248. tag로
- 249. 먹이기 span
- 251. {
- 256. font-size:
- 257. 3em;
- 262. color:
- 263. #f332de
- 264. }
- 265. CSS
- 266. 냠냠
- 267. 먹이기
- 268. 2 div
- 270. id로
- 271. 먹이기 #menu_container
- 273. {
- 278. width:
- 279. 500px;
- 284. background-color:
- 285. yellow;
- 286. }
- 287. CSS
- 288. 냠냠
- 289. 먹이기
- 290. 3 div
- 292. class로
- 293. 먹이기 .card_list
- 295. {
- 300. width:
- 301. 500px;
- 306. background-color:
- 307. yellow;
- 308. }
- 309. CSS
- 310. 냠냠
- 311. 먹이기
- 312. 4 div
- 313. class=“css_good”
- 318. spanhello/span
- 323. divspanbye/span/div
- 324. /div -
- 325. 하위에
- 326. 먹이기 .css_good
- 328. span
- 329. {
- 334. width:
- 335. 500px;
- 340. background-color:
- 341. yellow;
- 342. }
- 343. CSS
- 344. 냠냠
- 345. 먹이기
- 346. 5 div
- 347. class=“css_good”
- 352. spanhello/span
- 357. divspanbye/span/div
- 358. /div -
- 359. 바로
- 360. 밑에
- 361. 애들만
- 362. 먹이기 .css_good
- 366. span
- 367. {
- 372. width:
- 373. 500px;
- 378. background-color:
- 379. yellow;
- 380. }
- 381. CSS
- 382. 냠냠
- 383. 먹이기
- 384. 6 ul
- 389. li1/li
- 394. li2/li
- 399. li3/li
- 400. /ul -
- 401. 서수로
- 402. 잡아오기 li:first-child
- 403. {
- 404. color:
- 405. blue;
- 406. } li:nth-child(2)
- 407. {
- 408. color:
- 409. red;
- 410. } li:last-child
- 411. {
- 412. color:
- 413. yellow;
- 414. } li:nth-child(odd)
- 415. {
- 416. color:
- 417. green;
- 418. } li:nth-child(even)
- 419. {
- 420. color:
- 421. pink;
- 422. }
- 423. CSS는‘경쟁’을
- 424. 좋아합니다.
- 425. CSS
- 426. 원칙
- 427. 1 -
- 428. 최종적으로
- 429. 작성된
- 430. CSS가
- 431. 먹는다. span
- 432. {
- 433. color:
- 434. red;
- 435. }
- 436. span
- 437. {
- 438. color:
- 439. blue;
- 440. } span?
- 441. CSS
- 442. 원칙
- 443. 2 -
- 444. 더
- 445. 구체적인
- 446. CSS가
- 447. 먹는다. span
- 448. {
- 449. color:
- 450. blue;
- 451. }
- 452. body
- 454. span
- 455. {
- 456. color:
- 457. red;
- 458. } span?
- 459. CSS
- 460. 원칙
- 461. 2-1 -
- 462. CSS
- 463. 속성은
- 464. 하위에
- 465. 상속
- 466. 된다 ※
- 467. 주의
- 468. –
- 469. box관련
- 470. 스타일은
- 471. 상속
- 472. 제외(margin,
- 473. padding,
- 474. border)
- 487. 얘네들은
- 488. 다음
- 489. 시간에
- 490. 더
- 491. 자세히
- 492. 배울게요
- 493. ☺ div
- 494. class=“css_good”
- 499. spanhello/span
- 504. divspanbye/span/div
- 505. /div .css_good
- 507. span
- 508. {
- 513. width:
- 514. 500px;
- 519. background-color:
- 520. yellow;
- 521. } CSS
- 522. 냠냠
- 523. 먹이기
- 524. 4
- 525. 참고!!!
- 526. CSS
- 527. 원칙
- 528. 3 -
- 529. id
- 531. class
- 533. element div
- 534. id=“a”
- 535. class=“b”
- 536. hello
- 537. /div hello? #a
- 538. {
- 539. color:
- 540. red;
- 541. }
- 542. .b
- 543. {
- 544. color:
- 545. blue;
- 546. }
- 547. div
- 548. {
- 549. color:
- 550. yellow;
- 551. }
- 552. 근데
- 553. 폰트가
- 554. 너무
- 555. 구려요ㅠ
- 556. 괜찮아,
- 557. 우리에겐
- 558. 웹폰트가
- 560. 웹폰트
- 561. 사용법 1. css
- 562. 파일에
- 563. 폰트를
- 564. import
- 565. 해준다.
- 566. (html
- 567. head에서도
- 568. 가능)
- 573. @import
- 575. font-family에
- 576. 해당
- 577. 폰트를
- 578. 사용하면
- 579. 된다.
- 580. 끝!
- 587. body
- 588. {font-family:
- 589. 'Nanum
- 590. Gothic',
- 591. serif;
- 592. } 참고)
- 593. 가끔
- 594. 이런
- 595. font-family를
- 596. 발견할
- 597. 수
- 598. 있는데
- 605. body
- 606. {font-family:
- 607. 'Nanum
- 608. Gothic',
- 609. arial,
- 610. verdana,
- 611. serif;
- 612. }
- 619. 폰트를
- 620. 로드하지
- 621. 못할
- 622. 경우를
- 623. 대비해서
- 624. 대체할
- 625. 후보들을
- 626. 여러
- 627. 개
- 628. 써둔
- 629. 것이다.
- 630. 신기한
- 631. CSS
- 632. 효과ㅋ
- 633. :hover 마우스가
- 634. 오버되면
- 635. 해당
- 636. CSS를
- 637. 추가해준다!! p:hover
- 638. {background-color:
- 639. blue;}
- 640. :active 해당
- 641. 태그가
- 642. 클릭되면
- 643. 해당
- 644. CSS를
- 645. 추가해준다!! p:active
- 646. {background-color:
- 647. blue;}
- 648. CSS
- 649. selector
- 651. CSS
- 652. 애니메이션도
- 653. 가능한데
- 654. 나중에
- 655. 배우기로
- 656. 합시다ㅋ
- 657. 다음
- 658. 시간까지!!!
- 659. 레이아웃은
- 660. 상관
- 661. 없이
- 662. text에만
- 663. CSS
- 664. style을
- 665. 먹여옵니다. 어렵지는
- 666. 않지만
- 667. 손이
- 668. 많이
- 669. 가는
- 670. 작업이니
- 671. 끈기를
- 672. 가지고
- 673. 합시다!
- 674. 질문
- 675. 및
- 676. 건의사항 ex)
- 677. GOOD
- 678. 홈페이지
- 679. 너무
- 680. 어려운
- 681. 거
- 682. 아니냐,
- 683. 진도
- 684. 너무
- 685. 빠르다
- 686. 등등