• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web standard 2
 

Web standard 2

on

  • 444 views

 

Statistics

Views

Total Views
444
Views on SlideShare
443
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Web standard 2 Presentation Transcript

  • Web Standard #2 @EBvi
  • ••• HTML
  • 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•
  • <link> @import• <link rel=”stylesheet” type=”text/css” href=”hello.css” />• <style type=”text/css”> @import url(hello.css); </style>• IE6-7 link
  • 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=”warning”></span>
  • 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 > ( ) : []• http://www.w3.org/TR/CSS2/ selector.html
  • • #header {}• .title {} • div#time p strong {}• div.park {} • th, td {}• table > tbody {} • *[lang=ko]• input[alt] {}• a:link {}
  • • h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif }• h1, h2, h3 { font-family: sans-serif }
  • •*•• css•
  • IE• input[alt] {}• IE7 , ,•
  • 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
  • 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