Web standard 2

493 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Web standard 2

  1. 1. Web Standard #2 @EBvi
  2. 2. ••• HTML
  3. 3. css<head> <title> </title> <link rel=”stylesheet” media=”all” type=”text/css” href=”hello.css” /> <script type=”text/javascript” src=”jquery.js”></script></head>...• .js .css•
  4. 4. <link> @import• <link rel=”stylesheet” type=”text/css” href=”hello.css” />• <style type=”text/css”> @import url(hello.css); </style>• IE6-7 link
  5. 5. id class• css id class• id• class
  6. 6. • <div id=”header”></div>• <div id=”content”></div>• <div id=”footer”></div>• <p class=”introduce”></p>• <span class=”warning”></span>
  7. 7. id• <div id=”nav”></div> <a href=”#nav”> </a>
  8. 8. • header, content, footer, sub, nav, sidebar, metadata, introduce ... (O)• italic, red, blue, high ... (X)••
  9. 9. CSS * # id . class > ( ) : []• http://www.w3.org/TR/CSS2/ selector.html
  10. 10. • #header {}• .title {} • div#time p strong {}• div.park {} • th, td {}• table > tbody {} • *[lang=ko]• input[alt] {}• a:link {}
  11. 11. • h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif }• h1, h2, h3 { font-family: sans-serif }
  12. 12. •*•• css•
  13. 13. IE• input[alt] {}• IE7 , ,•
  14. 14. CSS • 1. display • 8. border / background • 2. list-style • 9. color / font • 3. position • 10. text-decoration • 4. float • 11. text-align / vertical-align • 5. clear • 12. white-space • 6. width / height • 13. other text • 7. padding / margin • 14. contenthttp://www.clearboth.org/wiki/doku.php?id=document:css:ordering_properties
  15. 15. display• block :• inline :• none :• table IE9• inline-block IE8
  16. 16. display=block• width• height• block inline• css width/height
  17. 17. display=inline•• width height• inline• css width/height
  18. 18. • <p> <table> <form> <ul> <li> <h1> <div> block• <span> <strong> <a> <em> <img> <br> <input> inline•※
  19. 19. position staticabsolute offset fixed (IE7+)relative offsetinherit (IE8+)
  20. 20. position=static• top, left, right, bottom offset
  21. 21. position=relative• offset• offset relative
  22. 22. position=absolute• offset• z-index
  23. 23. floatleft floatright floatnone
  24. 24. clearleft floatright floatboth floatnone
  25. 25. • <div style=”float:left”></div>• <div style=”float:right”></div>• <div style=”clear:both”></div>
  26. 26. IE6• float margin• display:inline
  27. 27. IE6 Duplicate Character bug• float display:none• display:inline ,
  28. 28. •• hack• hack
  29. 29. padding / margin / border
  30. 30. padding / margin / border
  31. 31. Box model Problem• width IE border, padding width• DTD
  32. 32. • css• id , class• hack• Box model

×