[temp] 07. HTML

temp.WUI·2021년 8월 1일
inputtablet
0

temp

목록 보기
7/12
post-thumbnail

8 표와 양식

🤔<**table><tr><th><td>**

**<table>** display: table (block 요소처럼 사용이 된다.)

표 영역을 설정한다.

boder-collapse: separated는 html 표 테두리 전통 모델이다.

border-collapse: collapse; 를 사용해야 서로 공간으로 나누어진 표가 붙게 된다.

**<tr>** 행 display: table-raw

(세로로 추가된다.)

**<td><th>** 열 display: table-cell

(가로로 추가된다.)

<th> 헤더

<td> 데이터

줄(행)을 먼저 나누어준 뒤 칸(열)을 나누어준다.

테이블 태그는 표를 만들기 위해서만 사용한다.

  • `**<th>**

    속성

    1. abbr - 간단한 설명

    2. headers - 종속되어 있는 요소

      종속된 태그의 id를 입력해 준다.

  1. colspan - 몇칸(열)까지 병합할 것인가 (가로로)(기본값 1)

    1. rowspan - 몇줄(행)까지 병합할 것인가 (세로로)(기본값 1)

      span으로 확장시킬때는 밑에 존재하는 다른 셀들이 밀리게 된다

      → 확장을 시킬 경우 미리 셀을 빼서 구성해야한다.

    2. scope - 기본값이 auto → 밑에 있는 데이터의 머리글

      머리글을 왼쪽에 있는 경우 scope = "raw" (가로)

      but 간단한 표의 경우 범위를 자동으로 유추 할 수 있기 때문에 불필요하다

    • <td>

      속성

      1. colspan

      2. rawspan

      3. headers - th의 id 값을 연결해준다. (해당 카테고리의 th의 id값을 연결)

        +<th>는 header와 id를 동시에 가져서 여러 셀들이 chaining된다.

        *heders로 모든 값들을 연결해 줄 필요는 없다.

🤷‍♀️table 보조 태그

- caption

    표의 제목을 설정 - table당 하나만 사용

    table tag 바로 다음에 작성해야한다.

    테이블 상단 부분에 표시된다.

- 시험 외 범위

    cation밑에 배치해준다.

    ```
  • : 태그를 묶어주는 태그 - 수직으로 열을 한번에 스타일링 해줄 때 사용된다. 
        확장할 경우 span속성으로 늘릴 수 있다.

    <col style="background: blue;" >

    col의 수만큼 필요하다.

기본적으로 레이아웃에 영향을 주지 않고 의미적으로 사용한다.

