[HTML5] 히든 필드(Hidden field) 사용하는 이유
·
Web/HTML+CSS+JavaScript
Hidden Field란? 화면의 폼에는 보이지 않지만(사용자는 볼 수 없음), 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소 (예제) 히든 필드를 사용해 사용자가 사이트에서 로그인하는 정보를 서버로 넘겨줌 아이디: 비밀번호: 실행하면 아래와 같이, hidden filed의 내용은 보이지 않는다. HTML 삽입 미리보기할 수 없는 소스 하지만,, 위의 예제로는 도대체 hidden field를 왜 사용하는지 이해가 되지 않아서 찾아봤는데,, 위의 예제는 hidden field의 내용은 실제로 사용자의 눈에 보이지 않는다는걸 알려주기 위해 나온듯 하고 Hidden field에 대해 좀 더 정확히?자세히 말하면 사용자가 입력할 필요가 없는 정보/ 사용자가 몰라도 되는 정보,,이지만 폼 전송과 같이 전..
[JavaScript] Object
·
Web/HTML+CSS+JavaScript
Object vs Array //Array var members = ['kbs','k0214','1999k']; console.log(members[1]); //How to get information //Object var roles = { 'programmer' : 'kbs', 'designer' : 'k0214', 'manager' : '1999k' } console.log(roles.designer); How to get information Array : 각각의 정보를 순서에 따라 정리 (각각의 정보는 고유한 식별자가 존재) Object : 순서가 없는 정보 저장 (식별자가 숫자가 아닌 이름으로 존재) 순서 식별자 literal Array O 숫자 [ ] Object X 이름 { } object..
[HTML] form
·
Web/HTML+CSS+JavaScript
사용자가 서버 쪽으로 data를 전송하기 위한 방식으로 HTML의 form 태그 사용 태그 웹 페이지에서의 입력 양식으로, 화면에 보이지 않는 추상적인 태그 (ex. 로그인 창, 회원가입, 등) 속성 action 은 사용자가 입력한 정보를 어디로 보낼 것인지 링크를 설정해준다. 태그 사용자가 양식을 입력하기 위한 태그 속성 type(종류), name(데이터 이름), value(기본 값) type를 text로 설정하면 문자를 입력할 수 있는 폼이 생성됨 type를 password로 설정하면 사용자가 입력하는 문자가 별표 처리 된다. type를 submit으로 설정하면 제출하는 버튼이 생성된다.
[JavaScript] Function
·
Web/HTML+CSS+JavaScript
Function - 일련의 프로그램에 대해 이름을 붙인 것 - 가독성을 높일 수 있음 - 유지 보수의 편의성이 급격히 높아짐 ex) 함수를 호출하는 곳이 1억개라면, 1억개가 동시에 바뀜 function f123(){ console.log(1); console.log(2); console.log(3); } f123(); console.log('A'); f123(); Input console.log(Math.round(1.6)); //2 console.log(Math.round(1.4)); //1 Math : javascript가 내장하고 있는 객체 (객체: 함수들을 관리하는 directory) round : 반올림을 해주는 함수 round 함수를 살펴보면 입력값이 존재함 (1.6과 1.4) functio..
[JavaScript] Array data type
·
Web/HTML+CSS+JavaScript
Array data type (배열) 배열에서는 자릿수가 0부터 counting 된다. 배열의 개수를 셀 때는 0부터가 아닌 1 부터 counting한다. (배열이름.length)이용 배열의 끝에 데이터를 추가하고 싶으면 " javascript array add data" 검색 - (배열의이름.push )사용 //배열 생성 var arr = ['A','B','C','D']; //배열 읽기 console.log(arr[1]); //B console.log(arr[3]); //D //배열요소 바꾸기 arr[2]=3; //배열의 개수 console.log(arr.length); //배열의 끝에 데이터 추가 arr.push('E'); Array & Loop var number = [1,400,12,34,5]; ..
JavaScript 기본 문법과 제어문
·
Web/HTML+CSS+JavaScript
1. Number Data type 이항연산자 - 왼쪽(좌항)에 있는 값과 오른쪽(우항)에 있는 값을 처리해서 하나의 값을 만들어내는 역할 console.log(1); console.log(1+1); console.log(4-1); console.log(2*3); console.log(10/2); 2. String Data type String(문자열) 표현 : " " , ' ' 어떤 데이터를 사용하냐에 따라 연산자의 의미가 바뀜 "+" 이항연산자 -> 결합 연산자 //이항 연산자 console.log(1+1); // 2 //결합 연산자 console.log('1'+'1');// 11 String count string.length console.log('abcd'.length); 3. Variable ..
[HTML] 기본문법 태그
·
Web/HTML+CSS+JavaScript
TAG 태그의 의미가 궁금할 때, "HTML 태그이름 tag"라 검색하면 해당 내용이 나온다. 글자 크기 (h 뒤의 숫자가 커질수록 글자 크기가 작아짐) ... Strong(글자 강조) Underline New line : 단락 처럼 느껴지도록 함 여러번 사용할 수 있음 Paragraph : 단락의 시작과 끝을 표시 (열리는 태그, 닫히는 태그 존재) 처럼 여백을 조절하고 싶을 경우 - CSS이용 (ex) ... image width & src 부분을 attribute라 함 https://unsplash.com/의 이미지들은 저작권에 구속받지 않고 자유롭게 사용할 수 있음 포함관계 포함하고 있는 태그 : 부모태그 포함된 태그 : 자식 태그 List - Unordered List - Ordered List..
[HTML+CSS3] 링크만들기
·
Web/HTML+CSS+JavaScript
태그 속성 설명 href 링크한 문서나 사이트의 주소 지정 target 링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정 download 링크한 내용을 보여주는 것이 아니라 다운로드 rel 현재 문서와 링크한 문서의 관계를 알려줌 hreflang 링크한 문서의 언어 지정 type 링크한 문서의 파일 유형을 알려줌 href 속성 - 링크만들기 태그의 href속성을 사용해 링크, 앵커이름앞에 #을 붙여 앵커임을 표시 - jQuery Mobile을 이용해 모바일 웹사이트나 웹앱을 만들 때 자주 사용 텍스트 또는 이미지 텍스트 또는 이미지 예시 앵커 만들기 앵커란?~~ 메뉴1 메뉴2 메뉴3 내용1 1-1 1-2 1-3 [메뉴로] 내용2 2-1 2-2 2-3 [메뉴로] 내용3 3-1 3-2 3-3 [메뉴로]
BS Kwak
'Web/HTML+CSS+JavaScript' 카테고리의 글 목록