취미부자 개발자 로즈🌼

전체 글 141

카테고리 설명
개발, 일상, 내가 좋아하는 다양한 것들을 기록합니다 :)
  • 재택이 일상이 되면서 데스크테리어에 관심이 많아졌어요. 여러가지 제품들을 구매했는데, 1월에 구매했는데, 이제야 올리는 아이오 투명 탁상시계 후기 입니다 ㅋㅋㅋ 구매 포인트 디지털 시계일 것 날짜가 나올 것 화이트&핑크 데스크에 어울릴 만한 깔끔한 디자인 이 세가지를 염두에 두고 검색을 했는데요. 네이버에서 탁상시계 검색하던 중에 뜬 요 제품!!!! 완전 심쿵이었죠! 22년 3월 15일 현재 기준 가격은 7500원이구요. 배송비는 3천원이라서 배송비 포함 10500원이라고 보심 될거 같아요. 사이트 내 특징을 보니까, 습도에 따라 날씨 아이콘이 달라지고요. 밝은 곳에서 더 매력적인 녀석이에요! 사실 온도, 습도는 염두에 두지도 않았는데, 안구건조증 있는 제게 습도도 중요하긴 해서 더 좋았어요ㅎㅎ 대충 박..

  • 참 민망하게도 이제까지 혼자 힘으로 배포를 해 본 적이 없었는데.. 너무 쉽게 배포 할 수 있는 방법이 있어서 따라해봤다. 아직 미완성 된 페이지지만 배포 된 걸 보고 싶어서 드릉드릉~ 뭐 하나라도 놓칠까 싶어 하나씩 다 캡쳐를 한 것이기에 스크롤 압박이 있을 수 있다. rosedaily101.netlify.app Heropy Coffee Landing 헤로피커피는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다. epic-darwin-271c77.netlify.app 아래에서도 올릴거지만, 내가 배포한 결과물 미리보기 ㅋㅋ 넷리파이 가입 https://www.netlify.com/ Netlify: Develop & deploy the best web ..

  • 오늘도 잔디 좀 심어줬고요. 오늘은 메인, 배너, 메인 하단 슬라이드 메뉴까지 완성. 따라서 하니 큰 어려움 없이 재밌게 하고 있는데, 혼자 하려면 css가 너무 막막하긴 하다..ㅋㅋ 5시 시작 - 혼코나 마찬가지지만, 일정한 시간이 정해지면 모각코 해보고 싶어서 모각코 페이지 생성. 카메라 구도같은것도 좀 생각해봐야지. 출근 전 가볍게 독서 후에 시작할랬는데, 30여분밖에 시간이 없을 것 같다. 운동도 해야하는데..??

  • 자동 슬라이드 기능 만들기 gif가 아니지만.. 순차적으로 내부의 글자등이 바뀌는 자동 슬라이드 기능 만들기. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com swiperjs에 들어가서 Get Started를 누르면 사용하기 위한 코드를 받을 수 있다. 난 나중을 위해 블로그에 그대로 기록. Slide 1 Slide 2 Slide 3 ... 스크롤을 움직이면 html구조도 함께 받을 수 있다. new S..

작성일
2022. 3. 15. 12:33
작성자
로즈♡

재택이 일상이 되면서 데스크테리어에 관심이 많아졌어요.

 

여러가지 제품들을 구매했는데,

1월에 구매했는데, 이제야 올리는

아이오 투명 탁상시계 후기 입니다 ㅋㅋㅋ

 

구매 포인트

디지털 시계일 것

날짜가 나올 것

화이트&핑크 데스크에 어울릴 만한 깔끔한 디자인

 

이 세가지를 염두에 두고 검색을 했는데요.

 

네이버에서 탁상시계 검색하던 중에 뜬 요 제품!!!!

 

완전 심쿵이었죠!

22년 3월 15일 현재 기준 가격은 7500원이구요.

배송비는 3천원이라서 배송비 포함 10500원이라고 보심 될거 같아요.

 

 

 

사이트 내 특징을 보니까, 

습도에 따라 날씨 아이콘이 달라지고요.

밝은 곳에서 더 매력적인 녀석이에요!

 

사실 온도, 습도는 염두에 두지도 않았는데, 

안구건조증 있는 제게 습도도 중요하긴 해서 더 좋았어요ㅎㅎ

 

 

대충 박스는 이런느낌.

안에 뽁뽁이가 있었...던가..?

 

1월 구매해서 가물가물 하네요 ㅋㅋ

 

 

사용메뉴얼 하나랑 시계가 뿅! 

