HTML5_CSS3 정석

• <hn>
• <p>
• <hr>
• <blockquote> : 인용
• <pre>
• <strong> <b>
• <em> <i>
• <pre><code> function save(){...} </code></pre>
• <small>, <sub>: 아래 첨자, <sup>: 위 첨자
• <ul or ol > <li> </li> </ul or /ol>
• <dl> <dt> <dd>
• <caption>, <figcaption>
• <thead>, <tbody>, <tfooter>
• <td colspan=”2”> : 가로셀 합치기
• <td rowspan=”2”> : 세로셀 합치기
• <figure> <figcaption> : 이미지에 설명글 붙이기
• <a href=”” target=”_blank(new tab) | _self | _parent | _top (frmae 을 벗어나서)”>
  • <style> a { text-decoration: none; color: black; }
• <a href=”#앵커이름"> </a>
• <img src=”” usemap=”#맵이름"> <map name=”맵이름"> <area shape=”rect” coords=”0, 0,(시작) 80, 100 (끝)” href=”http://...” target=”_blank”> <area shape=”circle” coords=”320, 240, (중심), 11(반지름)” href=”http://...” target=”_blank”> </map>
• <fieldset> <legend>
• <input> type
  • hidden
  • text
  • search
  • tel
  • url
  • email
  • password
  • datetime, datetime-local, date
  • month, week, time
  • number <input type=”number” min=”1” max=”5” value=”1”>
  • range
  • color
  • checkbox, radio, file
  • checkbox, radio
  • submit, reset, button
  • image
• <input> 속성
  • autofocus, required
  • placeholder, readonly
  • type=”text” size, minlength, maxlength
• <select> <option> <optgroup>
• <datalist> <option>
• <button [type=”submit | reset | button”]>
• <output>
• <progress> <meter>
• 주요선택자
  • • , tag , class, id
  • 순서: inline > id > class > tag
• <font> ( google web font)
  • font-family, font-size(1em), font-weight(bold), font-style(italic), font-variant(small-caps 작은대문자)
  • style: “font:caption | icon | menu | status-bar etc ” 스타일 모음
  • color, text-decoration: none | underline | overline | line-through
  • text-transform: none | capitalize | uppercase | lowercase | full-width
  • text-shadow
  • white-space: normal | nowrap | pre | pre-line | pre-wrap
  • letter-spacing, word-spacing: normal | 자간 조절
• <p>
  • text-align, text-justify, text-indent
  • line-height
  • text-overflow: white-space: nowrap 이 아닐경우, 넘치는 텍스트를 어케 할지?
• <ul>
  • list-style-type: none, disc, circle, square
  • list-style-position: 들여쓰기 (list-style: lower-alpha, inside)
• css 와 박스 모델
  • block level, inline level
    • width, height, padding, border
  • display 속성
    • none | contents | block | inline | inline-block | table
  • border-style
    • none | hidden | dashed | dotted | double | groove
  • border-width, border-color
  • border-bottom, top, left, right
  • border: 3px dotted black;
  • box-shadow
  • border-radius: 20px(좌상) 70px(우상) (20px-우하 70px-좌하)
  • margin : 상하좌우, margin: 30px(상하) 50px(좌우)
  • margin overlap: 상하 마진은 중첩되서 큰놈으로 설정, 좌우는 안됨
• CSS 포지셔닝
  • box-sizing: content-box | border-box
  • float: left | right | none (주변을 다른요소가 감쌈) - layout 잡기
    • clear: none | left | right | both (float 속성 해제)
  • position: static | relative(상대좌표 지정) | absolute(문서에서 위치) | fixed(브라우저에서 위치; 고정배너)
  • visibility, z-index
  • column-width : 다단 구성하기
• 표스타일
  • caption-side: top | bottom
  • border: 1px dotted black;
  • border-collpase: collapse | seperate
  • border-spacing: 인접한 셀 테두리 사이 거리 px | em (셀사이의 거리를 벌려놓는 효과)
  • empty-cells: show | hide
  • table-layout: fixed | auto (셀크기 고정 여부)
  • text-align: left | right | center (셀안에 수평정렬)
  • vertical-align
• html5 semantic tag
  • header, nav, section, aside, footer
  • <header> <section> <aside> <article>
    <article> <aside> <footer> <address>
  • <iframe>
• <audio> <video>
• 연결선택자
  • section p { color: blue; } section 하위 자식 모든 p
  • section > p 첫번째 자식
  • h1 + p 첫번째 형제
  • h1 ~ p 모든 형제
• 속성 선택자
  • a[href] : a 중에 href 속성이 있는 선택자
  • a[target = ”_blank”]
  • [class ~= “button”] : 여러개 중에 한개 일치
  • a[title |= “jap”] : title: “japanese” 걸림
  • a[title ^= “eng”] : eng 로 시작
  • a[href $= “hwp”] : hwp로 종료
  • a[href *= “w3”] : w3 포함 (ex - www.w3c.org)
• 동작에 반응하는 가상 클래스
  • :link, visited, hover, active, focus
  • :enabled, disabled, checked, :root
  • :nth-child, :nth-last-child ex) div p:nth-child(odd), tr:nth-child(2n+1)
  • :first-child, last-child
  • ::before, ::after 내용의 앞뒤

 

 

[참고문헌]

[Do it! HTML5+CSS3 웹 표준의 정석] 요약

[출처]

dermabae.tistory.com