겨울잠

input file은 각 브라우저마다 디자인이 조금씩 다르다.

그런 이유로 각 브라우저나 디바이스마다 모양이 틀어지거나 할 수 있는데

이를 방지하기 위해 해당 기능들을 직접 만들어 동일한 ui,ux를 제공하기 만들 수 있고

좀 더 이쁘거나 좋은 기능을 부여해서 만들 수도 있다.

뭐.. 여튼 옛날에 여러 버전으로 만들었었는데...

어디다 만들었는지 기억이 안나서 새로 만들기로 했다.

input file에 '파일선택' 텍스트에 해당되는 버튼 처럼 보이는것을 수정하려면 아래 처럼 쓰면 된다

::file-selector-button

::file-selector-button:hover

<input type="file">

input {
  border:1px solid #72b3ff;
  padding:5px;
  border-radius:8px;
  background:#fff;
}
input::file-selector-button{
  border:1px solid #72b3ff;
  padding:5px;
  border-radius:8px;
  background:fff;
  color:#72b3ff;
  transition:.2s;
}
input::file-selector-button:hover {
  background:#72b3ff;
  color:#fff;
}

색상을 파란색 톤으로 잡아보았다

2024.04.15 - [FrontEnd&Publisher/javascript & jquery] - cookie 간단 등록,삭제,

2024.04.16 - [FrontEnd&Publisher/javascript & jquery] - cookie 등록,삭제( 오늘 하루 동안 보이지 않기)

좀 간결 하게 코드만 쉽게 보이도록 codepen 다 새로작성해봤습니다.

다만 코드펜에서 cookie 등록에 대한 script는 먹질 않더군요..

해당 코드를 참고하여 다른 라이브서버에서 테스트 해보고 활용할수 있을것 같긴합니다.

See the Pen Cookies Check by Hs (@tkrm100) on CodePen.

2024.04.16 - [FrontEnd&Publisher/javascript & jquery] - cookie 등록,삭제( 오늘 하루 동안 보이지 않기)

2024.04.16 - [FrontEnd&Publisher/javascript & jquery] - cookie 등록,삭제 ( 하루 동안 보이지 않기 / 1주일 동안 보이지 않기 )

위 글은 거의 뭐 쿠키라는게 뭔지 확인하는 용도의 글 같고

이어서 실제 실무에 적용시킬 실제 코드를 작성해 보겠습니다.

위의 글과 순서는 동일하게 쿠키 등록 부터 해보겠습니다.

쿠키등록

1. 먼저 기본적인 틀부터 만들어 봅시다

