분류 전체보기71

• 

  html, css 구글폰트 적용하는 방법🦄 열심히 구글링 한 폰트 빠르게 적용시켜 봅시댜~! fonts.google.com/specimen/Noto+Sans+KR?query=noto+san Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 1. 위 사이트에서 폰트를 고릅니다. 2. 맘에드는 폰트를 클릭하면 옆에 저런 박스가 생겨요. 복붙을 두번 해줍니다. 첫번째는 html에 복붙 두번째는 css에 복붙 예시는 아래 사진을 참고하세요😊 짜란~~ 폰트적용 끝. 오늘도 즐코딩하세용~~ 코드그림이었습니다🤡 깃허브 보러 놀러오세요 👇 (맞팔환영) https://github.com/Joowon0220 Joowon0220 - Ov.. l 🤖 코드 l 2021. 5. 12.

• 

  깃 레포지토리 주소 바꼈을때 (git remote origin) 초 수정 ⭐ 먼저 해당 프로젝트 파일 경로에서 터미널을 킵니다. 1. git remote 를 눌러 확인합니다. (먼저 깃에 등록되어 있던 프로젝트라면 origin이 확인되실거예요~) 2. git remote remove origin 으로 등록된 origin을 삭제시켜줍니다. 3. git remote add origin https://새로운 깃 주소 를 붙여넣기 해 줍니다. 그럼 주소변경은 끝났어요! 홓호 😊 평소처럼 git add . git commit -m "메세지" git push origin master 하셔서 잘 푸쉬되는지 확인해보세요~~~ 오늘도 즐코딩 하세요 🍹 코드그림이었습니다 :) 깃허브 보러 놀러오세요 👇 (맞팔환영) https://github.com/Joowon0220 Joowon0220 - Ove.. l 🤖 코드 l 2021. 4. 28.

• 

  css 마우스 커서 바꾸기, mouse cursor custom 💖3초컷 안녕하세요 코드그림입니다 :) 오늘은 위의 이미지로 마우스 커서를 변경하는 CSS코드를 공유합니다 !! See the Pen Change your mouse cursor 💖 by CodeGream (@joowon0220) on CodePen. 엄청 간단하니까 이미지 소스만 바꿔서 사용해 보세요~ 그럼 오늘도 즐코딩 하세요~ 코드그림이었습니다 :) 댓글,공유 환영🌷 깃허브 보러 놀러오세요 👇 (맞팔환영) https://github.com/Joowon0220 Joowon0220 - Overview 𝙄 𝙝𝙤𝙥𝙚 𝙢𝙮 𝙘𝙤𝙙𝙚'𝙨 𝙬𝙖𝙧𝙢𝙩𝙝 𝙩𝙤𝙪𝙘𝙝𝙚𝙨 𝙮𝙤𝙪 :) . Joowon0220 has 14 repositories available. Follow their code on GitHub. github... l 🤖 코드 l 2021. 4. 26.

• 

  회원가입, 로그인 폼 (form 태그 데이터 전송, input custom) See the Pen input form & data apply by CodeGream (@joowon0220) on CodePen. 안녕하세요~ 코드그림입니다. 오늘은 회원가입, 로그인 폼을 만들고 커스텀 해봤습니다. 위 코드는 아래의 기능들을 포함하고 있습니다. 자바스크립트 전화번호는 숫자만 입력 가능 자바스크립트 숫자 12자리 이상 넘어가면 알림메세지 뜨고 숫자막힘 인풋태그 빈 값 있으면 alert 메세지 뜨고 폼 제출 안됨 체크박스 개인정보 동의 하지 않으면 폼 제출 안됨 코드 보시고 빠르게 폼태그 완성하셔서 칼퇴하시길 바랍니다. 많은 도움이 되셨길 바라며~ 코드그림이었습니다 :) 깃허브 보러 놀러오세요 👇 (맞팔환영) https://github.com/Joowon0220 Joowon0220 - .. l 🤖 코드 l 2021. 4. 26.

• 

  깃 branch 따서 프로젝트에 합치는 법 (깃에 올린 프로젝트 다른데서 다운받아 업데이트 하기) 먼저 올려둔 프로젝트를 새로운 개발환경에서 클론합니다. 1. git clone https://클론받을 깃 주소 2. cd 클론받은 프로젝트 이름 ---> 클론받은 프로젝트 경로로 이동합니다. 3. git branch 새로운 브랜치 이름 ---> 새로 가지치기 할 브랜치 이름을 만들어서 입력해 주세요. 4. git checkout 방금 만든 브랜치 이름 ---> 클론한 프로젝트에서 브랜치로 마스터에게 pull request를 날리겠다 하는겁니다. ---> checkout은 role을 선택할 수 있어요. master를 선택할 수도 있고, 다양한 브랜치중에 하나를 선택할 수도 있습니다. 어떤 가지(branch)를 선택해서 코드를 업데이트 하겠다는 명령어입니다. 5. code . ---> 깃허브에 코드 업데이트.. l 🤖 코드 l 2021. 4. 19.

• 

  🧡깃허브 예쁘게 꾸미는 법 (간단해요!!) 🧡 개발자들의 간판이라고 할 수 있는 깃허브 메인 꾸미기!! 생각보다 정말 간단합니다. 복사 붙여넣기 몇번만 하시면 돼요!! ㅎㅎ 그럼 폭풍 복붙하러 레쓰고~~ github.com/Joowon0220/ Joowon0220 - Overview Joowon0220 has 13 repositories available. Follow their code on GitHub. github.com 먼저 제 깃허브의 메인 모습입니다. 여기서 꾸밈 요소는 크게 세가지로 볼 수 있어요. 1) 녹색 큰 면적을 차지하고 있는 헤더 부분 --> 이 부분은 새로고침 할 때마다 색이 자동으로 바뀝니다. 아래 코드에서 상세히 알려드릴게요 :) 2) 기술과 나를 보여줄 수 있는 링크 부분 --> 여기서는 각 기술에 대한 브랜드 로고와 색.. l 🤖 코드 l 2021. 4. 18.

