Dev Thread

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

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

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

<출처> 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개의 행을 가져오기 때문이다.

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

DB insert시 unique 컬럼에 걸렸을때 DuplicateKeyException 이걸 던져준다

이걸 받아서 중복검사 해줄수 있다

/* 회원가입  > 회원저장 */

@RequestMapping(value = "/join/memberinsert", method = RequestMethod.POST)

@ResponseBody

public Map<String,Object> Memberinsert(HttpServletRequest request, HttpServletResponse response,@RequestBody MemberVO member) throws Exception {

/* Map<String, Object> map = new HashMap<String, Object>();

map.put("member", member);

*/

Map<String, Object> map = new HashMap<String, Object>();

try{

memberService.InsertMember(member);

} catch(Exception e){

if (e instanceof DuplicateKeyException) {

map.put("msg", "fail");

return map;

}

}

map.put("idx", member.getIdx());

map.put("authority", "ROLE_USER");

memberService.InsertMemberAuthority(map);

return map;

}

instanceof 이걸로 DuplicateKeyException 요거 받아와서 jsp로 던져줘서 처리해줌!

원래 컨트롤러에서 검사하면 안된다는데;; 조빱이라 그냥 여기서함

회원가입 ID중복검사 말고도 unique데이터를 검사해야할때 사용하면 좋을거같다

form을 submit하면 form에있는 모든 데이터를 넘겨준다.

하지만 password_check는 필요하지 않고 VO에 없어서 에러가 발생했다.

이걸 해결하기 위해서 ajax를 통해 필요한 데이터만 담아서 보내려고 했으나 에러발생...

@ResponseBody를 통해서 jsp에서 controller에서 데이터 넘겨줄때 JSON형태로 줘야 하는데 그냥 보내서 그런 문제였다.

JSON형태로 만들어줘서 ajax에 담았다.

var data2 = {userId: userId , name: name, password: password};

var data = JSON.stringify(data2);

<form name="memberinsert" id="memberinsert" method="post" action="<c:url value='/join/memberinsert'/>">

<table width="550" align="center" border="1" bordercolor="ADD8E6" cellpadding="5">

<tr>

<td height="30" align="center" bgcolor="#FFDEAD">이름</td>

<td bgcolor="#E0FFFF"><input type="text" size="10" id="name" name="name" maxlength="10"></td>

</tr>

<tr>

<td height="30" align="center" bgcolor="#FFDEAD">아이디</td>

<td bgcolor="#E0FFFF"><input type="text" size="10" id="userId" name="userId" maxlength="10"></td>

</tr>

<tr>

<td height="30" align="center" bgcolor="#FFDEAD">비밀번호</td>

<td bgcolor="#E0FFFF"><input type="password" id="password" name="password" size=12 maxlength="12"></td>

</tr>

<tr>

<td height="30" align="center" bgcolor="#FFDEAD">비밀번호 확인</td>

<td bgcolor="#E0FFFF"><input type="password" id="password_check" name="password_check" size=12 maxlength="12"></td>

</tr>

<tr>

<td colspan="2" height="30" align="center" bgcolor="#FFDEAD"> 

<!-- <a href="void(0)" onclick="$('#memberinsert').getElementById('memberinsert').submit();return false;" >가입하기</a> -->

<a href="void(0)" onclick="$('#memberinsert').closest('form').submit();return false;" >가입하기</a> 

<input type="reset" value="리셋하기" onclick='init()'>

<input type="button" id="back" value="뒤로가기" onclick="javascript:location.href='/join/agreement';"></td>

</tr>

</table>

</form>

<a href="void(0)" onclick="$('#memberinsert').closest('form').submit();return false;" >가입하기</a>

submit은 할 수 없고 submit처럼 동작하기위해 return false;를 통해

a태그의 기능을 없애고 onclick으로 function을 호출해서 ajax형태로 원하는 데이터만 골라 보냈다.

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

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

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

데이터 안보내져서 하루종일 삽질했다!

CSS에서 글꼴을 지정할 때는 font-family 속성을 사용합니다.

font-family는 우리나라말로 번역하면 글꼴의 집합인데, 하나 이상의 글꼴을 모아 놓은 것이라고 보면 됩니다. 

