양식(8)
-
[HTML] 양식(8) - progress
▶ 작업 완료의 진행률을 표시. - 로딩바(loading bar)와 유사. 속성 max: 작업의 총량. 완료되었을 때의 값을 의미. - 숫자 값 입력. value: 작업의 진행량. - 숫자 값 입력. - max 속성을 생략할 경우 value 속성의 값은 0~1 사이의 숫자여야 함. - value 속성에 대한 값은 Javascript를 통해 작업하는 편임. 값이 가변하기 때문. - max 속성을 생략 시 value 속성 값은 0~1 사이의 값이어야 함.
2020.08.30 -
[HTML] 양식(7) - select, datalist, optgroup, option
▶ , , , 옵션(, )의 선택 메뉴()나 자동완성()을 제공. - : 사용자에게 선택할 수 있는 옵션 제공. - : 제공된 옵션을 그룹화. - : 제공된 옵션은 셀렉트를 통해 사용자가 선택. - : 자동완성 기능으로써 제공. select { display: inline-block; } datalist { display: none; } optgroup, option { display: block; } ▶ 옵션을 선택하는 메뉴. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 설정. - on, off 값. 기본 값: on disabled: 선택 메뉴 자체를 선택할 수 없도록 비활성화. - boolean값. form: 선택 메뉴가 속할 하나 이상의 의 id..
2020.08.30 -
[HTML] 양식(6) - fieldset, legend
▶ , 같은 목적의 양식을 그룹화()하여 제목()을 지정. - 그룹화는 , 제목은 를 통해 지정. fieldset, legend { display: block; } - 은 같은 목적의 양식을 그룹화함. 속성 disabled: 그룹 내 모든 양식 요소를 비활성화. - boolean 값. form: 그룹이 속할 하나 이상의 의 id 속성 값. - 외부에서 연결해 사용 가능. - 의 범위 밖에서 특수하게 작동해야 하는 경우 외부에 위치한 채 연결해서 사용 가능하도록. name: 그룹의 이름.
2020.08.30 -
[HTML] 양식(5) - textarea
▶ 여러 줄의 일반 텍스트 양식을 작성할 때 사용. 한 줄의 경우 사용을 권장. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 설정. - on, off 값. 기본 값: on autofocus: 페이지가 로드될 때 자동으로 포커스. - boolean 값. - 문서 내에서 고유해야 함. disabled: 양식을 비활성화. - boolean 값. form: 의 id 속성 값 - 해당 의 후손이 아닐 경우만 해당. - 의 범위 밖에서 특수하게 작동해야 하는 경우 외부에 위치한 채 연결해서 사용 가능하도록. - 이 submit될 때 연결이 되어 있다면 이에 연결된 에 입력된 정보 또한 함께 제출됨. maxlength: 입력 가능한 최대 문자 수. - 숫자 값. ..
2020.08.30 -
[HTML] 양식(4) - button
▶ 선택 가능한 버튼을 지정. 버튼은 을 이용해서도 대체 가능하지만 조금 더 직관적으로 을 사용해 조금 더 특화된 버튼을 만듦.
2020.08.30 -
[HTML] 양식(3) - label
▶ 라벨 가능 요소(labelable)의 제목(Caption)을 지정. 라벨 가능 요소: , , , , for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함. - for 속성: 참조할 라벨 가능 요소의 id 속성 값. - 라벨 가능 요소를 참조하거나 포함하는 경우 체크박스가 아닌 텍스트만 클릭해도 체크박스에 체크가 됨. label { display: inline; } - label이 를 포함하는 경우. - 이때 검색이라는 텍스트만 클릭해도 입력창에 focus가 잡힘.
2020.08.30