취미부자 개발자 로즈🌼

전체 글 128

카테고리 설명
개발, 일상, 내가 좋아하는 다양한 것들을 기록합니다 :)
  • 참 민망하게도 이제까지 혼자 힘으로 배포를 해 본 적이 없었는데.. 너무 쉽게 배포 할 수 있는 방법이 있어서 따라해봤다. 아직 미완성 된 페이지지만 배포 된 걸 보고 싶어서 드릉드릉~ 뭐 하나라도 놓칠까 싶어 하나씩 다 캡쳐를 한 것이기에 스크롤 압박이 있을 수 있다. 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..

  • 골린이 입문자예요. 스크린 골프로 배우고 있는데, 다른분들은 골프화를 따로 챙겨서 신고 계시더라구요. 기존에 저는 그냥 일반 운동화를 신고 했었는데, 골프화를 신으면 확실히 덜 밀린다고들 하더라고요. 그래서 그동안 맥스97을 구매하고 싶었었는데, 이왕 구매하는 거 골프화로 구매했어요. 골프화와 아닌 것의 차이는 무게와 바닥의 차이가 있다고 해요. 여성골프화로 여러개 검색해봤는데, 딱 봐도 골프화 같은 디자인이 있기도 하더라구요. 근데 전 이왕이면 자연스러운(?) 일반 운동화가 좋더라고요 ㅋㅋ 골린이라 아직 익숙치 않은건지.. 많은 여자골프화 디자인이 별로..예요 ㅠㅠ 중국에서 물건너 왔어요..ㅋ 일반 맥스97 대비 확 저렴하더라고요! 측면에서의 모습은 이러한데요. 화이트 색상에 매쉬와 교차되어서 은은하게..

작성일
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 옵션도 따로 정리되어 있다. 

 

작성일
2022. 3. 14. 11:29
작성자
로즈♡

골린이 입문자예요. 

 

스크린 골프로 배우고 있는데, 

다른분들은 골프화를 따로 챙겨서 신고 계시더라구요. 

 

기존에 저는 그냥 일반 운동화를 신고 했었는데, 

골프화를 신으면 확실히 덜 밀린다고들 하더라고요.

 

그래서 그동안 맥스97을 구매하고 싶었었는데, 

이왕 구매하는 거 골프화로 구매했어요.

 

골프화와 아닌 것의 차이는 무게와 바닥의 차이가 있다고 해요.

 

여성골프화로 여러개 검색해봤는데, 

딱 봐도 골프화 같은 디자인이 있기도 하더라구요.

근데 전 이왕이면 자연스러운(?) 일반 운동화가 좋더라고요 ㅋㅋ

 

골린이라 아직 익숙치 않은건지..

많은 여자골프화 디자인이 별로..예요 ㅠㅠ

 

 

중국에서 물건너 왔어요..ㅋ

 

일반 맥스97 대비 확 저렴하더라고요!

 

측면에서의 모습은 이러한데요.

화이트 색상에 매쉬와 교차되어서  

은은하게 빛반사를 보여주더라구요.

 

그냥 맥스97 발바닥으로 검색해보면

요런느낌으로 돌기? 같은게 많지 않은데요.

 

 

맥스97 골프화로 나온 요 제품 발바닥은 대충 이런 느낌!

전체적으로 미끄러짐 없이 잘 잡아줄 것 같죠?

 

그리고 바닥색상도 회색으로 일반 운동화로 나온것과는 조금 달라요.

 

 

 

측면에서 봐도 발바닥 부분 외에는 거의 비슷해 보이고요.

 

 

발이 들어가는 입구를 위에서 봤을 땐 이런 느낌.

 

색상이 화이트다보니까 어두운 색 양말을 신으면

마찰로 보풀이 어두운 색으로 일어나더라고요..ㅠㅠㅋㅋ

 

현재는 몇번 안신었는데 거뭇한 보풀이 생겼어요.

 

 

사실 이 신발은 기존에 예쁘다는 생각을 전혀 못했는데, 

아파트 정문에서 어떤 분이 이 신발을 신고

위엔 캐쥬얼하게 원피스를 입었는데, 

밤이라서인지 매쉬부분이 빛에 반사되면서 너무 예쁘더라고요.

 

그거에 꽂혀서 ㅋㅋㅋ

 

발바닥에서 앞코로 올라오는 부분 역시 그레이!

개인적으로 그레이가 때탐이 적으니 더 좋을거 같아요.

 

잔디에서 골프를 칠 때,

잔디색이 물들 수 있어서가 아닐까 추측해봅니다. 

 

뒤쪽 디자인도 봐주시구용 ㅎㅎ

 

 

앞코를 바로 앞에서 봤을 땐 이런느낌이에요.

 

 

아! 사이즈는 평소 구두 230, 운동화 235라서

235로 편하게 신기위해 골랐고요.

 

신어본 결과 발 앞부분은 편한데, 

굽이 좀 있어서 발목이 좀 뜨거든요. 

그래서 신발끈을 꽉 매야 흔들림이 덜해요!

 

아무래도 골프하면서 발목의 움직임이 

걷는 것 대비 많아서 그런 듯 하구요.

 

그냥 걷기엔 제법 무거워요!

골프 칠 떄 확실히 미끄러짐도 덜하고 중심을 잡아주니까

이래서 골프화 사나보다 싶었어요.

일상에선 모래주머니 단것 같이 묵직하니

운동효과는 있을지도 ㅋㅋ

 

매쉬 부분은 빛에 따라 반사가 되는데, 

각도에 따라 잘 보이지 않을때도

눈에 확 띌 때도 있어서 색다른 매력을 보여주고요.

 

광택이 있는 매쉬소재다보니까 

아무래도 일반 매쉬 대비 오염에는 조금이나마 강하지 않을까 싶어요.

 

 

푸른한 잔디 위에서 찍고 싶었으나 

아직은 부끄러운 골린이라 신발 갈아신으면서 찍어봤어요 ㅎㅎ

 

골프화를 일상에서 신으면 밑창이 닳으면

미끄럼 방지 역할을 좀 덜하게 되긴 한다는데요.

 

그건 진짜 데일리로 맨날 신을 때의 이야기이기도 하고, 

그렇게까지 닳도록 신은 신발이 없는 만큼ㅋㅋ

가끔씩 일상에서도 신으려구요.

 

굽도 있어서 더 만족스러운 

나이키 맥스97  트리플 화이트 예쁜 골프화

맘에 쏙 들어요 :) 

 

 

 

반응형