html, css, javascript 프론트앤드 코딩

html, css, javascript 프론트앤드 코딩 - 노트만들기 2

두번째 시간입니다. 이번시간에는 노트에 적힌 데이터를 저장하는 기능을 살펴보도록 하겠습니다.

완성된 모습인데요. 바로 시작해 보도록 할께요!!

html, css, javascript 프론트앤드 코딩 - 노트만들기 2

글씨가 너무 작아서 글씨 크기를 키워 보겠습니다. font-size를 지정해 주면 되요!!

html,body{margin: 0px; padding: 0px;}
#gnb{width:100%; height:50px; border-bottom: 1px solid #ccc;}
.logo{width:150px; text-align: center; line-height: 50px; margin:0 auto;}
#content{padding:20px;}
.tarea{width: 100%; height: 500px; box-shadow: 0 1px 3px; background-color:#f2e277 ; boarder:1px solid #ccc; font-size: 36px;}
#footer{text-align: center; font-size: 11px;}

글씨가 너무 딱 붙어있어서 여백을 좀 줘 보겠습니다. padding을 주면 됩니다.

html,body{margin: 0px; padding: 0px;}
#gnb{width:100%; height:50px; border-bottom: 1px solid #ccc;}
.logo{width:150px; text-align: center; line-height: 50px; margin:0 auto;}
#content{padding:20px;}
.tarea{width: 100%; height: 500px; box-shadow: 0 1px 3px; background-color:#f2e277 ; boarder:1px solid #ccc; font-size: 36px; padding: 20px;}
#footer{text-align: center; font-size: 11px;}

그런데 메모장이 옆으로 넘어가 보이지 않나요???

크기가 100%인데 우리가 padding 즉 안쪽여백을 20px 지정해서 너비가 100% + 40px이 되서 화면에 넘어가 보이게 되는거에요. 이를 하결하는 방법은 아래 코드를 추가하시면 됩니다.

div, textarea{box-sizing: border-box; 는 무조건 선언하고 시작하는게 좋습니다.

html,body{margin: 0px; padding: 0px;}
div, textarea{box-sizing: border-box;}
#gnb{width:100%; height:50px; border-bottom: 1px solid #ccc;}
.logo{width:150px; text-align: center; line-height: 50px; margin:0 auto;}
#content{padding:20px;}
.tarea{width: 100%; height: 500px; box-shadow: 0 1px 3px; background-color:#f2e277 ; boarder:1px solid #ccc; font-size: 36px; padding: 20px;}
#footer{text-align: center; font-size: 11px;}

메모장 내용 저장하고 불러오기

1. jquery 사용 설정하기

그런데 새로고침을 하면 지워지죠? 이를 해결하기 위해 jquery를 사용합니다.

구글에서 CDN을 검색해 주세요. 하단에 바로가기를 추가해 놓도록 하겠습니다.

jQuery CDN 다운로드 바로가기

페이지에 들어가면 가장 최신버전 3.X 버전에 minified 버전을 사용하면 됩니다.

하단에 복사 버튼을 눌러 Copy를 완료해 주세요.

복사한 코드를 html로 와서 index.html 의 head 영역에 붙여넣어 주시면 됩니다.

우리는 로컬 하드디스크에 저장을 하려는 기능을 구현하려 하는데요.

미리만들어진 플러그인을 사용할 예정입니다. 플러그 인은 그냥 꽂아서 사용한다라는 의미 정도로 이해해 주시면 될 거 같습니다.

구글 검색창에 jquery storage api cdn 라고 검색한 후 첫번째 검색 결과로 이동해 주세요!

바로가기 링크를 하단에 추가해 두도록 하겠습니다.

jquery storage api cdn 바로가기

직접 구글 검색창에 검색을 해도 됩니다.

첫번째 페이지로 이동하면 가운데 copy 버튼을 클릭해서 코드를 복사해 주시구요.

마찬가지로 index.html에 head 영역에 복사한 부분을 붙여넣어 주심면 됩니다.

그러면 지금까지 jquery와 jquery storage api를 불러오는 것을 마무리 지었습니다.

[참고] jquery storage api 사용방법 바로가기

참고로 사용방법은 다음 하단에 링크를 참고해 보시면 됩니다.

jquery storage api 사용방법 바로가기

2. script.js 파일 만들고 자바스크립트 기능 사용하기

다시 visual studio code로 와서 새파일 만들기를 클릭하고 script.js 파일을 새로 만들어 주세요.

그다음 마찬가지로 index.html에 script 파일을 불러와 주면 됩니다. 아래 화면 처럼해주세요.

자바스크립트를 최초에 실행하기위한 뼈대와 같은 코드입니다. 아래 코드는 시작할 때 반드시 작성하고 시작해 준다고 생각하면 됩니다.!!

$(document).ready(function(){

});

저장 버튼을 만들어 볼텐데요. 버튼은 index.html의 textarea 위에 만들어 보도록 하겠습니다.

이제 스크립트 코드를 작성해 보도록 할께요.

아래 코드를 해석해 보면, 문서가 준비되었고, 버튼 area 영역에 클릭이 일어났을 때 버튼 클릭을 알람을 띄워주도록 코드를 작성해 보았습니다. 우리는 저장하는게 목표이기 때문에 저장되었습니다. 라고 수정해 주면 되겠네요.

$(document).ready(function(){
    $('.btn_area').click(function(){
        alert('버튼 클릭');
    })

});

그럼 실제로 저장해야 겠죠?

저장하는 방법은 우리가 플러그인을 불러 왔기 때문에 아주쉽게 구현이 가능합니다.

아래 코드를 입력하면 되는데요. 코드를 입력해도 아무런 변화가 없습니다. 아직 저장된 걸 불러오는 기능을 만들지 않았기 때문인데요.

$(document).ready(function(){
    $('.btn_area').click(function(){
        $.localStorage.set('memo', $('.tarea').val())
        alert('저장되었습니다');
    })

});

만약 로컬스토리지에 저장된 값이 있다면 그 값을 불러온다고 하면 됩니다.

이때는 if문을 사용하면 됩니다. 새로고침을 계속 눌러도 그대로 저장되어 있습니다 ^^

$(document).ready(function(){
    if($.localStorage.isSet('memo')){
        $('.tarea').val($.localStorage.get('memo'))
    }

    $('.btn_area').click(function(){
        $.localStorage.set('memo', $('.tarea').val())
        alert('저장되었습니다');
    })

});