[자율학습] 4일차 ~3.10

3.6 폼 구성하기

3.6.1 form 태그

• form는 폼 양식을 의미하는 태그
• action, method 속성 함께 사용

  [형식]
  < form action="서버 url" method="get 또는 post"> < /form>

• action 속성
  • 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 url 주소 작성
• method 속성
  • 입력받은 값을 서버에 전송할 때의 송신 방식
  • 속성값으로 get 또는 post 사용 가능

3.6.2 input 태그

• 로그인 페이지의 아이디와 비밀번호처럼 입력받은 요소 생성할 때 사용
• type, name, value 속성 존재
  • type 필수 작성, name/value는 선택 사용 가능

[형식]
< input type="종류" name="이름" value="초깃값">

• type 속성

  • 입력된 값에 따라 상호작용 요소의 종류 결정
  • 입력 요소 : 아이디, 비밀번호, 파일 업로드, 체크박스 등

• name 속성

  • 입력 요소의 이름 작성
  • 입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정됨

• value 속성

  • 입력 요소의 초깃값 작성

3.6.3 label 태그

• form 태그 안에서 사용하는 상호작용 요소에 이름 붙을 때 사용
• 웹 접근성 향상을 위해 필수 사용 권장

  [예시]
  < label>
  아이디
  < input type="text"> //상호작용 요소
  < /label>

3.6.4 fieldset와 legend 태그

• fieldset 태그로 form 태그 안에 사용된 다양한 상호작용 요소들을 그룹지을 수 있음

[형식]
< form action ="#">
< fieldset>
< legend>그룹이름< /legend>

  <!-- 상호작용 요소 생략--!>

< /fieldset>

/
/

3.6.5 textarea 태그

• 여러 줄의 입력 요소 생성 시에 사용
• input 태그와 달리 닫는 태그 존재

[형식]
< textarea>초깃값 < /textarea>

3.6.6 select, option,optgroup 태그

• select 태그 : 콤보박스 생성 가능

  • 콤보박스에 항목 하나 추가 시에는 option 태그 사용
  • 항목들 그룹으로 묶을 땐 optgroup 태그 사용
  • optgroup 태그로 항목 묶을 때 반드시 label 속성으로 그룹명 지정

    [형식]
    < select>
    < optgroup label = "그룹 이름">
    < option value ="서버에 전송할 값">웹 브라우저에 표시할 값
    < /option>
    </ optgroupd>
    < /select>

• size 속성

  • 콤보박스에서 화면에 노출되는 항목 갯수 지정
  • 생략할 경우 1개의 항목 표시

• multiple 속성

  • 여러 항목 동시에 선택 가능
  • 하나 선택하고 cmd 누르고 다른 항목 클릭하면 됨

• selected 속성

  • 기본 선택 항목 변경 가능

3.6.7 button 태그

• input 태그에서 type 속성값을 submit, reset,button으로 지정해 생성할 수 있음
• 별도의 button 태그로 생성 가능
• 폼을 서버에 전송할 목적이면 submit
• 상호작용 요소에 입력된 내용을 초기화하려면 reset
• 단순한 버튼이면 button으로 지정

  [형식]
  < button type="종류">버튼 내용< /button>

3.6.8 폼 관련 태그에서 사용할 수 있는 추가 속성

• dissabled 속성

  • 상호작용 요소 비활성화
  • input, textarea,select,button 태그에서 사용 가능
  • 태그 비활성화시 입력 요소는 텍스트 입력 불가, 목록 상자는 항목 선택 불가, 버튼 요소는 버튼 클릭 불가

    [형식]
    < 태그 disabled>

• readonly 속성

  • 상호작용 요소를 읽기 전용으로 변경
  • 입력 요소에 텍스트 입력 불가, 요소 선택이나 내용 복사는 가능
  • textarea, input 태그에서 사용 가능

    [형식]
    < 태그 readonly>

• maxlength 속성
  • 입력할 수 있는 글자 수 제한

    [형식]
    < 태그 maxlength = "숫자">

• checked 속성
  • 요소를 선택된 상태로 표시
  • type 속성값이 checkbox나 radio인 요소에만 사용 가능

• placeholder 속성
  • 입력 요소에 어떠한 값을 입력하면 되는지 힌트 적는 용도로 사용

    [형식]
    < input placeholder="입력값에 대한 힌트">

/
/
/

3.7 표 만들기

3.7.1 table 태그

• html에서 표 만들 때 table 태그 사용

  [형식]
  < table>< /table>

3.7.2 caption 태그

• 표 제목 생성 시에 사용
• table 태그 안에 첫 번째로 작성해야 하는 태그

  [형식]
  < table>
  < caption>표 제목< /caption>
  < /table>

