일반 문서와 웹 문서는 큰 차이점이 있습니다. 일반 문서는 내용을 입력하는 프로그램과 그 내용을 확인하는 프로그램이 같지만 웹 문서는 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다릅니다. 웹 문서를 작성하는 프로그램을 '웹 편집기(Web Editor)'라고 하고 웹 문서를 보는 프로그램을 '웹 브라우저(Web Browser)'라고 합니다.


웹 브라우저의 종류


웹 브라우저는 웹 사이트를 둘러볼 때 사용하거나 웹 편집기로 작성한 웹 문서를 화면에 표시해 주는 프로그램입니다. 현재 사용할 수 있는 웹 브라우저의 종류는 매우 다양합니다.

 브라우저 이름

 제조업체

 특징

크롬

구글 

빠른 업데이트를 통해 HTML5표준에 가장 발 빠르게 대응하고 있어 최근 가장 많이 사용되고 있는 브라우저입니다. HTML5 지원 정도가 555점 만점에서 525점으로 가장 높은 점수를 받고 있습니다. 

파이어폭스

모질라 

일반 사용자들보다 개발자들이 주로 사용하는 웹 브라우저로 개발 도구와 부가 기능들이 뛰어납니다.  

인터넷

익스플로러

 마이크로소프트

HTML5에 대한 지원은 취약하지만 아직까지도 국내에서 많이 사용되고 있는 브라우저입니다. 윈도우 7 서비스팩1부터 지원하기 시작한 IE11을 마지막으로 더 이상 개발되지 않고 있습니다. 

엣지

 마이크로소프트

마이크로소프트에서 인터넷 익스플로러 대신 HTML5를 지원하기 위해 새로 개발해 윈도우 10에서 기본으로 사용하는 웹 브라우저입니다.



외에도 애플의 '사파리'나 오페라 재단의 '오페라' 브라우저도 있습니다.



웹 편집기의 종류


웹 문서를 만들 때 HTML 태그를 입력하는 프로그램을 '웹 편집기'라고 합니다. 웹 편집기에 HTML 소스를 입력하면 그 내용을 웹 브라우저로 읽는데 이 웹 편집기는 메모장이든 전문 편집기 프로그램이든 텍스트를 입력할 수 있는 프로그램이면 모두 가능합니다.


편집기 종류

 특징

텍스트 편집기

윈도우의 메모장이나 매킨토시의 텍스트 편집기, 한글, 워드를 이용해서 웹 문서를 작성할 수 있습니다. 사용자가 태그를 일일이 직접 입력해야 하기 때문에 HTML 태그와 속성을 알고 있어야 하고 입력할 때 오류가 발생하기 쉽습니다.

웹 편집기

웹을 위한 전용 편집기입니다. 태그와 속성, 일반 텍스트 등을 서로 다른 색으로 표시해주어 소스를 읽기 쉽고 편집기에 따라 태그나 속성의 일부만 입력하더라도 전체를 완성해주기 때문에 오타로 인한 오류를 줄일 수 있습니다.

윈도우용 - 노트패드++(무료), 에디트 플러스(유료)

맥용 - 텍스트메이트(무료), 코다(유료)

공용 - 드림위버(유료), 비주얼 스튜디오 코드(무료)

통합개발환경(IDE)

웹 IDE는 웹 편집기의 편리함과 함께 사용자에게 필요한 기발 환경을 한꺼번에 구축하고 사용할 수 있게 해줍니다. 웹 IDE 프로그램에는 비주얼 스튜디오 2015(무료, 유료), 웹스톰(무료), 서브라임 텍스트(무료, 유료) 등이 있습니다.

웹 기반 코드 편집기

