1 / 55

HTML 과 CSS

HTML 과 CSS. hodduc@sparcs. Cascading Style Sheet. css. “ 마크업 언어 ” 가 실제로 어떻게 보일지 를 기술하는 또 다른 언어. Css 2 vs css 3. Selector { Attribute1: Value1; Attribute2: Value2; Attribute3: Value3; }. <body> < h1> 이거슨 제목 </h1> < h2 class="red"> 이거슨 red Class </h2>

gordon
Download Presentation

HTML 과 CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML과 CSS hodduc@sparcs

  2. Cascading Style Sheet css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  3. “마크업 언어”가 실제로 어떻게 보일지 를 기술하는 또 다른 언어 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  4. Css 2 vscss 3 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  5. Selector { Attribute1: Value1; Attribute2: Value2; Attribute3: Value3; } 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  6. <body> <h1> 이거슨 제목 </h1> <h2 class="red"> 이거슨red Class </h2> <span id="hodduc"> Hodduc </h3> </body> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs h1 { font-size: 50px; } .red { color: red; } #hodduc { text-decoration: underline; font-weight: bold; }

  7. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs h1 { font-size: 50px; } .red { color: red; } #hodduc { text-decoration: underline; font-weight: bold; }

  8. <body> <h1> 이거슨 제목 </h1> <h2 class="red"> 이거슨red Class </h2> <span id="hodduc“ class=“red”> Hodduc </h3> </body> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs h1 { font-size: 50px; } .red { color: red; } #hodduc { text-decoration: underline; font-weight: bold; }

  9. h1 { font-size: 50px; } .red { color: red; } #hodduc { text-decoration: underline; font-weight: bold; } 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  10. .intro { background-color: blue; } • #hodduc { background-color: green; } • span { background-color: red; } <span id="hodduc“ class=“intro”> Hodduc </span> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  11. body { font-size: 20px; } • #container { • border: 1px solid black; • color: red; • } • #birthday { color: black; } <div id="container"> <div id="intro“> 아이유</div> <div id="birthday“> 1993년 5월 16일 </div> </div> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  12. body { font-size: 20px; } • #container { • border: 1px solid black; • color: red; • } • #birthday { color: black; } 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  13. 여기서 질문 왜 color만 상속되었을까? 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  14. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  15. http://lmgtfy.com 구글링의 생활화 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  16. 스타일을 적용하는 몇 가지 방법 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  17. 방법 1. inline-style 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  18. <div style="font-align: right“>오른쪽 정렬</div> <div style="font-align: center“>가운데 정렬</div> <div style="font-align: left“>왼쪽 정렬</div> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  19. 장점 단점 마크업과 스타일이 섞임 특히 섞어쓰면 헷갈림! 재사용 불가 • 모든 스타일을 덮어씀(가장 강력한 Rule) • 쉽고 빠르게! 이럴 때 사용하세요 임시로잠깐 사용할 스타일 외부 파일이나 <head> 부분을 고칠 수 없을 때 개발 도중 어떻게 보일지 미리보고 싶을 때 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  20. 방법 2. style 태그 사용 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  21. <html> <head> <style type="text/css"> .leftbox { text-align: left; } .rightbox { text-align: right; } .centerbox { text-align: center; } </style> </head> <body> <div class="leftbox"> 오른쪽 정렬 </div> <div class="centerbox"> 가운데 정렬 </div> <div class="rightbox"> 왼쪽 정렬 </div> </body> </html> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  22. 장점 단점 다른 페이지에서 재사용 불가 캐시되지 않음 • Inline-style 다음으로 우선 적용됨 • 개발 단계에 적합 이럴 때 사용하세요 개발 단계에서 임시로. 이후 배포시에는외부 CSS로 분리 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  23. 방법 3. 외부 CSS 사용 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  24. <html> <head> <link rel=“stylesheet” type=“text/css” href=“style.css” /> </head> <body> <div class="leftbox"> 오른쪽 정렬 </div> <div class="centerbox"> 가운데 정렬 </div> <div class="rightbox"> 왼쪽 정렬 </div> </body> </html> test7.html • @charset "utf-8"; • .leftbox { text-align: left; } • .rightbox { text-align: right; } • .centerbox { text-align: center; } style.css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  25. 텍스트 꾸미기 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  26. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  27. @charset "utf-8"; • body { • line-height: 1.5em; • } iu.css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  28. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  29. @charset "utf-8"; • body { • font-family: 궁서; • line-height: 1.5em; • } iu.css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  30. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  31. @charset "utf-8"; • body { • font-family: “맑은 고딕”, 궁서; • line-height: 1.5em; • } iu.css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  32. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  33. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  34. 웹폰트이런건(아직은) 비표준! IE를 깝시다 IE는 나의 적 사용자 컴퓨터에 있는 글꼴만! 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  35. @charset "utf-8"; • body { • font-family: “맑은 고딕”, Dotum, 돋움, Helvetica, • AppleGothic, Arial, sans-serif; • line-height: 1.5em; • } iu.css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  36. @charset "utf-8"; • body { • font-family: “맑은 고딕”, Dotum, 돋움, Helvetica, • AppleGothic, Arial, sans-serif; • line-height: 1.5em; • } • h1 { • letter-spacing: -4px; • } iu.css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  37. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  38. 자간 -4px 자간 -2px 자간 0px 자간 4px 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  39. ..(생략).. • #content:first-letter { • background: #eee; • font-size: 400%; • border: 2px solid #ccc; • float: left; • margin: 4px 10px 10px 0; • line-height: 1em; • } iu.css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  40. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  41. <div style="font-align: right“>오른쪽 정렬</div> <div style="font-align: center“>가운데 정렬</div> <div style="font-align: left“>왼쪽 정렬</div> 아까 했죠? Text-align 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  42. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  43. @charset "utf-8"; • body { • font-family: “맑은 고딕”, Dotum, 돋움, Helvetica, • AppleGothic, Arial, sans-serif; • line-height: 1.5em; • text-align: justify; • } • h1 { • letter-spacing: -4px; • text-align: center; • } iu.css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  44. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  45. Text-transform 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  46. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  47. @charset "utf-8"; • body { • font-family: “맑은 고딕”, Dotum, 돋움, Helvetica, • AppleGothic, Arial, sans-serif; • line-height: 1.5em; • text-align: justify; • text-transform: capitalize; • } • h1 { • letter-spacing: -4px; • text-align: center; • } iu.css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  48. text-transform: capitalize; • text-transform: uppercase; • text-transform: lowercase; 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  49. @charset "utf-8"; • body { • font-family: “맑은 고딕”, Dotum, 돋움, Helvetica, • AppleGothic, Arial, sans-serif; • line-height: 1.5em; • text-align: justify; • text-transform: capitalize; • font-variant: small-caps; • } • h1 { • letter-spacing: -4px; • text-align: center; • } iu.css 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

  50. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

More Related