투명한 창은 비닐 한 겹 붙어있어요.

 

 

건전지도 하나 들어있던거 같아요.

전원을 켜주면 바로 창에 글씨가 보이죠?

 

 

메뉴얼.

날짜 변경이나 알람 스누즈 등등의 방법이 있어요.

 

알람도 잘 안쓰다보니 자주 볼 일은 없지만,

혹시라도 내가 집을 비운사이 배터리가 방전되었다던가..?

하는 등 설정이 필요할 순 있으니 이렇게 사진으로 담아놨어요.

 

 

그.런.데.

문제가 하나 생겼습니다.

 

권고사항에도 밝은 곳에서 쓰길 권유하는데,

제가 둘 곳은 하필 모니터 아래라 빛이 잘 안들거든요..

 

미니어항이 보이는 느낌을 꿈꿨으나

어항도 어두운 곳에 있어서 잘 보이지 않더라고요..

 

 

제가 두려했던 장소는 저기!

모니터 바로 아래 중간이었어요.

 

실내등을 켜지 않으면 어두침침해요. 

 

 

창가쪽이 아니지만 키보드를 치는 데는 광량이 부족함이 없어서

낮시간대에는 주변은 그닥 밝진 않고요.

그래서인지 뚜렷하게 보이지 않는 부분은 좀 아쉽더라구요.

 

개인적으로 led가 있어서 껐다켰다 가능하면 더욱 좋을 것 같아요.

 

 

실내 등을 켰을 땐 적당히 밝아서 

보는데 큰 어려움은 없긴 했지만요.

 

 

제가 두고자 하는 자리는 그림자가 있고, 

벽이랑도 거리가 있다보니 어두울 수 밖에 없어요.

 

 

어두운 곳에서 사용한다면 투명한 걸 포기하고

종이를 덧대 선명하게 볼 수도 있어요!

 

 

 

바로 뒤에 종이를 덧대니 어두운 곳에서도 선명하게 보입니다.

 

투명함을 느끼고 싶다면 밝은 곳에서 사용하거나

시간같은 꼭 필요한 부분만 뒤에 덧대면 좋을 것 같아요 :)

 

 

 

https://link.coupang.com/re/CSHARESDP?lptag=CFM83460266&pageKey=5509329815&itemId=8583021263&vendorItemId=75870328084

 

아이오 탁상시계 무소음 알람 LED 디지털 투명창

COUPANG

www.coupang.com

쿠팡 링크는 요기.

이걸로 구매하면 제게 1% 떨어진다고 하니

 

혹시나 이 글을 구매의사가 생기셨다면

이왕이면 요걸로 구매해주시면

너무 감사할거 같아요><ㅋㅋ

작성일
2022. 3. 15. 11:23
작성자
로즈♡

참 민망하게도 이제까지 혼자 힘으로 배포를 해 본 적이 없었는데..

너무 쉽게 배포 할 수 있는 방법이 있어서 따라해봤다.

 

아직 미완성 된 페이지지만 배포 된 걸 보고 싶어서 드릉드릉~

 

뭐 하나라도 놓칠까 싶어

하나씩 다 캡쳐를 한 것이기에 스크롤 압박이 있을 수 있다. 

 

rosedaily101.netlify.app

 

Heropy Coffee Landing

헤로피커피는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다.

epic-darwin-271c77.netlify.app

아래에서도 올릴거지만, 내가 배포한 결과물 미리보기 ㅋㅋ

 

 


넷리파이 가입

 

https://www.netlify.com/

 

Netlify: Develop & deploy the best web experiences in record time

A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free!

www.netlify.com

먼저 넷리파이 사이트에서 가입을 해야한다.

 

 

사이트에 들어가면 우측 상단 

Sign up 

 

깃헙을 선택해준다.

 

내 깃헙 계정이 뜨고 연결하면, 

어떤 용도로 쓸건지 등등이 뜬다.

 

대충 작성해주고, 

어디서 import 해올 것인지.

깃 선택!

 

 

 

대충 번역하면, Git을 연결하고 코드 푸쉬하면 된다는 것.

 

자체 호스팅 깃헙옵션은 비즈니스 플랜으로 업그레이드 해서 사용할 수 있는 것 같다.

 

깃과 넬리파이 연결한다고 하고,

인스톨을 누르면 깃헙 비밀번호 확인페이지에 들어간다.

 

비밀번호를 입력해주면 끝.

 

내 깃의 저장소들이 뜨면서 연결 된 걸 볼 수 있다.

 