• 

  💗초간단💗 마우스 움직이는대로 따라오는 하트 만들기 (JS, CSS, HTML) 안녕하세요~~ 코드그림입니다 (｡･∀･)ﾉﾞ 오늘은 css로 하트를 만들어서 마우스가 움직이는대로 따라오게 만들어 보겠습니다. (마우스 커서를 하트로 커스텀하기!!) 코드는 아주 간단합니다!! 저는 자바스크립트 마우스 이벤트를 이해하기 위해 만들어 봤어요 (❁´◡`❁) See the Pen Mouse Cursor Event (Easy, Basic)🍳🍹 by CodeGream (@joowon0220) on CodePen. css로 하트를 만드는 원리는 마름모를 먼저 만들고 위에 동그라미 두개를 올리는 원리입니다 💗 한번 css색깔을 바꿔가면서 확인해 보셔용 ㅎㅎㅎ codepen.io/joowon0220/pen/VwPZjxR Mouse Cursor Event (Easy, Basic)🍳🍹 This is the.. l 🤖 코드 l 2021. 3. 22.

• 

  웹사이트 아이디어 스크랩 / 케냐 LEWA HOUSE🏝🌄 안녕하세요, 코드그림입니다. 오늘은 인트로부터 범상치 않은 웹사이트를 소개합니다!! 케냐에 있는 한 럭셔리 호텔인데요, 자연을 보호하고 그 자체를 느끼는 경험을 선사하는 것을 모티프로 하는 호텔인가봐요. 웹사이트 내내 자연, 동물, 그리고 함께인 느낌을 물씬 느낄 수 있습니다.😎 이렇게 구름이 떠다니는 모습이 들어간 인트로는 마치 비행기를 탄 채 상공에 있는 느낌을 줍니다. ✈☁✈☁ 실제 웹사이트에서는 구름도, 버튼도, 다 움직이면서 굉장히 동적인 느낌을 주고있어요. 구름을 걷고 이륙을 하면 lewa house에 대한 소개영상이 들어간 페이지가 나와요, 이렇게 호텔의 컨셉을 한눈에 보여주고 나침반 버튼과 함께 탐험해보라는데~~ 안할수가 없쭁 홓호(～￣▽￣)～ 탐험하러 가봅니다 가봅니댜~~ 이렇게 친절하고.. l 🤖 코드 l 2021. 3. 22.

• 

  🌞⭐멋진 아이디어와 기술이 돋보이는 사이트 (Three.js)🌟🌜 디자인적으로 좀 더 새롭고 멋진 기술을 찾다가 Three.js를 알게됐어요╰(*°▽°*)╯ Three.js => 웹 브라우저에서 애니메이션 3차원 컴퓨터 그래픽스를 만들고 표시하기 위해 사용되는 크로스 브라우저 자바스크립트 라이브러리이자 API 자바스크립트로 3D 기술 구현이 가능한 webGL 을 좀 더 쉽게 사용 할 수 있게 한 라이브러리이자 API 인데요, 공식사이트는 아래와 같습니당 :-) threejs.org/ Three.js – JavaScript 3D library threejs.org 그래서 공식 사이트를 둘러보다가, 저처럼 일러스트, 애니메이션에 관심있으신 분들이 좋아할만한 사이트들을 소개합니다. ヾ(≧▽≦*)o 1) 드래그 효과로 여행 애니메이션이 진행되는 사이트 www.ashortjou.. l 🤖 코드 l 2021. 3. 19.

• 

  💛css,js (자바스크립트) 필수 기능, 효과 데모사이트 공유 💫 깔끔한 스와이퍼 기능 (그 외 각종 효과 다량 보유) swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 도로명주소 https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 예약기능 만들때 필요한 달력, 시간 -달력 (datep.. l 🤖 코드 l 2021. 3. 11.

• 

  자바스크립트 효과 적용하기 (GSAP, TweenMax) // opacity:0 으로 설정해 둔 요소를 보이게 만드는 효과 $(document).ready(function() { const title=$(".title"); //class명 title인 애를 const 안에 title로 담아둠 title.addClass("visible"); //title에 보이는 효과를 더함 }); // 안보이던 요소가 점점점 선명해지게 하는 효과 TweenMax.fromTo( ".main_img", 0.6, { opacity: 0 }, { opacity: 1, delay: 0.6 } ) --> 0.6 초동안 이벤트를 발생하게 하고 이벤트 발생 전 0.6초의 딜레이시간을 갖는다. // 다중 요소에 한번에 효과 적용하고 차례대로 이벤트 주는 효과 TweenMax.staggerTo.. l 🤖 코드 l 2021. 3. 5.

• 

  !!초간단!! vs code (비쥬얼 스튜디오 코드) html 파일에서 브라우저 열기 @코드그림 vs code (비쥬얼 스튜디오 코드) html 파일에서 브라우저 여는 간단한 방법 Extension열고 open in browser 검색 다운받고 html파일에서 오른쪽 클릭! open in default browser를 클릭하면 웹에서 실행 가능합니다. 브라우저를 크롬에서 키고싶다면, 왼쪽 아래 톱니바퀴모양 클릭(manage) > Settings > browser검색 > plugin open-in-browser 크롬으로 설정하면 끝~ l 🤖 코드 l 2021. 3. 5.