웹 상에서 소스 코드를 입력하고 결과를 바로 확인할 수 있는 편집기입니다. 웹 코딩을 위한 시스템 환경을 만들거나 별도의 편집기 프로그램을 이용하지 않고 브라우저 화면에 코드를 입력하고 결과를 볼 수 있는 장점이 있습니다. 팀 작업을 하면서 여러 팀원들과 소스를 공유하는 데도 유용하고 초보자의 코딩 연습용으로도 좋습니다. Codepen(http://codepen.io/)이나 JSFiddle(https://jsfiddle.net/), Liveweave(http://liveweave.com/), Plunker(http://plnkr.co/) 등이 있습니다.



<출처> Do it! HTML5+CSS3 웹 표준의 정석

HTML이란?


컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있습니다. 예를 들어 엑셀의 확장자는 *.xlsx이고 한글의 확장자는 *.hwp입니다. 웹의 경우도 마찬가지입니다. 웹 사이트에서 사용할 문서는 *.html(또는 *.htm) 확장자를 붙여 다른 문서와 구분합니다. 


HTML은 하이퍼텍스트 마크업 랭귀지(Hypertext Markup Language)의 줄임말로 그대로 해석하면 하이퍼텍스트를 마크업하는 언어입니다. '하이퍼텍스트'란 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 말하고 '마크업'이란 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것을 말합니다. 즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML이라고 정리할 수 있습니다.



웹 편집기의 소스에서 꺾쇠 괄호(<, >)로 묶인 부분이 'HTML 태그(tag)'이고 이렇게 태그를 붙이는 것을 '마크업'이라고 합니다. 이 꺾쇠 괄호 안의 내용은 웹 브라우저 화면에 나타나지 않습니다.


- HTML5를 웹 표준 기술이라고 하는데 웹 표준은 웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것이다.

- 웹 표준을 지켜 사이트를 제작하면 일반 사용자는 장소나 브라우저와 상관없이 쉽게 웹사이트를 볼수 있고 웹 개발자와 디자이너들은 시간을 절약할 수 있다.

- 대부분의 웹 브라우저에서 HTML5를 지원하게 되면서 'HTML'이라고 부르게 되었다.

- HTML5 표준안부터는 웹 브라우저 업체들이 함께 참여하고 있기 때문에 표준안이 업그레이드될 때마다 웹 브라우저 업체에서 발 빠르게 수용하고 있다. 현재 표준안 명세(HTML 5.1)는 http://www.w3c.org/TR/html에서 확인할 수 있고 진행 중인 명세(HTML 5.2)는 https://w3c.github.io/html/에서 확인할 수 있다.




<출처> Do it! HTML5+CSS3 웹 표준의 정석

회원가입을 눌럿을 때 ID중복체크는 그냥 컨트롤로에서 처리해줬지만(조빱이라)


중복체크 버튼을 동작하기 위해선 또 컨트롤러 만들어서 하는게 좋단다.


고래서 중복체크 버튼에 온클릭주고 idCheck만들어서 호출했다.



function idCheck(){


var token = $("meta[name='_csrf']").attr("content");

var header = $("meta[name='_csrf_header']").attr("content");

var text = $("#userId").val();


        var regexp = /[0-9a-zA-Z]/; // 숫자,영문,특수문자

        // var regexp = /[0-9]/; // 숫자만

//var regexp = /[a-zA-Z]/; // 영문만

        

        for(var i=0; i<text.length; i++){

            if(text.charAt(i) != " " && regexp.test(text.charAt(i)) == false ){

alert("한글이나 특수문자는 입력불가능 합니다.");

$('#userId').val("");

return;

}

    if (text.length < 4) {

    alert('ID는 4자 이상입니다.');

    $('#userId').val("");

    return;

    }

            else{

           

            var userId = document.getElementById('userId').value;

        var data2 = {userId: userId};

        var data = JSON.stringify(data2);

       

            $.ajax({

        type : "POST",

        url : "<c:url value='/join/IdCheck'/>",

        data : data,

        cache : false,

        contentType : "application/json;charset=UTF-8",

        beforeSend : function (xhr)

        {

        xhr.setRequestHeader(header, token); 

        },

        success :function(data){

        //alert(data);

        //console.log(data);

        if (data == 1) {

        alert("이미존재하는 아이디 입니다.");

        $('#userId').val("");

        return false;

        }else{

        alert("사용가능한 아이디 입니다.");

        return false;

        }

        },

        error:function(request,status,error){

        alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);

        }

        });

            return;

            }

        }

}



중복체크는 쿼리할때 COUNT를 사용해서


       SELECT COUNT(*)

       FROM member

       WHERE userid = #{userId}


#{userId}이녀석이 있으면 카운트가 1을 반환하고 없으면 0을 반환한다.

왜냐면 카운트는 저녀석이 포함된 행의 갯수를 가져오는데 아이디값이 있으면 1개의 행

없으면 0개의 행을 가져오기 때문이다.


그리고 다시 아작스에서 받아서 처리해주긔!



'IT' 카테고리의 다른 글

CentOS 6.7 iso  (0) 2017.07.11
Spring 회원가입 ID중복 검사  (0) 2017.03.14
jsp에서 controller로 데이터 ajax로 보내기  (0) 2017.03.08

+ Recent posts