<style>
.code-area { padding:30px; background:#d7d7d7; }
.oneday-area {
  padding:10px;
  border:1px solid #000;
  margin-top:20px;
  display: inline-block;
}
.oneday-area.hide {
	opacity:.5;
    background:#333;
}
</style>
<div class="code-area">
  <button>오늘 하루동안 보이지 않기</button><br/>
  <div class="oneday-area">오늘 하루동안 보이지 않게 하고 싶은영역</div>
</div>

2. 이제 기능을 입혀볼껀데 오늘 하루동안 보이지 않기를 하려면 먼저 현재 시간을 알아야 합니다.

고로 현재시간을 알아보는 script문을 작성해봅시다.

 - 현재 시간을 보여줄 영역을 추가적으로 만들겠습니다.

window.onload = function(){    
    let timeClock = new Date(); //시간 데이터
    document.getElementById('clock').innerText = timeClock;
}

- 페이지 로드시 timeClock가 시간 정보를 갖고 clock id를 가진 tag에 텍스트 뿌려주니 아래처럼 나옵니다

3. 현재 시간은 timeClock 으로 확인했고 요건 현재시간 확인 용도로만 써보고

쿠키 등록에 사용 해볼 현재 시간 변수를 만들어 봅시다

function setCookie(name,value){
    let timeSet = new Date();
    timeSet.setTime(timeSet.getTime() + (value * 24 * 60 * 60 * 1000));
    let expires = 'expires=' + timeSet.toUTCString();
    document.cookie = name + '=' + timeSet.toUTCString() + '; ' + expires;
}

- timeSet 를 현재 시간 데이터로 사용하고

  timeSet + 24시간 한 값을 setTime로 값을 다시 부여합니다

  value은 1 로 받을껍니다. 1일 후, 2면 2일 후 받은 value에 24시간 , 60분, 60초, 1000ms 를 곱하여 컴퓨터 시간으로 계산

  위 입력된 값을 각각 name과 expires에 넣어

  document.cookie =   로 입력해 줍니다.

4. 그리고 setCookie를 이벤트를 사용해봅니다.

<div class="code-area">
  <button onclick="setCookie('today','1')">오늘 하루동안 보이지 않기</button><br/>
  <div class="oneday-area">오늘 하루동안 보이지 않게 하고 싶은영역</div>
</div>

button에 onclick 이벤트를 넣어 실행하면 아래처럼 today로 cookie가 들어간것을 확인할 수 있습니다.

5. 해당 쿠키가 들어간것을 확인했으니 보이지 않게 할 영역을 숨겨야겠죠?

숨기려면 먼저 today 이름의 쿠키 값을 가져와야합니다.

window.onload = function(){    
    let timeClock = new Date(); //시간 데이터
    document.getElementById('clock').innerText = timeClock;
	let getDataToday = getCookie('today');
}
function getCookie(ckName){
    let name = ckName + "="; //쿠키 이름
    let ca = document.cookie.split(';'); // 쿠키들을 다 가져옴
    for(let i = 0; i < ca.length; i++) { // ca중 name이 동일한 쿠키극 찾아서 return
        let c = ca[i];
        while (c.charAt(0) == ' ') { c = c.substring(1); }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

- getCookie에서 찾아온 today를 페이지 로드시 getDataToday에 넣어줍니다.

6. 쿠키값이 존재 하니 해당 영역을 안보이게 처리하는 구문을 추가해봅니다

window.onload = function(){    
    let timeClock = new Date(); //시간 데이터
    document.getElementById('clock').innerText = timeClock;
	let getDataToday = getCookie('today');
    if(getDataToday) {
    	document.querySelector('.oneday-area').classList.add('hide');
    }
}

등록을 해서 기능이 동작한것을 확인했으니 이제 삭제를 해봅시다

쿠키삭제

1. 삭제는 이전 글과 비슷한 방식으로 작성해주면 됩니다.

function delCookie(el){
    document.cookie = el+'=; Max-Age=-9999;'
}

- 삭제 버튼도 하나 추가 해봅시다.

<div class="code-area">
  현재시간 : <b id="clock">시간</b><br/>
  <button onclick="setCookie('today','1')">오늘 하루동안 보이지 않기</button><br/>
  <button onclick="delCookie('today')">쿠키삭제</button><br/>
  <div class="oneday-area">오늘 하루동안 보이지 않게 하고 싶은영역</div>
</div>

- 이제 쿠키도 삭제 되고...

마무리로 24시간이 지나면 삭제되는 동작을 할텐데

요건 그냥 페이지 로드시 쿠키에 저장된 날짜 값이랑 현재 컴퓨터 날짜값 비교해서 delCookie문 돌려주는걸로 마무리 합니다.

if(getDataToday) {
	if(timeClock.toUTCString() < getDataToday) {
    	document.querySelector('.oneday-area').classList.add('hide');
    }else{
    	delCookie('today');
    }
}

현재 근무중인곳에서 기한 종료시 쿠키 삭제 기능이 구현이 안돼어있어서 만들어보기로하게 되었습니다.

2024.04.16 - [FrontEnd&Publisher/javascript & jquery] - cookie 등록,삭제( 오늘 하루 동안 보이지 않기)

2024.04.16 - [FrontEnd&Publisher/javascript & jquery] - cookie 등록,삭제 ( 하루 동안 보이지 않기 / 1주일 동안 보이지 않기 )

먼저 쿠키를 삭제하려면 쿠키 정보가 브라우저상에 있어야 되니 등록을 해야겠죠?

등록전에 쿠키 정보는 어디서 확인하는지 부터 확인해 봅시다.

쿠키 목록 )

1. 브라우저 창에서 F12나, Ctrl + Shift + i 를 눌러 개발자 도구를 열어줍시다

    ( 전 보통 크롬 브라우저로 합니다 )

2. 개발자 도구를 열고 상단의 애플리케이션 탭을 먼저 누른후 좌측 목록에서 저장용량 > 쿠키 > 해당 domain 주소 눌러주시면 오른쪽 엑셀 같은 화면에서 쿠기 값 확인하실 수 있습니다.

그럼 쿠키 등록을 해보죠

쿠키 간단 등록, 삭제 )

브라우저 상에서 쿠키 등록 및 삭제도 가능하니 먼저 간단하게 해봅시다.

등록)

1. 아래 이미지와 같이 아래 콘솔 창을 열어

document.cookie = '쿠키=쿠키값'  이런식으로 아무 내용이나 입력해주세요.

document.cookie = '쿠키=쿠키값'

2. 그럼 엑셀 같이 생긴창에 이름에 '쿠키' , 값에 '쿠키값' 이 들어간걸 확인하실 수 있습니다.

삭제)

삭제하는 2가지 방법

1. 목록에 나오는 이름이 쿠키인 행을 마우스 오른쪽 버튼을 눌러 직접 삭제 하는 방법

2. 콘솔창에 document.cookie = '쿠키=;Max-Age=-1' 을 입력해 삭제 하는 방법

document.cookie = '쿠키=;Max-Age=-1'