HTML (29) 썸네일형 리스트형 3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 2 ○ , : 텍스트 필드용 데이터 리스트 앞서서 dropdown 형태를 통해서 미리 만들어 둔 값들을 선택하는 포맷을 사용해 보았습니다. 이번에도 다루어볼 데이터 리스트 형태의 태그 역시 비슷합니다. 하지만 데이터 리스트 타입의 태그는 텍스트 필드에 연계하여 사용하는 리스트라는 점에 차이가 있습니다. 아마 지금은 바로 와닿지 않는 기능일 것입니다. 한번 예제를 만들어보면서 확인해 보겠습니다. 옵션 텍스트1 옵션 텍스트2 리워드 종류 선택 리워드 A세트 리워드 B세트 리워드 C세트 HTML 삽입 미리보기할 수 없는 소스 dropdown 태그와의 차이점은, 일단 입력란 자체는 '텍스트'입력 폼이라는 점입니다. 그리고 그 텍스트 입력 폼에서 사용할 수 있는 데이터 리스트 보기가 마련되어 있다는 점이죠. 그래서 .. 3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 1 지금까지 살펴본 기본적인 input 태그들은 어느 정도 마무리 되었습니다. 지금부터는 input 이외에 단독으로 사용되는 몇 가지 입력 태그에 대해서 살펴보도록 하겠습니다. ○ : 여러 줄의 텍스트 입력 폼 가입 양식에서 여러 줄의 요청사항이나, 메모, 하고 싶은 말 등을 입력받기 위해서는 기존 input type에서 제공하는 텍스트 입력 방식으로는 공간이 부족할 것입니다. 여러 줄의 텍스트를 자유롭게 입력받기 위해서는 태그를 사용해야 합니다. 태그에서 사용되는 속성은 대표적으로 cols, rows가 있습니다. 이는 이름에서 유추할 수 있다시피, cols를 통해 가로의 길이를 지정하고 rows로 입력 필드 세로(줄)의 길이를 지정할 수 있습니다. cols의 경우 입력하는 숫자만큼의 영문 텍스트를 표시하는.. 3. 입력 양식 작성(2) - input 태그 7 이번 시간에는 잠시 분위기를 환기하기 위해, 간단하게 텍스트용 input type에서 사용하게 되는 유용한 속성을 살펴보려고 합니다. 바로 autofocus / placeholder / readonly / required입니다. 이 속성들은 우리가 흔히 웹페이지나 앱에서 친숙하게 사용하는 기능들이라 금방 이해가 가실 것입니다. 필수적인 요소임에도, 사용법은 간단하기 때문에 빠르게 훑고 예제를 살펴보도록 하겠습니다. 우선 autofocus는 어떤 텍스트 입력 input type이 있는 페이지를 열었을 때, 유저가 클릭하지 않더라도 해당 폼에 커서가 자동으로 클릭되어 있도록 지정하는 속성입니다. placeholder는 우리가 앱이나 홈페이지에서 항상 접하는 것들입니다. 텍스트 입력 란에 '힌트'를 표시하는 .. 3. 입력 양식 작성(2) - input 태그 4 계속해서 input 타입의 여러 종류에 대해서 살펴보도록 하겠습니다. 이번에는 날짜, 시간과 관련된 태그를 살펴보도록 하겠습니다. ○ type="date" / "month" / "week" : 날짜 입력을 위한 input type 타입 값으로만 보았을 때는 일/월/주를 단일로 입력하는 필드일 것으로 보이지만, 실제로 각 타입에 따라 입력되는 값들은 다음과 같습니다. - data : yyyy-mm-dd - month : yyyy-mm - week : 특정 주를 선택해 표시(yyyy-w) 이 태그는 설명하는 것보다는 직접 태그를 입력하고, 결과를 보는 것이 좋을 것으로 보입니다. 아래 코드를 참고해 주세요. 날짜 지정 타입 사용예시 HTML 삽입 미리보기할 수 없는 소스 ○ type="time" / "dat.. 3. 입력 양식 작성(2) - input 태그 2 지난 아티클부터 input type 종류별 특성에 대해서 하나씩 살펴보고 있습니다. 계속해서 다양한 input type에 대해서 살펴보도록 하겠습니다. ○ type="search" / "url" / "email" / "tel" : 입력 유형 자동 인식타입 위 속성들의 경우, HTML5 이전까지 각 입력값의 종류를 직접 확인하는 등 텍스트 필드에서 구분하기 어려웠던 속성들입니다. HTML5에 들어서는 intput type을 명시해 주면 브라우저나 작동 환경에 따라서 다소 차이는 있지만, 해당 필드에서 입력되는 값이 어떤 유형인지 자동으로 인식해 분류할 수 있게 되었습니다. - search : 일반적인 텍스트 필드처럼 보이지만, '검색'을 위한 텍스트 필드로 인식됩니다. 자동으로 X 버튼이 노출됩니다. - .. 3. 입력 양식 작성(1) - 기본 form 태그 웹 상에서, 특정 값을 입력하여 서버나 DB로 값을 보내 처리하는 등의 동작을 위해서는 여러 가지 입력 폼(form)을 사용하게 됩니다. 아마 html에 조금 익숙하신 분들이라면 태그를 가장 먼저 떠올리실 분들이 많을 텐데, 일단 여기서는 간단하게 기본 폼 태그인 에 대해서 살펴보면서 기본적인 내용을 먼저 익히도록 하겠습니다. 기본 태그의 유형은, 태그 사이에 속성과 폼 관련 요소들을 삽입하는 형태로 구성됩니다. 폼 요소 위에서 기술된 '속성'은 몇 가지 대표적인 속성들이 있습니다. 하나씩 살펴보도록 하겠습니다. ○ name 이 속성은 JS로 폼을 제어하는 경우에 사용할 폼의 이름을 의미합니다. ○ action 태그의 내용을 처리할 서버 프로그램을 지정합니다. 예를들어 해당 폼을 실행했을 경우 서버로 내.. 2. 내용 입력하기(6) - 하이퍼링크 삽입 하이퍼링크를 삽입하는 것은 대부분 크게 어렵지 않게 사용하시고 계실 것입니다. 그래도 html 태그 활용 중 의외로 중요한 부분이니 간단하게라도 짚고 넘어가도록 하겠습니다. ○ 와 href 속성 - 하이퍼링크 생성 하이퍼링크 생성에는 태그를 사용하게 됩니다. 여기에 href 속성 값으로 링크를 하고자 하는 url을 작성하게 되지요. 태그 사이에는 텍스트를 삽입하거나, 태그 등을 이용해 이미지를 삽입하게 됩니다. 그러면 해당 값을 클릭했을 때 링크를 띄워주게 되는 형태로 작동하게 됩니다. 텍스트 또는 이미지 url 여기에서 새로운 탭으로 링크를 출력하기 위해서는 target 속성을 사용해야 합니다. 새로운 탭에서 띄울 경우에는 _blank를 사용하게 됩니다. 이를 별도로 지정하지 않게 되면, _self 즉.. 2. 내용 입력하기(5) - 오디오/비디오 삽입 이번 시간에는 html 웹 문서에서 오디오, 비디오 파일뿐만 아니라 기타 다양한 멀티미디어 타입의 파일을 첨부하는 방법에 대해서 살펴보겠습니다. 현재는 비슷한 동작을 하는 태그가 여러 가지 존재하는데, 실제로 자신이 즐겨 방문하는 웹페이지에서 어떤 식으로 첨부하는지 소스를 참고하는 것도 큰 도움이 될 것입니다. ○ 실제로 다음과 같은 방식으로 파일명을 입력하여 게시해 보도록 하겠습니다. ○ - 다양한 타입의 파일 삽입 태그는 일단 종료 태그 없이 단독으로 사용하며, 과거에 비디오 링크 등을 웹 게시판에 붙일 때 많이 쓰셨던 것을 기억하실 겁니다. 현재는 , , 등의 태그를 지원하지 않는 브라우저일 경우 사용하게 됩니다. src 속성을 이용해서 파일의 위치를 표시합니다. ○ , - HTML5에서의 비디오,.. 이전 1 2 3 4 다음