만약 글꼴을 하나만 지정했을 때 사용자의 컴퓨터에 해당 글꼴이 없으면 기본 글꼴로 보이게 되고, 하나 이상의 글꼴을 지정했을 때 사용자의 컴퓨터에 첫 번째로 지정한 글꼴이 없으면 다음 차례에 있는 글꼴이 보이게 됩니다.

font-family는 family-name과 generic family로 구성되어 있는데요. family-name은 Namun Gothic과 같은 글꼴 이름을 나타내고, generic family는 sans-serif와 같은 모양이 비슷한 글꼴들의 그룹을 나타냅니다. family-name에는 arial, verdana, 나눔고딕, 궁서, 굴림 등이 있고 generic family에는 serif(바탕체), Sans-serif(고딕체), Cursive(필기체) 등이 있습니다.

블로그를 잘 운영하려면 질 좋은 포스팅을 꾸준히 하는 것이 가장 중요하지만, 블로그의 시각적인 부분을 신경쓰는 것도 중요하다고 생각합니다. 블로그의 시각적인 부분은 크게 스킨과 글꼴로 나눌 수 있습니다. 보기가 편한 스킨과 글꼴을 선택하면 글의 가독성을 높여줄 뿐만 아니라, 정보가 깔끔하게 정리되어 정보의 접근성을 더욱 높여줄 수 있습니다.

어제 디자인이 좋은 스킨을 골라 블로그에 적용을 해봤으니, 이번에는 블로그의 글꼴을 변경해보았습니다. 변경할 글꼴은 대부분의 사람들이 사용하고 있는 네이버의 '나눔고딕' 글꼴을 선택했습니다. 개인적으로 가장 가독성이 좋은 글꼴이라고 생각합니다.

블로그 글꼴을 변경하는 방법에는 크게 세가지가 있습니다.

첫 번째는 HTML/CSS 편집에서 각각의 font-family를 수정하는 방법입니다. 이 방법은 블로그를 방문한 사용자의 컴퓨터에 해당 글꼴이 있어야 적용이 되고, 만약 해당 글꼴이 없을 경우엔 기본 글꼴로 보이게 됩니다. 페이지 로딩을 하지 않아 로딩 속도가 빠르다는 장점이 있지만, 블로그를 방문한 사용자가 해당 글꼴을 가지고 있지 않으면 무용지물인 셈이죠.

두 번째는 티스토리에 글꼴 파일을 업로드해서 변경하는 방법입니다. 이 방법은 블로그에 직접적으로 폰트를 설치하는 것이기때문에 블로그를 방문한 사용자의 컴퓨터에 글꼴이 설치되어 있지 않아도 해당 글꼴을 볼 수 있습니다. 하지만 스킨의 용량이 크게 증가할 수가 있고 스킨을 바꿀 때마다 일일히 글꼴을 다시 업로드해줘야 하는 번거로움이 있습니다. 또, 익스플로러에만 적용이 되고 크롬, 사파리 등의 기타 브라우저에서는 기본 글꼴로 보입니다.

세 번째는 구글 웹폰트를 이용하는 방법입니다. 이 방법은 구글 웹페이지 상에 올려놓은 글꼴을 사용하기때문에 블로그를 방문한 사용자의 컴퓨터에 글꼴이 설치되어 있지 않거나 인터넷 브라우저가 달라도 항상 해당 글꼴을 볼 수 있습니다. 블로그의 글꼴을 변경하는 방법 중 가장 간편하지만, 페이지마다 글꼴을 항상 로딩하여 적용하기때문에 로딩 속도가 조금 느린감이 있습니다.

위의 세가지 방법을 차례대로 설명해보겠습니다.

1.

먼저 컴퓨터에 나눔고딕 글꼴이 없으면, 다운로드를 해서 추가해줍니다.

2.

티스토리 관리자 페이지의 'HTML/CSS 편집' 을 클릭합니다.

3.

'HTML 편집' 에서 'Ctrl +F'를 눌러 검색창에 'font-family' 라고 입력합니다.

'font-family :' 의 뒷 부분에 기존 글꼴명이 적혀있는데, 'Nanum Gothic' 으로 변경해줍니다.

HTML 편집의 font-family 부분을 다 편집하면 'CSS 편집' 도 똑같이 변경해줍니다.

1.

먼저 컴퓨터에 나눔고딕 글꼴이 없으면, 다운로드를 해서 추가해줍니다.

2.

티스토리 관리자 페이지의 'HTML/CSS 편집' 을 클릭합니다.

3.

