본문 바로가기
반응형

html54

[html] option 태그 [html] option 태그 어제 select 태그를 배웠습니다 [html] select 태그 는 드롭다운 목록을 만들 때 사용합니다. 드롭다운 목록의 항목은 태그로 만듭니다. ▶사용 예: zazz pop 태그를 사용할 때 보통 value 속성을 함께 지정하는데 value 속성은 서버에 전송될 값 입니다. 옵션 목록이 길 경우, 관계 있는 옵션들끼리 태그로 묶을 수 있습니다 태그는 나 다음 시간에 다룰 태그 안에 들어갈 수 있습니다. * datalist 태그 : input 요소에서 미리 지정된 옵션 목록을 지정.(자동 완성 기능) ▶함께 사용할 수 있는 속성 속성 속성값 설명 value text 서버에 전송될 값 value값이 없을 경우, option 사이의 내용이 서버에 전달 됨 label text .. 2014. 10. 22.
[html] select 태그 [html] select 태그 요소는 드롭다운 목록을 만들 때 사용하는 태그입니다. 문법: 내용 선택 항목은 요소로 지정합니다. 사용 예: zazz pop select 요소는 html form 양식에서 사용될 수 있습니다. ▶함께 사용할 수 있는 속성 속성 속성값 설명 name 이름 드롭다운 목록의 이름 전송 후 데이터를 참조하거나 자바스크립트에서 요소 참조를 위해 사용 size 숫자 드롭다운 목록에서 보이는 옵션 개수 기본값 1/multiple 속성이 있을 경우 기본값은 4. 속성값이 1보다 크지만, 옵션 전체 개수보다 작으면, 스크롤바가 생김. Chrome, safari에서 정상 작동되지 않을 수 있음 disabled disabled 드롭다운 메뉴가 비활성화 됨 multiple multiple 몇가지.. 2014. 10. 21.
[html] button 태그 [html] button 태그 요소는 버튼을 만드는 태그입니다. 이전 시간에 배운 과 비슷합니다. [html] input type 속성 차이점이라면, button 요소 안에는 텍스트나 이미지 같은 내용을 넣을 수 있다는 것. 문법: 내용 button 태그를 사용할 때는 항상 type 속성을 지정합니다. 그렇지 않으면, 브라우저마다 각기 다른 기본값을 사용합니다. 주의: ie8 이전 버전은 button 태그 사이에 있는 내용을 전송하며, 그 외 다른 브라우저는 value 속성의 내용을 전송 합니다. 따라서, form 양식에서 버튼을 만들려면, 태그보다 을 사용합니다. ▶함께 사용할 수 있는 속성 속성 속성값 설명 name name 버튼 이름. type 버튼 유형 button 누름 버튼을 만듦 reset 초.. 2014. 10. 20.
[html] label 태그 [html] label 태그 태그는 양식 입력 창(form control)을 설명하는 이름표입니다. lable 요소로 묶인 텍스트를 클릭하면, form control(양식 입력 창)이 선택 됩니다. (다시 클릭하면 선택 해제됨) *form control이란-> input, textarea, button, select 요소로 생성된 입력 제어 장치 ▶함께 사용할 수 있는 속성 속성 속성값 설명 for 요소 id label로 묶을 id. 관련 요소의 id와 같음 form form id label이 속한 form의 id lable로 묶는 방법은 두 가지가 있는데, 1. for 속성을 사용하거나 2. 요소 안에 form cotrol을 두는 것. ▶html/css 작성 예를 보겠습니다~ html 이름: 좋아하는 .. 2014. 10. 17.
[html] textarea 태그 [html] textarea 태그 지난 시간에 input 태그의 type 속성을 배우면서 [html] input type 속성 tyep="text"는 한 줄의 텍스트 입력 창을 만든다고 했습니다. 예] ID: ▶실행화면 TEXTAREA 태그 textarea 태그는 여러줄의 텍스트를 입력하는 창을 만듭니다. 문법: 내용 텍스트 창의 너비와 높이는 cols, rows 속성으로 지정하는데 css의 width와 height 값으로 지정할 수도 있습니다. css에서 width, height 값을 설정하면 cols, rows 속성을이무시됩니다. ▶함께 사용할 수 있는 속성 cols 숫자 텍스트 영역이 보이는 너비 . 기본값 20 rows 숫자 텍스트 영역에서 보이는 줄의 개수. 기본값 2 disabled disab.. 2014. 10. 16.
[html] input type 속성 [html] input type 속성(text/checkbox/radio/submit 등) html에서 양식을 만들 때 form 태그를 사용하며 input 태그는 입력 영역을 만듭니다. form 태그(html 양식 만들기) [html] input 태그 입력 영역의 종류는 type 속성을 통해 선택합니다. ▶input type 속성과 속성값 속성 속성값 설명 type 표시할 input 요소의 종류 text 기본값. 한 줄의 텍스트 입력 칸을 만듦(기본 너비 문자는 20) password text 속성과 같지만, 문자를 숨겨서 표시(별표 처럼) checkbox 체크박스를 만듦(선택 항목 중 여러개 선택 가능) radio 라디오 버튼(선택 항목 중 1가지만 선택 가능) button 누름 버튼 submit 전송.. 2014. 10. 15.
[html] input 태그 [html] input 태그 지난 시간엔 태그로 html 양식을 만드는 법을 배웠습니다. form 태그(html 양식 만들기) 오늘 배울 태그는 사용자가 데이터를 입력할 수 있는 입력 영역을 지정하는 태그입니다. form 요소 안에 사용 되며 은 닫는 태그가 없습니다. xhtml에서는 type 속성으로 입력 양식의 여러 가지 종류(라디오 버튼, 체크박스, 입력창, 누름 버튼 등)을 선택할 수 있습니다 ▶사용 예 1. Which flower do you like? rose ivy 2. What is your sexuality? male female ▶실행 화면 rose와 ivy 앞의 체크박스는 type="checkbox"로 만들어진 것이며 make, female은 type="radio"로 submit 은 .. 2014. 10. 14.
form 태그(html 양식 만들기) form 태그(html 양식 만들기) 웹사이트에서 흔히 보는 회원 가입 양식이나 검색 창 등을 만들 때 form 태그를 사용 합니다. ▶사용 예 Firstname: Lastname: 내용 양식의 시작과 끝을 알리는 태그입니다. 안에는 html의 모든 태그를 넣을 수 있습니다. 단 안에 또 다른 을 넣지는 않습니다. 입력 영역을 만드는 태그입니다. type 속성으로 입력 영역의 종류를 지정합니다. 입력 영역의 종류엔, button, checkbox, text, file, submit 등이 있습니다. ▶form 태그와 함께 사용할 수 있는 속성 속성 속성값 설명 action url 양식이 전송될 때 양식 데이터를 전송할 주소 method 양식 데이터를 전송할 때 사용할 HTTP 방식 get 기본값. 데이터(.. 2014. 10. 13.
[html] pre, code 태그 차이 [html] pre, code 태그 차이 코드를 작성할 때 작성한 텍스트가 있는 그대로 출력되기를 원할 때가 있습니다. 태그는 컴퓨터나 프로그래밍 코드 일부를 그대로 표시하고자 할 때 유용합니다 태그는 컴퓨터 프로그램에서 샘플을 출력할 때 태그는 키보드 입력을 지정할 때 태그는 변수를 입력할 때 유용합니다. 역시, 미리 작성된 텍스트를 있는 그대로 표시해주며, 블록 형태로 사용될 수 있습니다. 즉, 여러 줄의 코드를 그대로 출력하고자 할 때 위의 code, samp, kbd, var등을 둘러싼 형태로 사용 합니다. code 사용 예: function Panel(element, canClose, closeHandler) { this.element = element; this.canClose = canClo.. 2014. 9. 29.
[html] 수평선 그리기, hr 태그 [html] 수평선 그리기, hr 태그 html 문서에서 문단을 의미적으로 분리하고자 할 때 hr 태그를 사용할 수 있습니다. html 4.01에서 hr 태그는 수평선을 표현했다면, html5에서는 hr태그를 표현적이기보다 의미적인 요소로 규정하여, 주제를 분리하기 위한 용도로 사용합니다. 닫는 태그는 없음. 너비, 높이 등 스타일을 주고자 할 때는 전부 css 통해 작성합니다. (html에서 사용했던 align, noshade, size, width은 html5에서 퇴화 속성임) [css] hr{width:500px;} -> width로 수평선 너비 지정 hr{height:500px;} -> height로 수평선 높이 지정 hr{color:red;} -> color 로 색상 선 지정 단, chrome .. 2014. 8. 27.
반응형

티스토리툴바