HTML 80

양식 - LABEL

라벨 가능 요소(labelable)의 제목(Caption). for 속성으로 라벨 가능 요소를 참조(연결)하거나 콘텐츠로 포함. 라벨 가능 요소: , , , , 속성 의미 for 참조할 라벨 가능 요소의 id 속성 값 동의하십니까? 동의하십니까? for을 이용해서 해당 label은 checkbox와 연결되었다. 또한 label에서 input을 이용해서 checkbox와 연결할수 있는데 주로 2번째 방식을 많이 사용한다. 1번째 사용할때는 2번째와같이 한번에 쓸수 없고 나눠서 써야할때 이용한다고 한다. 이와같이 한다면 텍스트를 클릭시 check박스에 체크표시가 된다. 검색 다음과 같이해도 "검색" 글씨를 클릭해도 text칸에 포커스가 된다.

HTML/요소 2021.01.05

양식 - INPUT

사용자에게 입력 받을 데이터 양식. 속성 의미 값 기본값 특징 autocomplete 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 on, off on autofocus 페이지가 로드될 때 자동으로 포커스 Boolean 문서 내 고유해야 함 checked 양식이 선택되었음을 표시 Boolean type속성 값이 radio, checkbox일 경우만 disabled 양식을 비활성화 Boolean form form의 id 속성 값 해당 form의 후손이 아닐 경우만 list 참조할 datalist의 id 속성 값 max 지정 가능한 최대 값 숫자(Number) type속성 값이 number일 경우만, min속성보다 큰 값만 허용 min 지정 가능한 최소 값 숫자 (Number) type..

HTML/요소 2021.01.05

양식 - FORM

웹 서버에 정보를 제출하기 위한 양식 범위를 정의. 이 다른 을 자식 요소로 포함할 수 없음. 속성 의미 값 기본값 action 전송한 정보를 처리할 웹페이지의 URL URL autocomplete 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 on, off on method 서버로 전송할 HTTP 방식 GET, POST GET name 고유한 양식의 이름 novalidate 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 target 서버로 전송 후 응답받을 방식을 지정 _self, _blank _self 여러가지 양식들을 form이라는 태그안에 묶을 수 있다. cf. get방식을 이용하면 상단 주소에 정보가 노출이 되기 때문에 post 방식을 이용한다. 예를들어, 로그..

HTML/요소 2021.01.05

표 콘텐츠 - COLGROUP, COL

표의 열들을 공통적으로 정의하는 컬럼()과 그의 집합(). (Column, Column Group) 속성 의미 값 기본값 span 연속되는 열 수 숫자(number) 1 다음과 같이 입력을 하게 된다면 th태그의 스타일링을 수정할때 일일이 하나 다 해야한다는 불편한 점이 있다. 데이터 타입과 값 타입 값 1 알파벳 A 2 숫자 7 그래서 보안된 점이 col인데, col은 colgroup태그 안에 위치한다. col은 기본적으로 caption밑이거나 첫번째 tr태그 위에 적어야 한다. 데이터 타입과 값 타입 값 1 알파벳 A 2 숫자 7 하지만 col태그도 또한 여러개 있으면 불편한 점이 있다. span을 이용해서 여러개의 열도 한꺼번에 지정할 수 있다. 데이터 타입과 값 타입 값 1 알파벳 A 2 숫자 7

HTML/요소 2021.01.05

표 콘텐츠 - TH

‘머리글 칸’을 지정 속성 의미 값 기본값 abbr 열에 대한 간단한 설명 headers 관련된 하나 이상의 다른 머리글 칸 id 속성 값 colspan 확장하려는(병합) 열의 수 1 rowspan 확장하려는(병합) 행의 수 1 scope 자신이 누구의 '머리글 칸'인지 명시 col : 자신의 열 colgroup : 모든 열 row : 자신의 행 rowgroup : 모든 행 auto auto cf. 소스코드를 짤때 id는 고유한 성질을 가지고 있기 때문에 너무 흔한이름말고 고유한 단어를 이용하는 것이 좋다. 예를들어서 data 이렇게 쓰는것보다 th-data이런식으로 쓰는것이 좋다. 데이터 타입 값 알파벳 A 숫자 7 테이블은 반드시 표를 만드는 목적으로 한다. 그외의 레이아웃을 만든다는 목적이나 다른것..

HTML/요소 2021.01.05

표 콘텐츠 - TABLE

, , , 데이터 표()의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성. (Table Row, Table Header, Table Data) cf. th는 테이블 헤더로서, 제목이기 때문에 기본적으로 굵은 글씨를 지원한다. 테이블 태그는 표를 만들때 사용하는 것이다. 하지만, 처음에는 영역으로 나눠서 글짜가 출력이 되지만, 테두리가 없어서 육안으로 영역을 구분하기가 힘들다. 그래서 CSS로 스타일링해서 보기 좋게 만들어야한다. 타입 값 알파벳 A 숫자 7 table{ border-collapse: collapse; //경계선 사이에 떨어져 있는것을 없앤다. } th{ //기본적으로 굵은 글씨를 지원하기 때문에 bold를 쓰지 않아도 된다. border : 1px solid red; //경계선..

HTML/요소 2021.01.04