Web Standard #2      @EBvi
••• HTML
css<head>    <title>     </title>    <link rel=”stylesheet” media=”all” type=”text/css”    href=”hello.css” />    <script ...
<link>                 @import•   <link rel=”stylesheet” type=”text/css” href=”hello.css” />•   <style type=”text/css”>   ...
id        class• css  id      class• id• class
• <div id=”header”></div>• <div id=”content”></div>• <div id=”footer”></div>• <p class=”introduce”></p>• <span class=”warn...
id• <div id=”nav”></div>  <a href=”#nav”>        </a>
• header, content, footer, sub, nav, sidebar, metadata,    introduce ... (O)• italic, red, blue, high ... (X)••
CSS            *            #           id             .         class            >         (            )             :  ...
• #header {}• .title {}                     • div#time p strong {}• div.park {}                     • th, td {}• table > t...
• h1 { font-family: sans-serif }  h2 { font-family: sans-serif }  h3 { font-family: sans-serif }• h1, h2, h3 { font-family...
•*•• css•
IE• input[alt] {}• IE7                  ,            ,•
CSS       • 1. display                        • 8. border / background       • 2. list-style                     • 9. colo...
display• block :• inline :• none :• table      IE9• inline-block     IE8
display=block•          width•          height• block   inline• css     width/height
display=inline•• width    height•       inline• css            width/height
• <p> <table> <form> <ul> <li> <h1> <div>       block• <span> <strong> <a> <em> <img> <br> <input>               inline•※
position staticabsolute         offset fixed                      (IE7+)relative         offsetinherit               (IE8+)
position=static• top, left, right, bottom   offset
position=relative• offset•              offset    relative
position=absolute•              offset• z-index
floatleft      floatright       floatnone
clearleft    floatright     floatboth    floatnone
• <div style=”float:left”></div>• <div style=”float:right”></div>• <div style=”clear:both”></div>
IE6• float             margin• display:inline
IE6 Duplicate         Character bug• float                 display:none• display:inline   ,
•• hack•        hack
padding / margin /     border
padding / margin /     border
Box model Problem•                 width            IE    border, padding      width• DTD
• css• id          , class• hack• Box model
Web standard 2
Upcoming SlideShare
Loading in...5
×

Web standard 2

309

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
309
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×