폼 관련 태그들 - 사용자 입력을 위한 태그 5 1. type="submit", type="reset" - 서버 전송, 리셋 버튼 넣기 리셋(reset)버튼은 요소에 입력된 모든 정보를 재설정해 사용자가 입력한 내용을 모두 지울 수 있습니다. 이때 value 속성을 사용해 버튼에 표시할 내용을 지정합니다. type="submit"은 사용자가 폼에 입력한 정보를 서버로 전송하는 submit 버튼을 넣습니다. submit 버튼으로 전송된 정보는 처음에 태그에서 지정한 폼 처리 프로그램에 넘겨집니다. 이 기능은 브라우저와 상관없이 사용 가능합니다. 기본형 : 메일 등록 메일 주소 메일 등록 메일 주소 2. type="image" - 이미지 버튼 넣기 type="image"를 사용하면 submit 버튼 대신 전..
폼 관련 태그들 - 사용자 입력을 위한 태그 4 1. type="color" - 색상 선택 상자 표시하기 color 필드는 색상표에서 사용자가 색상을 선택할 수 있게 해줍니다. 색상 값은 16진수로 표시하고 "red"나 "blue" 같은 색상 이름은 사용할 수 없습니다. type="color"라는 속성이 없던 HTML4에서는 자바스크립트를 이용해 색상표를 직접 프로그래밍해 통합시켜야 했지만 HTML5에서는 간단히 type='color"속성만 이용하면 됩니다. 기본형 : 원하는 색상을 고르세요 선호 색상 원하는 색상을 고르세요 선호 색상 2. type="date", type="month", type="week" - 날짜 표시하기 웹 문서나 애플리케이션에 달력을 포함시키고 싶다면 type="date"나 ty..
폼 관련 태그들 - 사용자 입력을 위한 태그 3 type="number" - 숫자 입력하기 type="number"를 사용하면 사용자가 입력한 내용을 숫자로 인식합니다. type="number"라고 지정하면 입력 창에 숫자를 직접 입력하는 것이 기본이지만 브라우저에 따라 스핀 박스가 표시되기도 합니다. 스핀 박스란 입력 창 오른쪽에 작은 화살표를 표시해 화살표를 클릭하면 숫자를 증감시킬 수 있게 한 것입니다. 크롬이나 익스플로러 창에서는 일반 텍스트 필드처럼 표시되지만 파이어폭스에서는 스핀 박스로 표시됩니다. 기본형 : 스핀박스 예제 주문 개수 : 개 주문 개수 : 개 type="range" - 슬라이드 막대로 숫자 지정하기 type="range"는 슬라이드 막대를 움직여 숫자 값을 입력하게 합니다. 오..
폼 관련 태그들 - 사용자 입력을 위한 태그 2 1. type="hidden" - 히든 필드 만들기 히든(hidden) 필드는 화면상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소입니다. 사용자에게 굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 히든 필드로 보통 입력합니다. 히든 필드를 삽입할 때는 name 속성을 이용해 히든 필드의 이름을 지정하고 그에 대한 값은 value 속성을 이용해 서버로 넘겨줍니다. 예를 들어 아이디 중복 체크하는 것으로 사용자가 회원 가입 양식을 작성하고 서버로 전송할 때 hidden 필드의 값도 함께 서버로 전송됩니다. 기본형 : 2. type="text" - 텍스트 필드 만들기 텍스트 필드는 한 줄짜리 일반 텍스트..
폼 관련 태그들 - 사용자 입력을 위한 태그 1 아이디나 검색어를 입력하는 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 태그를 이용해 넣습니다. 태글로 넣을 수 있는 항목은 아이디나 비밀번호를 비롯해 이메일 주소, 전화번호, 날짜, 시간, 이미지, 버튼 등 다양합니다. 1. 태그 - 입력 항목 만들기 웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있습니다. 사용자가 내용을 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데 이런 부분을 만들 때 사용하는 태그가 태그입니다. 체크박스나 로그인 버튼처럼 사용하자 클릭하는 버튼도 태그를 이용합니다. 태그로 만들 수 있는 폼 요소가 상당히 많은데 그것은 태그 안에 있는 type 속성을 이용해 구분합..
폼 관련 태그들 - 폼 만들기 2 태그 - 폼 요소에 레이블 붙이기 태그는 폼 요소에 레이블을 붙이기 위한 것입니다. 레이블이란 입력 창 옆에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트를 말합니다. 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있습니다. 태그는 아래 기본형과 같이 두가지 방법으로 사용할 수 있는데 첫 번째 방법은 태그 안에 폼 요소를 넣는 것입니다. 두 번째 방법은 요소와 폼 요소를 따로 사용하고 태그에서는 for 속성을 이용하고 폼 요소에서는 id 속성을 이용해 서로 연결하는 것입니다. 기본형 : 레이블 또는 아이디 비밀번호 라디오 버튼과 체크박스에서 사용하는 태그 스마트폰처럼 화면이 작은 기기에서 라디오 버튼이나 체크박스 부분을 정확히 터..
폼 관련 태그들 - 폼 만들기 1 웹 폼은 이름에서도 알 수 있듯이 특정 항목에 사용자가 무언가를 입력하는 형태로 우리가 익숙하게 사용하는 로그인 창이 대표적인 웹 폼의 사례입니다. 폼과 관련된 대부분의 작업은 정보를 저장하거나 검색, 수정하는 일인데 이런 작업은 모두 데이터베이스를 기반으로 합니다. 텍스트 상자나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그를 이용하고 그 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP, JSP 같은 서버 프로그래밍을 이용합니다. 태그 - 폼 만들기 태그는 폼을 만드는 가장 기본적인 태그로 태그와 태그 사이에 여러 폼 요소와 관련된 태그를 넣습니다. 태그는 몇 가지 속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길 것인지, 서버에서 어떤 프로..
SVG 이미지 웹에서 사용할 수 있는 이미지 파일 형식은 gif나 jpg, png 이외에 svg파일도 사용할 수 있습니다. svg 이미지는 크기를 조정해도 이미지가 깨지지 않는 벡터 이미지로 로고나 아이콘에서 많이 사용되며 최근 많은 관심을 끌고 있는 데이터 시각화에서 차트나 다이어그램, 지도 등을 구현할 때도 많이 사용됩니다. svg 이미지는 태그를 이용해 파일 형태로 삽입할 수도 있지만 태그를 이용해 직접 만들 수도 있습니다. 다시 말해 포토샵이나 일러스트레이터 같은 그래픽 편집 프로그램뿐만 아니라 웹 브라우저나 문서 편집기에서도 편집할 수 있습니다. 예를 들어 이미지 폴더에 들어있는 svg 파일은 이미지 파일이지만 더블 클릭하면 웹 브라우저에서 즉시 확인할 수 있습니다. 또한 웹 에디터 프로그램에서..
링크 만들기 '링크'는 웹 문서가 다른 문서와 구별되는 가장 큰 특징입니다. 클릭만 하면 연결된 곳으로 즉시 이동해 웹 사용을 더욱 편리하게 해주기 때문입니다. 태그, href 속성 - 링크 만들기 링크를 만드는 태그는 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 됩니다. 링크를 이용해 다른 문서나 사이트로 연결하려면 많은 속성들 중 기본적으로 href 속성을 이용해 주소를 지정해야 합니다. 기본형 : 텍스트 1. 태그 안에서 사용할 수 있는 주요 속성 속 성 설 명 href 링크한 문서나 사이트의 주소를 입력합니다. target 링크한 내용이 표시될 위치(현재 창 또는 새창)를 지정합니다. download 링크한 내용을 보여 주는 것이 아니라 다운로드 합니다. rel..