필기용 블로그

○autocomplete 속성

 ▷해당 속성이 켜져있으면 (= "on"), 이전에 입력한 입력들은 자동 완성이 가능하도록 한다.

○ datalist (<datalist> ~ </datalist>)

 ▷text input element에 미리 정의된 옵션 리스트를 추가해준다.

 ▷텍스트를 입력하면 그 텍스트를 포함하는 옵션들을 보여준다. (해당 옵션이 강제됨?)

 ▷input에서 list 속성에 datalist의 id가 들어가야 한다.

●Page-Structure Elements

 ▷웹 사이트에서 구역을 정의하는 블록수준의 요소들.

 ▷기본적으로는 아무 기능도 없다. (CSS에서 디자인을 정의해야 함)

○header (<header> ~ </header>)

 ▷일반적으로 큰 제목, 로고 등이 있는 큰 띠.

○navigation bar (<nav> ~ <nav>)

 ▷홈 페이지의 메인 섹션으로 연결을 도와주는 bar

 ▷대부분 메뉴 버튼이나 링크, 탭으로 표현됨.

○main content (<main> ~ </main>) (<article>, <section>, <div> 등도 사용됨,)

 ▷웹 페이지의 중심으로, 보여주고 싶은 내용을 보여줌.

  ▷article (<article> ~ </article>) : 주로 외부에서 가져온 내용

  ▷section (<section> ~ </section>) : 구획

○side bar (<aside> ~ </aside>) (주로 main안에서 나타남)

 ▷웹 페이지 주변(옆)의 링크, 인용부, 광고 등

○footer (<footer> ~ </footer>)

 ▷페이지의 바닥 줄로, 주로 작은 정보들, 저작권, 연락처 등을 표시)

○mark (<mark> ~ </mark>)

 ▷내용이 중요함을 알림.

○wbr (<wbr>)

 ○페이지의 줄바꿈 규칙을 무시하고, 줄을 바꿀 수 있는 위치

○figure (<figure> ~ </figure>)

 ▷이미지가 나올 때, 이를 설명하는 내용과 함께 나온다.

 ▷설명 내용 : <figcaption> ~ </figcaption>

○detail(<detail> ~ </detail>)

 ▷기본적으로 안의 내용을 숨기고 있으며, summary (<summary> ~ </summary>)내의 내용만 보여줌.

 ▷클릭하여 내용을 보고 숨길수있음.

○meter(<meter> ~ </meter>)

 ▷Range를 이용하여 길이를 보여줌.

 ▶속성 - range와 유사함.

※Inline-level element / Block-level element

 ○Inline-level element

  ▷문서의 흐름을 바꾸지 않음 (따로 박스를 생성하지 않음)

  ▶종류 (예시) : img, a, em, strong, span - CSS를 위한 그룹화 요소,non-semantic

 ○Block-level element

  ▷자신이 따로 글자 박스를 만듬. 

  ▶종류 (예시) : p, all headings(h1~h6), div - CSS를 위한 그룹화 요소,non-semantic

