1. HTML form 요소

• select/option: 드롭다운을 만드는 태그
  • select attribute
    • size: 드롭다운에서 한 번에 보여질 개수
    • multiple: 여러 개 선택 가능 여부
  • option attribute
    • value: 서버에 전송될 값(화면 표기는 label이라고 부름)
    • selected: 해당 항목이 선택되어 있음
• input 태그 type 정의
  • checkbox: 체크 박스를 표시
  • radio: 라디오 버튼 표시
  • submit: 제출 버튼 표시
  • name: 버튼 그룹 형성
  • value: 해당 태그 선택 시 제출되는 값
• label 태그
  • for를 이용해 id 지정

2. CSS 반응/상태 선택자

• CSS 중에서 사용자의 상호작용때 적용되는 스타일
  • CSS selector 뒤에 콜론으로 띄어쓰기 없이 붙여준다
• :active 마우스 클릭해서 떼는 시점까지
• :hover 마우스 포인터가 요소 위에 있을 때
• :checked on 상태의 radio 버튼, 체크박스, option
• :focus form 중에서 포커스 받은 요소
• :enabled 사용 가능한 활성화된 요소
• :disabled 사용 불가능한 비활성화된 요소
• :link 아직 방문하지 않은 하이퍼링크가 포함된 요소
  • 둘 다를 사용하려면 :any-link
• :visited 이미 방문한 하이퍼링크
  • 방문한 링크의 스타일을 정의함
• ::selection 사용자가 선택한 텍스트에 대해 스타일을 지정
  • 앞에 선택자가 없으면 전체 선택

3. Javascript 콘솔 사용하기

• Javascript console 사용법
  • console.log 일반적인 로그 출력
  • console.error 에러 로그 출력
  • console.warn 경고 로그 출력
  • console.info 정보 출력(로그 단계)
  • console.assert 앞 조건문이 실패시
  • console.dir: 객체에 대한 설명
  • console.table: 객체를 테이블 형태로 출력
  • console.time: 타이머 시작
  • console.timeEnd: 타이머 종료 및 출력

4. Javascript DOM 이해하기

• innerHTML: 태그의 내부 HTML을 가져오고 변경함
  • 태그 안의 내용을 수정
• outerHTML: 태그 본인 내용도 포함하여 가져오고 변경함
  • 태그 안의 내용과, 본인의 어트리뷰트까지 수정