혹시 저장소가 많다면 서칭을 해서 선택이 가능하다.


사이트 배포 시작

 

브랜치도 혹시 선택해야 한다면 선택해주고, 

Deploy site를 통해 사이트 배포 시작!

사이트 배포를 누르면 바로 이 곳으로 이동을 하는데,

Getting started쪽에서 진행사항을 볼 수 있다.

 

현재는 사이트 주소는 따로 뜨지 않는다.

 

약 10초~수분간의 배포를 마치고 나면 

 

2번으로 넘어가면서 도메인이 부여된 걸 볼 수 있다!

그리고 미리보기 이미지도 함께 보여진다.

 

링크 클릭해보면 내가 만들어 둔 사이트 이동이 잘 되는 것을 볼 수 있다.


사이트 주소 변경하기!

 

사이트 주소가 너무..길고 복잡하다.

조금이나마 내가 원하는 주소로 바꿔주고 싶다. 

 

 

site settings를 선택해서 들어가준다.

복잡한 사이트명 ㅠㅠ

사이트명 변경을 눌러준다. 

원하는 사이트 주소를 입력해준다. 

혹시 다른 사람과 겹친다면 

 

This site name is already taken

이라는 오류가 발생이 되고, 

그렇지 않으면 원하는 사이트명으로 주소 변경이 된다.

 

사이트명과 경로가 내가 원하는 주소로 변경이 되었다!

배포가 이렇게나 쉽다니!

 

상업적이나 큰 용량은 알아보진 않았지만,

제한이 있을지도 모르겠다.

소소하게 프로젝트용으로 괜찮을 것 같다,

 

rosedaily101.netlify.app

 

 

Heropy Coffee Landing

헤로피커피는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다.

epic-darwin-271c77.netlify.app


🌼그 외..

 


추가 배포

추가 배포 시 Deploys쪽에서 업데이트 확인이 가능하다고 한다.

 

 

단순 공백만을 넣고 테스트를 해보니 푸시하자마자 

바로 Building 되는 것을 볼 수 있다.

그리고 위 두줄을 작성하는 도중에

이미 퍼블리싱이 완료 되었다!

 

이부분은 푸시만 하면 자동으로 되니 너무 편하다.

 


개인 도메인 사용

 

내 프로젝트 메인에서 도메인 셋팅을 눌러 진입이 가능하다.

 

 

이렇게 원하는 도메인을 넣을 수도 있다.

개인 도메인은 없기에 테스트까진 진행해볼 수 없었다.

 

나중에 괜찮은 프로젝트 등을 만들게 되면

도메인 연결도 시도해봐야겠다. 

 

이것으로 개인 프로젝트 넬리파이(netlify)를 사용해서 

쉽게 배포 하기 완료! 

 

내 PC에만 있는 게 아닌 지인들에게 보여줄 수 있어서

더욱 뿌듯하다!

 

작성일
2022. 3. 15. 07:51
작성자
로즈♡

오늘도 잔디 좀 심어줬고요.

 

 

 

오늘은 메인, 배너, 메인 하단 슬라이드 메뉴까지 완성.

 

따라서 하니 큰 어려움 없이 재밌게 하고 있는데,

혼자 하려면 css가 너무 막막하긴 하다..ㅋㅋ

 

5시 시작 - 

혼코나 마찬가지지만, 일정한 시간이 정해지면 모각코 해보고 싶어서

모각코 페이지 생성. 

카메라 구도같은것도 좀 생각해봐야지.

 

출근 전 가볍게 독서 후에 시작할랬는데, 

30여분밖에 시간이 없을 것 같다.

 

운동도 해야하는데..??

작성일
2022. 3. 15. 07:27
작성자
로즈♡

자동 슬라이드 기능 만들기

gif가 아니지만..

순차적으로 내부의 글자등이 바뀌는 

자동 슬라이드 기능 만들기.

https://swiperjs.com/

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

swiperjs에 들어가서 Get Started를 누르면

 

 

 

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

사용하기 위한 코드를 받을 수 있다.

 

난 나중을 위해 블로그에 그대로 기록.

 

 

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

스크롤을 움직이면 html구조도 함께 받을 수 있다. 

new Swiper('.notice .swiper',{ 
  direction : 'vertical', // 수직 슬라이드
  autoplay : true, //자동 재생 여부
  loop:true	//반복 재생 여부
});

기본적인 js 설정도 함께 기록~

 

해당 페이지 api - parameters에서 기본 옵션 확인이 가능하고

modules - autoplay 옵션도 따로 정리되어 있다. 

 

반응형