- <thead>
- <tbody>
- <tfoot>```

🎁FORM

웹 서버에 정보를 제출(전송)하기 위한 (대화형 컨텐츠들을 포함)양식의 범위(틀)를 정의

form태그는 form을 자식으로 사용 할 수 없다. (form 안에 form이 들어올 수 없음.)

속성

  1. action - 어디로 보낼건지

    (사용자가 입력한 데이터를 전송할 주소)전송한 정보를 처리할 웹페이지의 URL

  2. autocomplete 자동완성 기능 (기본값 ON - 과거 입력값에 기반하여)

    (off - 로그인 양식으로 의심되는 경우 보통 무시합니다)

  3. method 서버로 전송할 HTTP-전송프로토콜 (get 기본값)

    1. get ) 데이터가 URL주소창에 담겨져서 보여지게 된다.

    2. post ) 데이터가 URL주소창에 보여지지 않는다. (보안에 용이함)

      → 그러나 완벽하게 숨겨지지 않기 때문에 민감한 정보는 암호화를 시켜주어야한다.

  4. novalidate 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정

    (테스트나 특수한 상황에서 사용) ex- type="email"인데 email 형식을 지키지 않아도 가능

  5. target 서버로 전송 후 응답 받을 방식을 지정 - _self, _blank

    전송할 주소의 URL(action의)을 새 창에 띄울 것인지

  • 인풋의 유효성을 검사하기 위해서는 form 태그 안에 들어있어야한다.
    (invali)
    • 버튼을 클릭하면 제출이 된다. -> 웹 사이트가새로 고침 됩니다.
      새로고침은 form 의 기능이다.
    • 새로 고침을 막는 방법

👌**

: 입력 요소 - HTML: Hypertext Markup Language | MDN

사용자에게 입력 받을 데이터 양식

→ 입력값이 없으면 form은 invalid / 있으면 valid 가상 클래스로 호출 가능

  • :invalid This pseudo-class is useful for highlighting field errors for the user
  • :valid 정상적인 양식이 맞을 경우 사용 할 수있는 클래스

type의 값(유형)에 맞춰서 사용할 수 있는 속성이 달라진다.

속성

  1. autocomplete 자동 완성 기능(기본 값 on) all

  2. autofocus 페이지가 로드될 때 자동으로 포커스 all

    (문서 내에서 고유해야한다.)

    For better usability, avoid using autofocus

    (포커스 가능한 요소나 tabindex 값이 존재하는 요소에)

  3. ckecked 체크가 되어있는 상태로 표시

    type이 radio 나 checkbox일때만 사용가능

  4. form (form의 후손이 아닐 경우에만 사용) all

    form태그 바깥에 작성해야 할 경우 from의 id 값을 가져와서 사용함

    (form태그 안에 있는 데이터와 함께 전송됨)

  5. name 양식의 이름 all

    input 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다

  6. value 양식의 초기 값 all

  7. type 입력받을 데이터의 종류 - input의 유형을 결정

    제출버튼의 경우 form에 하나만 존재해야함

    1. button 일반 버튼 (js를 가지고 설정) (모양만 버튼) value값이 글씨가 됨

      눌러도 어떠한 행동이 일어나지는 않는다.

    2. checkbox 선택 해제 가능

    3. email 유효성 검증 변수 존재

    4. file (accept 속성을 함께 쓰면 파일 유형 지정 가능)

    5. password 값이 가려진다.

    6. submit 전송 의사 (버튼과 형태는 비슷하지만 실제 전송가능) (버튼 이름은 제출)

    7. text (기본값)

    8. image 이미지를 제출 버튼으로 사용가능함

    9. radio 선택하면 해제가 되지 않음

      택 1 로 사용 여러개의 radio를 name 속성으로 연결

      (fildset, label과 함께 사용)

    10. reset form태그 안에 있는 양식만 초기화 (버튼형식- 버튼 이름은 초기화)

    11. search 기본값은 엔터로 검색이다.

    12. tel 전화번호 입력

    13. range 값이 가려진 숫자를 입력하는 컨트롤 바 (min,max,step속성과 함께 사용)

      기본값은 value로 지정

  8. maxlength 입력할 수 있는 최대 글자수 제한 (기본값 존재 :524288)

    type="password,search,tel,text,url"

  9. readonly 수정 불가/읽을 수만 있는 데이터 almost all

  10. disabled 양식을 비활성화 all

  11. placeholder 힌트를 입력(포커스 되면 보여지지 않게 됨

    type="password,search,tel,text,url"

  12. max,min 지정 가능한 최대 값과 최소 값 (type이 number일때)

    11+. step ="n" n단위로 증가 감소

    (위아래 버튼형식으로 나오게 된다.)

  13. multiple 둘 이상의 값을 받을 경우 (type이 email, file일경우)

  14. list 속성 값과 함께 사용하면 선택 요소들이 나온다. (option)

  15. src, alt (type="image")

🌹LABEL (inline)

라벨 가능 요소의 제목 (밑의 이미지에서 Volume과 Cowbell부분)

라벨 가능 요소: , , , ,

  • for 속성을 이용해 id 값을 이용해 연결해서 사용하거나

  • abel 태그로 라벨 가능 요소를 감싸서 사용한다.

    동의하십니까?

😊BUTTON

선택 가능한 버튼

input의 type 속성으로 대체해서 사용가능

속성

  1. autofocus
  2. disabled
  3. form (form 태그 밖에서 제출이 가능하게 해준다.)
  4. name
  5. submit (값: button, reset, submit)

🤦‍♂️TEXTAREA

여러 줄의 일반 텍스트 양식

속성

  1. autocomplete
  2. autofocus
  3. disabled
  4. form - form의 id값
  5. maxlength - (기본값 무한)
  6. name
  7. placeholder
  8. readonly 수정 불가한 읽기 전용
  9. raws 양식의 줄 수

표시된 창 왼쪽 아래쪽에 휘발성으로 사이즈를 조절할 수 있다.

😎

form과는 조금 다른 느낌 form은 전체적인 제출하기 위한 양식의 범위라면, fieldset은 그러한 양식의 한 그룹의 범위를 지정한다.

label과 input 요소와 함께 사용해서 양식을 그룹화 하기 좋다.

  • 같은 목적의 양식의 그룹화

    속성

    1. disabled 비활성
    2. form 의 id 속성값
    3. name 그룹의 이름
  • **제목** fildset 바로 밑에 배치

  • 시험 외 범위

    정해진 선택 값 메뉴 (like 국가설정)

    • 옵션을선택하는 메뉴 자동완성 input 태그에 선택값 <option>목록을 연결해 줄 수 있다. input에 list값과 datalist의 id값을 동일하게 해 연결할 수 있다. 옵션값들 option태그들의 묶음 option들을 분리할 수 있다. label을 이용해 분리된 묶음들에 제목을 붙일 수 있음. 빈태그로도 사용이 가능하긴 한데 추천은 안함. 태그 안의 내용이 제목(label), 제출될 값(value) 대체할 수 있음. 기본값 선택지는 selected로 사용함. 로딩바 <progress> value: 진행값 max: 최고 값 (기본값은 1 / 이럴 경우 value는 0~1.0사이로 표시) 9 전역 속성 모든 HTML 요소에서 공통적으로 사용 가능한 속성 CSS 혹은 JavaScript의 요소 선택기를 통해서 선택 및 접근 (class랑 id는 중복이 가능하긴 한데..? 그렇게 사용은 잘 안하는 듯) 👍CLASS 공백으로 구분된 요소의 별칭을 지정 id와 달리 여러 개 사용 가능하다 .class ✌ID 문서에서 고유한 선택자를 정의 #id 🤳STYLE 요소에 적용할 inline CSS 🎉TITLE 요소의 설명을 나타냄 마우스를 올리면 설명을 나타내거나 보조기기에서 사용이 된다. 😆LANG 요소의 언어를 지정 (ISO 639 -1) This paragraph is English 이 단락은 한글입니다. Ce paragraphe est défini en français. 보통 html에 삽입해서 사용한다. 일반적으로 언어는 하나만 설정되기 때문에 최상위 루트에 언어를 설정해준다. 😏대화형 콘텐츠 사용자와의 상호작용을 위한 요소 , , , , 특정 속성이 있어야 하는 경우 [<audio>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio), [controls](https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio#attr-controls) 속성을 가진 경우. [<img>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/img), [usemap](https://developer.mozilla.org/ko/docs/Web/HTML/Element/img#attr-usemap) 속성을 가진 경우. [<object>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/object), [usemap](https://developer.mozilla.org/ko/docs/Web/HTML/Element/object#attr-usemap) 속성을 가진 경우. [<video>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video), [controls](https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video#attr-controls) 속성을 가진 경우. 특정 조건이 있어야 하는 경우 , type 속성이 hidden이 아닌경우.

      , type 속성이 toolbar인 경우.

🎂TABINDEX

tab 키를 이용해 요소를 순차적으로 포커스 탐색할 수 있다.

대화형 콘텐츠(input)는 코드 순으로 순서가 지정됨

tabindex="0"(기본값)

  • -1은 포커스는 가능하지만 탭 순서에서 제외됨
  • 1 이상의 양수의 값은 순서대로 내려가지 않게 된다. (가능하면 코드 순으로)

비대화형 콘텐츠에 tabindex="0"을 넣어서 탭 이동이 가능하게 만들 수 있다.

  • 시험 외 범위

    • <data--...>

      사용자 정의 데이터 속성을 지정

      js에서 이용할 수 있는 데이터를 html저장하는 용도로 사용한다.

      data-자유롭게-새로-만드는-데이터="value"

      wuiwui

    • deaggable

      drag and drop api를 사용 가능한지의 여부

      draggable="true" 면 드래그할 수 있는 요소임을 나타낸다.

      -api 여부다 보니까 html로 속성을 추가한다고 해서 저 기능을 쓸 수 있지 않음...

    • hidden

      브라우저에서 보여지지 않는다.

profile
temp.WUI
🧩 temp repo
이전 포스트

[temp] 06. HTML

다음 포스트

[temp] 08. CSS

0개의 댓글