[Day 10] section + login form + dl

Section & Form Markup

• <section> : ‘장’으로 표현하기 적합한 tag
  • 하나의 기능 만으로 section으로 표현해도 된다. (article로 표현해도 된다.)
• <form>
  • 속성
    • action=”url”
    • method=”GET” or “POST”
• <fieldset> : 연관성 있는 controls 를 모아놓는다.
  • XHTML 1.0 에서는 form 내부에 필수 tag
  • HTML5 에서는 써도 되고 안써도 된다. (쓰는 걸 권장)
• <legend> : 범례
  • XHTML 1.0 에서는 form 내부에 필수 tag
  • HTML5 에서는 써도 되고 안써도 된다. (쓰는 걸 권장)
• <label> : 입력 서식의 id를 할당해서 label과 연결시킨다.
  • <label for="input#id">
  • <input id="">
• <button> : 폼 요소에서 입력된 데이터를 서버로 넘긴다.
  • default type="submit"
• <a>
  • target=”_blank” 속성을 통해 새 창에서 링크를 띄운다.
  • title=”…” 속성을 통해 마우스 오버 시 tooltop을 제공한다.
  • <img> 에서도 title 속성 사용 가능하다. 과거에는 alt 속성으로 했지만 최근에는 alt는 tooltip을 제공하지 않는다.
• <dl> (definition list)
  • 이름과 값의 용어 형태로 나올 때 쓴다.
  • <dt> : definition title
  • <dd> : definition description
  • 하나의 dt에 여러개의 dd 가능

CSS Styling

• box-shadow
  • box-shadow의 길이는 box 크기와 무관하다.
  • box-shadow를 border처럼 만들 수도 있다.
• text-indent
  • inline box일 경우 적용되지 않는다.
  • text-indent의 길이는 박스 크기에 전혀 영향을 주지 않는다. (border-box와 같다)
• <input>, <img>, <button>
  • 내부적으로 inline-block 이기 때문에 inline 처럼 보여도 width, height 조정이 가능하다.
  • <input>의 경우에는 size라는 속성을 통해 해당 글자 수만큼 크기를 조정 가능하다.