Web Dev

47일차 Study

수오니니 2021. 12. 18. 00:28

스터디 주제

- HTML 기초 태그

- HTML a 태그

- HTML form 태그

 

 

스터디 내용 

dl 태그 : 정의 목록(List)

  • dt(Definition Term) 태그 : 정의 용어
  • dd(Definition Description) 태그 : 정의 용어 설명

table 태그 : 표 출력 - 하위태그 : tr

  • tr태그 : 행 출력 - 하위태그 : th 또는 td
  • th 태그 또는 td 태그 : 열 출력 - 태그내용으로 값 출력 - 셀(Cell)
  • HTML5에서는 표를 보다 구조적으로 사용하기 위해 thead, tbody, tfoot 태그 추가됨
  • rowspan 속성 : 병합하고자 하는 행의 갯수를 속성값으로 설정
  • colspan 속성 : 병합하고자 하는 열의 갯수를 속성값으로 설정

HTML - A 태그(요청)

a 태그 : 클릭 이벤트에 대한 페이지 이동 관련 이벤트 핸들러 제공

href 속성 : 요청 웹문서(웹프로그램)의 URL 주소를 속성값으로 설정

target 속성 : 웹문서(웹프로그램)을 요청하여 출력될 브라우저를 속성값으로 설정

a 태그의 href 속성값으로 URL 주소를 설정하면 클릭 이벤트에 의해 페이지 이동

앵커(Anchor) : 출력 페이지의 특정 위치로 이동하는 기능

 

HTML 태그 - 3

details 태그 : 상세 설정 제공 - 하위 태그 : summary

summary 태그 : 요약문 작성

meter 태그 : 값을 백분율(%) 형식의 이미지로 출력

  • value 속성 : 출력값을 속성값으로 설정 max 속성 : 최대값을 속성값으로 설정

progress 태그 : 진행 상황을 이미지로 출력

button 태그 : 버튼 출력

  • type 속성 : button(일반 버튼), submit(요청 버튼 - 기본), reset(초기화 버튼)
    onXXX 속성(이벤트 속성) : 이벤트 처리 명령(JavaScript)을 속성값으로 설정
    onclick 속성 : 박스모델에서 클릭 이벤트가 발생될 경우 처리될 명령을 속성값으로 설정

script 태그 : 스크립트 프로그램을 작성

type 속성 : 스크립트 프로그램의 종류를 속성값으로 설정

mark 태그 : 텍스트 강조(형광색)

  • 텍스트 강조 태그 : b, i, strong(주관적인 강조), em(), mark 등

blockquote 태그 : 인용문 출력 - 블럭 레벨 태그-

  • cite속성 : 인용문을 발췌한 페이지의 URL 주소를 속성값으로 설정

audio 태그

  • embed 태그 : 인터넷에 존재하는 멀티미디어 파일을 재생하기 위한 태그 - 플래시 등
  • audio 태그 : 인터넷의 오디오 파일(mp3 파일, ogg 파일 등)을 재생하기 위한 태그
    src 속성 : 오디오 파일의 URL 주소를 속성값으로 설정
    autoplay 속성 : 자동 재생 - 속성값 생략 가능
    controls 속성 : 제어판 재생 - 속성값 생략 가능
    loop 속성 : 반복 재생 - 속성값 생략 가능
    preload 속성 : none, metadata, auto(기본) 중 하나를 속성값으로 설정

videos 태그 : 인터넷의 비디오 파일(mp4 파일, ogv파일, webm 파일 등)을 재생

figure 태그 : 이미지에 대한 설명 출력

 

HTML - Form 태그(요청 - 사용자 입력값을 전달)

  • form 태그 : 사용자로부터 값을 입력받아 웹 프로그램을 요청하여 입력값을 전달
    action 속성 : 요청 웹프로그램(Servelt 또는 JSP)의 URL 주소를 속성값으로 설정
    method 속성 : GET(기본) 또는 POST 중 하나를 속성값으로 설정 - 요청 방식
    • GET : 입력값을 URL 주소에 QueryString으로 전달 - 소용량의 보안이 필요 없는 값
    • POST : 입력값을 리퀘스트 메세지의 바디(Body)에 저장하여 전달 - 대용량 또는 보안이 필요한 값
      (숨겨서 전송 - 일반적)
    enctype 속성 : 입력값을 전달하는 방식을 속성값으로 설정
    name 속성 : 태그의 이름을 속성값으로 설정 - JavaScript에서 속성값을 객체로 표현

input 태그 : 사용자로부터 값을 입력받거나 이벤트 기능 제공 - 입력태그

  • type 속성 : 입력값의 형식에 대한 속성값을 설정
  • name 속성 : 태그의 이름을 속성값으로 설정 - 속성값을 JavaScript에서 객체명으로 표현
  • value 속성 : 입력태그의 초기값을 속성값으로 설정
  • size 속성 : 입력태그의 크기를 속성값으로 설정
  • maxlength 속성 : 입력태그의 입력 가능한 최대 문자 갯수를 속성값으로 설정
  • autofocus 속성(HTML5) : 입력태그의 입력촛점(포커스 - focus)을 위치하도록 설정 - 속성값 생략 가능
  • required 속성(HTML5) : 필수 입력값 설정 - 속성값 생략 가능 
  • placeholder 속성(HTML5) : 입력값에 대한 설명을 속성값으로 설정
  • readonly 속성 : 입력태그를 읽기 전용으로 설정 - 속성값 생략 가능
  • checked 속성 : 우선 선택 설정(radio, checkbox) - 속성값 생략 가능
  • type 속성값
    => hidden : 사용자에게 값을 입력받지 않고 웹프로그램에게 필요한 값을 전달
    => text : 사용자에게 문자열을 입력받아 전달
    => password : 사용자에게 문자열을 입력받아 전달 - 입력값을 특정 문자로 변환
    => radio : name 속성값이 같은 목록 중 하나만 선택하여 전달
    => checkbox : name 속성값이 같은 목록 중 0개 이상을 선택하여 전달
    => file : 파일을 입력받아 전달