자바스크립트 유효성검사가 가장 필요한곳은 바로 어디일까요? 아마 회원가입 페이지 일 것 입니다. 웹사이트에서 회원가입을 하려고하면 계속 양식에 어긋난다고 다시 입력해달라는 팝업창들 많이보셨죠? 짜증났던 경험 다들 한번씩 있으실겁니다. 하지만 이 유효성검사를 통해 사용자가 회원가입시 정보를 잘못 입력하는 경우를 막아줄 수 있답니다. 회원가입 폼 유효성검사 예제 SIGN UP 회원기본정보 아이디: ※4-12자의 영문 대소문자와 숫자로만 입력 비번: ※4-12자의 영문 대소문자와 숫자로만 입력 비번확인: 메일주소: ex)wjdxo513@naver.com 이름: 개인정보 주민등록번호: - 예) 123456-1234567 생일: 년 월 일 관심분야: 컴퓨터 인터넷 여행 영화감상 음악감상 자기소개:
주민등록번호에는 유효성 검사 로직이 있습니다. 그 방법은 다음과 같습니다. 맨 마지막 한 자리를 제외하고 각 자릿수의 숫자들에 각각 지정된 숫자들을 곱해서, 그 값을 모두 더합니다. 1 2 3 4 5 6 - 1 2 3 4 5 6 7 X X X X X X X X X X X X X 2 3 4 5 6 7 8 9 2 3 4 5 n1 +n2 +n3 +n4 +n5 +n6 +n7 +n8 +n9 +n10 +n11+n12 =N 각 자릿수에 지정된 수의 곱을 더한 값을 N이라고 하면, N을 11로 나눈 나머지를 11에서 뺀 수가 주민등록번호 마지막 자릿수와 일치하면 정상적인 주민등록번호입니다. 주민등록번호 유효성 검사 예제 주민등록 유효성검사 주민등록번호: - 예) 123456-1234567 [JavaScript] 회원가..
어느 언어에도 마찬가지겠지만 자바스크립트에도 배열이 존재합니다. 배열을 사용할 때는 어떤 경우일까요? 배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용할 수 있습니다. 100개의 데이터를 처리해야한다고 칩시다. 배열을 사용하지않고 100개의 데이터를 저장시키려면 100개의 변수가 필요하겠죠? 그렇다면 값을 넣는 코드도 출력코드도 100번씩 적어야할것입니다. 굉장히 코딩하기도 힘들고 코드량도 길어집니다. 하지만 배열을 선언한다면 효율적으로 코드를 짤 수 있습니다. 100개의 주소값을 가지는 배열을 하나 선언하고 그 주소값에다가 For문을 이용해 값을 넣어주고 출력을 해준다면 굉장히 효율적인 코드가 되기 때문입니다. 자바스크립트 배열의 선언 방법 자바스크립트의 배열선언 방법은 다른 언어들과는 조..
자바스크립트란? 자바스크립트를 한마디로 요약하자면 웹을 풍부하게 만들어주는 작고 가벼운 언어입니다. 미국의 넷스케이프 커뮤니케이션즈사(Netscape Communications)가 개발한 스크립트 언어이며. 웹 브라우저에서 실행하는 스크립트 언어를 기술합니다. 작고도 빠르기 때문에 웹문서를 동적으로 꾸밀 때 가장 널리 쓰입니다. 언어 규격은 자바의 부분 집합(subset)으로 되어 있습니다. 하이퍼텍스트 생성 언어(HTML) 문서를 작성하는 수준의 사용자가 사용하는 것을 주안점으로 하여 자바의 언어 규격으로부터 변수의 형(정수형이나 문자열형 등)을 생략하거나 새로운 클래스 정의를 할 수 없도록 하였습니다. 스크립트는 HTML 문서 속에 직접 기술하며, ‘’라는 꼬리표를 사용합니다. 프로그래밍 입문자들은 ..
웹사이트를 만들때 아이콘은 필수적인 요소입니다. 아이콘을 사용하면 방문자들에게 좀 더 직관적으로 기능에 대해 어필이 가능하죠. 웹사이트의 기능을 글로 설명하는것이아니라 아이콘 하나로 대체함으로써 좀 더 깔끔한 웹페이지 구축도 가능합니다. 웹사이트에 픽토그램(그림문자)을 쉽게 넣는 방법이 있습니다. 바로 웹 아이콘 폰트를 사용하는 것인데요. 웹 아이콘 폰트는 여러 종류가 있으나 그 중에서 Font Awesome가 제일 유명합니다. Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리입니다. 이번 포스팅에서는 Font Awesome의 사용법에 대해 다뤄보려 합니다. Font Awesome 공식 사이트 Font-Awesome의 장점 1. Html Font 속성이 모두 사용 가능하다. Font..
HTML5은 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현·제공하도록 진화한 “웹 프로그래밍 언어“입니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 아래는 Html으로 만드는 테트리스 게임입니다. 아래에 war파일 형태로 소스 첨부하오니 하시고 싶으신분은 import해서 한번 해보세요.!! 테트리스 게임 [Html] 으로 만드는 간단한 장애물 피하기게임
HTML5은 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현·제공하도록 진화한 “웹 프로그래밍 언어“입니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 아래는 Html으로 만든 간단한 총알 피하기 게임입니다. 처음에는 총알이 느리지만 시간이 갈수록 총알도 빨라지고 많이 나오기때문에 갈 수록 어려워집니다. 아래에 소스 첨부하오니 필요하신 분들은 Import해서 한번 해보세요. 장애물 피하기게임 [Html] 으로 만드는 테트리스 게임
태그는 아주 다방면으로 활용이 가능한 유용한 태그입니다. 주로 와 태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용됩니다. span 태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 span태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당이 됩니다. 태그로 요소를 감싸면 CSS나 Javascript로 그 부분을 변형시키는것이 가능해 집니다. 태그 사용법 태그 속성 비고 display diplay요소 변경 width 가로크기 height 세로크기 background-color 배경색 변경 color 글자 색 변경 font-style 글자 형식 변경 margin 외부 여백설정 padding 내부 여백설정 border 테두리 설정 1. display는 태그의 요소를 변경..
오늘은 div태그에 대해 알아보겠습니다. div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다. div태그 사용법 & 예제 태그 속성 비고 style 스타일 width 가로 크기 height 세로 크기 border 테두리 굵기 background-color 배경 색상 float 정렬 margin 여백 1. style은 태그의 스타일을 지정해주는 것으로 다른 속성들을 사용할 수..
HTML이나 XML같은 언어를 사용하다보면 Margin과 Padding이라는 속성을 많이 보셨을겁니다. 몇몇분들은 이 두가지 속성의 의미를 잘 모르고 쓰시는 분들도 있더군요. 두 속성 다 여백을 주는 의미에서는 같지만. 분명 다른점도 존재합니다. 이번 포스팅에서는 Margin, Padding 속성에 대해 정확히 알아보도록 하겠습니다. Margin과 Padding 두가지 속성의 차이점은 위 사진 하나로 충분히 설명이 가능합니다. Margin은 Object와 화면과의 여백(외부여백)을 말하며 Padding은 Object내의 내부여백을 의미합니다. 그럼 아래 예제를 보면 완벽히 이해할 수 있으실겁니다. 예제 100*100 nomal 100*100 margin 100*100 padding 100*100 marg..
html안에서 아무리 Enter를 치거나 스페이스를 하여 공백을 표시한다고해서 브라우저에 Enter나 공백이 나오지는 않습니다. 그래서 우리는 Enter는 태그를 사용함으로써 구현하고 공백은   라는 문구를 삽입해 공백을 표현하고는 합니다. 하지만 이렇게 일일이 여러 태그를 활용하여 개행이나 공백을 넣지않아도 되는 방법이 있습니다. 바로 태그인데요. 0태그를 활용하면 태그안에서는 Enter나 Tab, Space를 다 활용할 수 있기때문에 긴 문장등을 표현할때 굉장히 효율적으로 사용할 수 있습니다. pre 태그 예제 동해물과 백두산이 마르고닳도록 하느님이 보우하사 길이 보우하세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세 만약 pre태그를 활용하지않고 이렇게 애국가를 치게 되면 Enter가..
코딩은 응용하기에 따라 창의적인 결과물을 낼 수 있는 언어입니다. 혹시 테이블안에서도 테이블이 들어간다는 사실 알고 계신가요? 잘 사용하지는 않지만 이 방법도 적재적소에 적절히 사용하면 괜찮은 결과물을 얻어낼 수 있습니다. 예를 들어볼까요? 어떤 개발자는 레이아웃 기본 틀을 구성하는 방식으로 테이블안에 테이블을 넣어 위치를 조절한다고 합니다. 또 저는 웹사이트에서 사진갤러리를 만들때 테이블을 여러개 중첩해서 사진게시판을 구현한 적이 있습니다. 은근히 유용한 방법입니다. 테이블안에 테이블 넣기 [Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등) [Html] Pre태그 사용법 & 예제 [Html] Margin, Padding 속성의 차이점과 사용법 [Html] Div 태그 ..
HTML을 하다보면 굉장히 많이 사용하는 태그가 바로 일것입니다. 바로 표를 만들어주는 HTML태그인데요. 표 뿐만 아니라 갤러리를 만들 수도 있고 지금은 잘 사용하지 않습니다만 웹사이트 전체의 레이아웃 공간을 배치할때도 사용할 수 있는 등 매우 다양하게 응용이 가능하여 굉장히 많이 사용되는 태그중 하나입니다. 이번 포스팅에서는 HTML의 테이블을 만드는 모든 기법에 대해 다뤄보려 합니다. 테이블 만들기 주제 태그 비고 테이블의 구성 요소 테이블을 만드는 태그 테이블의 헤더부분을 만드는 태그 테이블의 행을 만드는 태그 테이블의 열을 만드는 태그 테이블을 만드는 순서는 다음과 같습니다. 먼저 제일 바깥쪽에는 태그가 들어갑니다. 그리고 가장 위에는 라는 테이블 헤더 태그를 사용합니다. Default값은 굵은..