'파일업로드' 로 이동하여 하단에 있는 '추가' 버튼을 클릭합니다.

NanumGothic.eot

'NanumGothic.eot' 파일을 추가한 다음 '저장' 버튼을 클릭합니다.

4. 

'CSS 편집' 로 이동하여 상단에 아래의 소스를 입력합니다.

글꼴 크기는 font-size: 13px 부분을 수정해주시면 됩니다.

1.

구글 웹폰트 https://fonts.google.com/earlyaccess 사이트에서 'Link' 아래에 있는 주소를 복사합니다.

2.

'CSS 편집' 으로 이동하여 복사한 주소를 @charset "utf-"; 아래에 붙여줍니다.

3.

'CSS 편집' 에서 'Ctrl +F'를 눌러 검색창에 'font-family' 라고 입력합니다.

'font-family :' 의 뒷 부분에 기존 글꼴명이 적혀있는데, 'Nanum Gothic' 으로 변경해줍니다.

저는 구글 웹폰트를 이용하여 블로그의 글꼴을 변경해보았습니다. 

글꼴을 변경하면서 모르는 소스들이 많이 있었는데, 그 소스를 해석하지 못해 마냥 복사하고 붙여넣기만을 반복해서 답답하고 아쉬웠습니다. 

다음 시간에는 font-family, @font-face 등에 대하여 좀 더 알아보려고 합니다.

오늘은 자신의 블로그에 다운로드 받은 스킨을 어떻게 적용할 수 있는 지에 대하여 알아보겠습니다.

티스토리는 기본적으로 1단형과 2단형, 3단형, 그리고 반응형 스킨을 제공하고 있습니다. 이 외에도 자신이 직접 만든 스킨을 업로드하여 사용할 수도 있고, 웹디자이너분들이 만드신 스킨을 등록하여 사용할 수도 있습니다.

저는 아직 스킨을 직접 만들 수 있는 능력이 없기에, KINESIS님의 반응형 #2 스킨 커스터마이즈 버전을 배포받아 적용해보았습니다. 이 스킨은 티스토리 반응형 #2를 바탕으로 기능을 추가하고 개선한 테마입니다. 무료 스킨임에도 불구하고 완성도가 높고, 사용자가 직접 꾸밀 수 있도록 설계되어 있습니다. 관심있으신 분들은 http://blog.kinesis.kr/120사이트에서 KINESIS님의 스킨을 배포받아 사용해보시길 바랍니다.

1. 

티스토리 관리자 페이지의 왼쪽에 '스킨' 메뉴를 클릭하고, 오른쪽 상단의 '스킨 등록' 버튼을 클릭합니다.

2. 

새 스킨 등록 화면이 나타나면 '스킨 저장명' 을 작성하고, 아래의 '추가' 버튼을 클릭합니다.

3. 

다운로드 받은 티스토리 스킨 파일의 images 폴더를 제외한 나머지 파일을 선택하고 업로드합니다.

파일이 제대로 업로드되었으면 다시 '추가' 버튼을 클릭합니다.

4. 

이번에는 images 폴더 안의 파일들을 전부 선택하여 업로드합니다.

모든 파일이 정상적으로 업로드된 것을 확인하면 '저장' 버튼을 클릭합니다.

5. 

다시 '스킨' 메뉴로 이동하여 상단의 'PC보관함' 을 클릭하면 아래와 같이 등록한 스킨 목록을 확인할 수 있습니다.

여기서 방금 등록한 스킨을 찾아 '적용' 버튼을 클릭합니다.

이제 블로그로 이동하여 스킨이 제대로 적용되었는 지 확인합니다. 성공입니다!

티스토리에 다운 받은 스킨을 처음으로 적용해보았습니다.

스킨을 적용하는 방법을 찾아보며 공부하느라 블로그에 스킨을 적용하는 데에 다소 시간이 걸렸습니다.

네이버 블로그는 마음에 드는 스킨을 찾아 적용만 누르면 끝이지만, 티스토리의 스킨 적용은 과정이 조금 복잡하네요;

스킨을 적용하는 데 왜 이러한 과정이 필요한 지, 스킨의 HTML/CSS 편집 속 언어들을 어떻게 해석하고 수정해야 하는 지 등 아직 모르는 것이 투성이입니다.

이 모든 것을 완벽하게 이해하고 제대로 활용하려면 HTML과 CSS를 계속 공부해봐야겠습니다.