3.7.3 tr 태그

• 표에서 행 생성
• tr 태그 하나는 행 하나 생성. 여러 개 생성 하려면 태그 여러 개 사용

[형식]
< table>
< tr>< /tr>
< /table>

3.7.4 th, td 태그

• th, td 태그는 표에서 열을 생성할 때 사용
• th 태그는 표에서 제목을 나타내는 열을 생성할 때
• td 태그는 표에서 일반적인 데이터를 나타내는 열을 생성할 때

  [형식]
  < table>
  < tr>
  < th>제목
  < td>내용
  < /tr>
  < /table>

3.7.5 rowspan과 colspan 속성

• rowspan : 행과 행 병합
• colspan : 열과 열 병합

3.7.6 thread, tfoot, tbody 태그

• thread : 헤더 영역에 해당 하는 행 묶어 그룹화
• tfoot : 푸터 영역에 해당하는 행 묶어 그룹화
• tbody : 본문 영역에 해당하는 행 묶어 그룹화
  • thread>tfoot>tbody 순서로 사용
  • thread, tfoot는 한 번만 사용 가능
  • thread로 그룹화한 행은 th태그로 열 생성해야 함

    [형식]
    < table>
    < thead>
    < th>...< /th>
    < /thead>
    < tfoot>
    < td>...< /td>
    < /tfoot>
    < tbody>
    < td>...< /td>
    < /tbody>
    < /table>

3.7.7 col과 colgroup 태그

• col : 하나의 열을 그룹화
• colgroup : span 속성과 함께 사용해 2개 이상의 열을 그룹화

  [형식]
  < col>
  < colgroup span ="그룹화할 열의 개수">

3.7.8 scope 속성

• 제목을 나타내는 셀의 범위 지정
• th 태그에서만 사용 가능

/
/
/

3.8 멀티미디어 설정하기

• audio 태그와 video 태그로 설정

3.8.1 audio 태그

[형식]
< audio src="오디오 파일 경로" controls>< /audio>

3.8.2 video 태그

[형식]
< video src="비디오 파일 경로" controls>< /video>

3.8.3 source 태그

• audio, video 태그에서 리소스의 경로와 미디어 타입을 명시하는데 사용

  [형식]
  < audio controls>
  < source src="파일 경로" type="미디어 타입">
  
  < video controls>
  < source src="파일 경로" type="미디어 타입">
  < /video>

/
/
/

3.9 웹 페이지 구조를 설계하는 시맨틱 태그

• 시맨틱 웹 : 더 의미 있게 웹 페이지를 설계하는 트랜드
• 시맨틱 태그 : 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그

3.9.1 header 태그

• 웹 페이제엇 헤더 영역을 구분하는데 사용

  [형식]
  < header>
  헤더 구성 요소
  < /header>

3.9.2 nav 태그

• 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분

  [형식]
  < nav> < /nav>

3.9.3 section 태그

• 웹 페이제에서 논리적으로 관련 있는 내용 영역 구분 시에 사용
• 내용의 제목을 나타내는 hn 태그 중 하나를 포함

  [형식]
  < section> < /section>

3.9.4 article 태그

• 웹 페이지에서 독립적인 영역 구분할 때 사용

  [형식]
  < article> < /article>

3.9.5 aside 태그

• 웹 페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워 article 태그나 section 태그로 영역을 구분할 수 없을 때 사용

  [형식]
  < aside>< /aside>

3.9.6 footer 태그

• 웹 페이지에서 푸터 영역을 구분할 때 사용
• 주로 최하단에 위치, 저작권 정보/연락처/사이트 맵 등의 요소 포함

3.9.7 main 태그

• 웹 페이지의 주요 내용을 지정할 때 사용
• 문서에서 반복 등장하는 요소 포함하면 안됨

/
/
/

3.10 태그 종류에 상관없이 사용하는 글로벌 속성

• 태그 종류 상관 없이 모든 태그에서 공통으로 사용할 수 있는 속성

• class 속성

  • 요소에 클래스명 지정할 때 사용
  • 클래스명은 css에서 클래스 선택자로 활용
  • 같은 클래스명은 여러 요소가 중복해서 가질 수 있음

• id 속성

  • 요소에 아이디 지정 시에 사용
  • 아이디는 css에서 아이디 선택자로 활용, 중복 불가

• style 속성

  • css 코드를 인라인으로 작성할 때 사용

• title 속성

  • 요소에 추가 정보 넣을 때 사용

• lang 속성

  • 요소에 사용한 텍스트의 언어 코드 지정할 때 사용

• data -> 속성

  • 사용자 커스텀 속서을 만듦