○ Form

 ▷유저로부터 정보를 수집하는 용도의 일종의 설문지. 서버와 클라이언트간의 커뮤니케이션이 가능

 ▶속성(attribute)

  ▷method : 처리 방식 

   ▷get : 사용자의 입력 데이트를 url에 표시하며, 에티어 크기에 제한이 있고 쿼리 형식임

   ▷post : 데이터 크기의 제한이 없어 많은 양의 데이터를 전달 할 수 있음

  ▷action : 데이터를 넘길 위치

 ▷label (<label> ~ </label>)

  ▷Form의 양식에 이름을 붙인다.

  ▶속성(attribute)

   ▷for : 여기의 id와 같은 input과 연결됨  

 ▷input (<input>)

  ▷사용자로부터 데이터를 입력받는다. - form handler

  ▶속성(attribute)

   ▷name : 이름 (표시되진 않지만, 편의를 위함)

   ▷id : 고유 id

   ▷placeholder : 안내문 (입력하기전 투명한 회색으로 보이는 글자)

   ▷autofocus : 페이지에 들어올 시 자동으로 커서가 이쪽으로 이동됨.

   ▷required : 입력하지 않으면 제출할 수 없음.

   ▷pattern : 정규 표현식 지정, 지정한 표현식과 일치하지 않으면 제출할 수 없음. (date, email, password, search, tel, text, url)

   ▷type : 어떤 형식으로 데이터를 받을 것인지

    ▷"hidden" : 사용자에게 보이지않는 입력 필드. 변경해서는 안 되는 데이터를 함께 보낼 때 사용됨.

    ▷"text" : 텍스트 박스에서 텍스트를 입력받음. (size : 박스 크기, maxlength : 최대 텍스트 길이)

    ▷"submit" : 데이터 제출 버튼 (value : 버튼 이름)

    ▷"reset" : 데이터 리셋 버튼 (value : 버튼 이름)

    ▷"password" : 비밀번호, 입력시 *로 표시된다.

    ▷"checkbox" : 체크박스 (동시에 여러 개 선택가능)

    ▷"radio" : 라디오 버튼 (동시에 하나 선택가능) (checked : 기본적으로 체크되어있음)

    ▷"color" : 색 입력 (Format : #□□□□□□ - 16진수 6자리) 일부 브라우저에서는 색선택 창을 제공한다.

    ▷"email" : 이메일 입력 (Format : ~@~)

    ▷"tel" : 전화번호 입력

    ▷"number" : 수 입력. (min : 최소값, max : 최대값, step : 최소단위, value ; 기본값)

    ▷"range" : 범위 내 값을 선택하는 스크롤 바 (min : 최소값, max : 최대값, value : 기본값)

    ▷"search" : 쿼리에 들어갈 검색 필드 제공 (기능적으로는 text와 동일) (몇몇 브라우저는 필드를 지울 수 있는 x버튼을 제공)

    ▷"url" : URL (Uniform Resource Locator) 입력 (Format : http://www.[deitel].[com])

    ▷"date" : 날짜 입력 (Format : yyyy-mm-dd) (일부 브라우저는 입력창 지원)

    ▷"datetime" : 세계표준시 기준 날짜-시간 입력 (Format yyyy-mm-ddThh:mm:ss.ffTZD - 날짜 | PTDHMS - 기간)

    ▷"datetime-local" : 지역시 기준 날짜-시간 입력 (Format - 위와 같음, TZD부분이 바뀜?)

    ▷"month" : 달 입력 (Format : yyyy-mm)

    ▷"week" : 주 입력 (Format : yyyy-Wnn)

    ▷"time" : 시간 입력 (Format : hh:mm:ss.ff)

 ▷textarea(<textarea> ~ </textarea>)

  ▷여러 줄의 텍스트를 입력받을 수 있는 텍스트 박스

  ▶속성(attribute)

   ▷rows : 행, 초과시 스크롤바가 생김

   ▷cols : 열(글자수), 초과시 스크롤바가 생김

 ▷select(<select> ~ </select>)

  ▷여러 항목중 하나를 선택가능한 박스. (라디오와 유사)

  ▷option(<option> ~ <option>)

   ▷select의 선택가능한 옵션

※internal linking

 ▷a의 href에 #id(이동하고픈 element의 id)를 넣음으로써 id의 위치로 이동가능하다.

○ Table (<table> ~ </table>)

 ▷ 행과 열로 이루어진 표를 통해 데이터를 보여줌

 ▷ 속성

  ▷border : 

 ▷ Caption (<caption> ~ </caption>)

  ▷ 테이블의 주제

 ▷Table Head<thead> ~ </thead>

  ▷ 테이블의 가장 처음(맨 윗줄)의 내용 - Heading Cell 작성

  ▷ Table row (<tr> ~ </tr>) : 테이블의 행 정의

  ▷ Table heading (<th> ~ </th>) : 테이블의 헤딩 셀 정의

 ▷ Table Foot<tfoot> ~ </tfoot>

  ▷ 테이블의 끝(맨 아랫줄)의 내용

  ▷ Table row (<tr> ~ </tr>) : 테이블의 행 정의

  ▷ Table heading (<th> ~ </th>) : 테이블의 헤딩 셀 정의

 ▷Table Body<tbody> ~ </tbody>

  ▷ 테이블의 중간 내용 - 데이터와 값들 

  ▷ Table row (<tr> ~ </tr>) : 테이블의 행 정의

  ▷ Table data (<td> ~ </td>) : 테이블의 데이터 셀 정의

 ▷셀 병합

  ▷rowspan, colspan 속성을 이용하여 셀을 병합할 수 있다. (rowspan = 2 : 2행 병합.)

  ▷th, tr,, td에서 사용가능

○ Unordered list (<ul> ~ </ul>)

 ▷정렬되지 않은 (순서를 매기지 않는) 리스트

 ▷각 항목을 나타내기위해 <li> ~ </li>를 사용한다.

○ Ordered list (<ol> ~ </ol>)

 ▷정렬된 (순서를 매긴) 리스트

 ▷마찬가지로 각 항목을 나타내기 위해 <li> ~ </li>를 사용한다.

※ Nested list (계층 리스트)

 ▷ 상위 <li> ~ </li> 안에 새로운 리스트를 만들어 넣을 수 있다.

○ description list (<dl ~ </dl>)

 ▷ 항목과 그에 따른 설명을 보여주는 리스트

 ▷ <dt> ~ </dt> : 항목 이름

 ▷ <dd> ~ </dd> : 항목 설명