OPrada Skin

만든이 : parkpd
제 목 : OPrada v2.0
나온곳 : www.gomplayer.co.kr

깔끔하고... 용량도 참 착하다.(10kbs) 다만 한가지 흠이라면 잘 안보인다는거다. 수정을 가해야할듯... 일단은 마음에 든다.

Screen Shot

OPrada.gps

의견 (0)

머리말

html은 쉽다고 했다.
누가 그렇게 말했는지는 모르겠지만...

나는 쉽지가 않다.

이래저래 알아야 할것들도 많고 사실 잘 정리된 한글로 된 참고서를 찾기도 쉽지가 않다.

웹표준이라는 말이 대두되고 Internet Explore 만이 아닌 firefox, opera, safari, chrome을 생각해야한다. 이젠 많은 수의 OS, Browser들이 범람하고 있다. 여러환경 여러 상황에서도 완벽하게 내가 원하는 동작을 할 수 있도록 해야한다.

그러기 위해서 필요한것이 "표준"
아래의 기본 문법은 모두 표준이다. 모두 잘 동작하고 내가 원했던것을 그대로 보여준다.
첨부파일은 html문서와 txt버전을 모두 넣어두었다.

Html Basic grammer

1. Basic structure
   <html>
   <head>
   ...
   <title> ... </title>
   ...
   </head>
   <body>
   ...
   </body>
   </html>

2. Heading elements
   <h1>Largest heading</h1>
   <h2>...</h2>
   <h3>, <h4>, <h5>
   <h6>Smallest heading</h6>

3. Text elements
   <p>This is paragraph</p>
   <br>, </br>, <br/> break line
   <hr>, </hr>, <hr/> Horizontal rule
   <pre>This text is preformatted</pre>

4. Logical styles
   <em>Emphasized</em>
   <string>String</strong>
   <code>Computer code</code>

5. Physical styles
   <b>bold</b>
   <i>italic</i>

6. Links
   <a href="http://... ">this is a link</a>
   <a href="http:// ... "> <img src="URL" alt="alternate text"> </a>

7. Anchor
   anchor : <a name="name of anchor">text...</a>
   link : <a href=#name of anchor>text</a>

8. List
   A. unordered list
   <ul>
   <li>first item</li>
   <li>second item</li>
   ...
   <li>end item</li>
   </ul>
   B. ordered list
   <ol>
   <li>first item</li>
   <li>second item</li>
   ...
   <li>end item</li>
   </ol>
   C. Definition list
   <dl>
   <dt>first term</dt>
   <dd>definition</dd>
   <dt>second term</dt>
   <dd>definition</dd>
   </dl>
9. Table
   <table border="1">
   <tr>
   <th>Someheader</th>
   <th>Someheader</th>
   </tr>
   <tr>
   <th>sometext</th>
   <th>sometext</th>
   </tr>
   </table>
10. Block Quote
   <blockquote>
   Text quoted form some source.
   </blockquote>

11. Use css
   A. Insert a style sheet
   a. External style sheet
   <head>
   <link rel="stylesheet" type="text/css" href="mystyle.css"/>
   </head>

   b. internal style sheet
   <head>
   <style type="text/css">
   hr{color:blue}
   p{font-family:arial}
   ...
   </style>
   <head>

   B. Syntax
   p{
   text-align:center;
   color:black;
   font-family:arial
   }

   C. Grouping
   h1,h2,h3,h4,h5,h6{
   color:green
   }

   D. Class selector
   a. definition
   p.right{text-align:right}
   p.center{text-align:center}
   p.green{color:green}
   .blue{color:blue}

   #example p{
   color:yellow;
   font-size:2em;
   background:#fff
   }

   b. usage
   <p class="right"> ... </p>
   <p class="center"> ... </p>
   <p class="center green"> ... </p>
   <p class="blue"> ...</p>

   <div id="example">
   <p>This is "example p" style...</p>
   </div>

htmlBasicDocument.zip