본문 바로가기

전체 글

🔥 온라인 불멍 사이트를 만들어보자
😁 프로젝트(들) 2022. 3. 2. 🔥 온라인 불멍 사이트를 만들어보자 🔥완성 사이트: https://eggjini.github.io/boolmung/ 🎨깃허브 주소: https://github.com/Eggjini/boolmung 🎟️ 개요 (라 쓰고 잡담이라 읽는다) 불멍은 워낙에 많이 유명한지라 잘 알고 있을 것 같다. 그래도 간단하게 설명하자면 불 지펴놓고 멍때리는거다 불 지피는것도 그렇고 (귀찮음...) 코로나 때문에 집에 콕! 틀어박혀 있으니 온라인으로 사이트를 만드는 것도 나쁘지 않은 것 같다. 😗 구상이란 걸 하고 시작하자 이때까진 아무 생각 없이 만들었지만, 적어도 구상이라는 것은 해 보려고 한다. 재능기부: 내 손 사용 프로그램: 윈도우 기본 그림판 이렇게! 그림판으로도 그림을 그릴 수 있다(?) 는 것을 보여드렸습니다. 🧑‍💻 기본 틀 잡기 일단 구상한 ..
[🎨썸네일 메이커] 다음, 구글 검색 등록하기
😁 프로젝트(들) 2022. 2. 26. [🎨썸네일 메이커] 다음, 구글 검색 등록하기 이 제목과 부제목이 기대를 하길래 검색 등록을 해 주겠습니다. 🔥 다음 검색등록 일단 다음부터 등록을 해 줄께요. 사실상 다음 검색등록이 가장 쉽답니다. https://register.search.daum.net/index.daum Daum - 검색등록 Daum 검색등록 사이트 검색을 무료로 등록할 수 있는 서비스입니다. 언제든 정보보완 수정이 가능하며, 등록 후에는 Daum 검색결과에 노출되어 수많은 네티즌들이 방문하게 됩니다. 신규등록하기 register.search.daum.net 여기에 등록할 사이트를 넣어 주고, 확인을 누른 다음에 이렇게 약관에 동의를 하면 됩니다. 이렇게 설명하고 다 적어 준 다음에 신청자 정보도 입력을 해 주고 확인 버튼만 누르면 등록이 완료됩니다! 너무 간단해, 만족해 🔥..
[🎨 썸네일 메이커] 업데이트 - 그라데이션 배경
😁 프로젝트(들) 2022. 2. 26. [🎨 썸네일 메이커] 업데이트 - 그라데이션 배경 썸네일 메이커 사이트를 배포하고 나서, 생각보다 많은 관심을 주셨습니다! 그래서 제가 나름 생각해 두었던 그라데이션을 배경으로 설정하는 기능을 넣어 보려 합니다 그라데이션 기다려라! 🙀 Div 클릭할때 이벤트 제가 이렇게 각각 g1~g11 의 div를 만들어 놓고, changeG(gi) 형태로 function을 실행시키게 해 두었습니다. 이건 지난 업데이트때도 적용이 되었었던 내용이예요. 이게 chagneG 함수 내부의 모습이고요 (좀 비효율적인 코드....😂) HTML 삽입 미리보기할 수 없는 소스 각각 변수 값마다 그라데이션을 다르게 설정하는 코드입니다. 이제 이 그라데이션 값들을 다 바꿔 줘야 해요. 이 Div들에 적용한 그라데이션 효과대로 배경에 적용해 줄 겁니다! 👉 CSS 그라데이션 쉽게 적용..
[깃허브 스킨] 🌱Plants 스킨 - Minimal Mistakes 테마
🎟️ 깃허브/🎨 깃허브 스킨 2022. 2. 25. [깃허브 스킨] 🌱Plants 스킨 - Minimal Mistakes 테마 Purple 테마에 이어서, 파릇파릇한 Plants 테마를 제작했습니다! 🎨 색상 정보 🔥 적용 화면 적용 블로그: https://eggjini.github.io 👉 소스 코드 HTML 삽입 미리보기할 수 없는 소스 깃허브 링크: https://github.com/Eggjini/Minimal-mistakes-skin/tree/main/skins GitHub - Eggjini/Minimal-mistakes-skin: 깃허브 블로그 테마 Minimal mistakes 스킨 배포🔥 깃허브 블로그 테마 Minimal mistakes 스킨 배포🔥. Contribute to Eggjini/Minimal-mistakes-skin development by creating an account on GitHub. git..
[⏰미닛 타이머] HTML, CSS로 간단한 파이 타이머 만들기
😁 프로젝트(들) 2022. 2. 25. [⏰미닛 타이머] HTML, CSS로 간단한 파이 타이머 만들기 CodeSandbox를 이용하여 제작했습니다. Codesandbox 이용법은 👉온라인 IDE 코드샌드박스를 참고하세요 타이머 링크: https://eggjini.github.io/minute-timer/ Minute Timer 시작 초기화 eggjini.github.io 우선, 이런 타이머를 HTML과 CSS로 만들어 보도록 합시다! 이 타이머는 제가 직접 HTML과 CSS, 자바스크립트를 이용해서 제작한 사이트예요. 무엇보다 디자인에 신경을 좀 썼습니다. (예쁘면 장땡이지 뭐...) 📌 돌아가는 타이머 구현 저 빙글~빙글 돌아가면서 남은 시간을 직관적으로 나타내 주는 타이머를 만들어 봅시다. 이런 파이타이머를 구현하기 위해서 방법과 소스코드들을 찾아다녔지만 딱히 마음에 들지 않아서 몇 가지만 참고하여 ..
[📒C++] Microsoft Visual Studio 설치 및 설정
📒 C++ 2022. 2. 25. [📒C++] Microsoft Visual Studio 설치 및 설정 🔥 Visual Studio 설치 자, 코딩을 배우기 앞서서, 코딩을 할 프로그램을 깔아 보도록 합시다. 이 강의는 C++ 에 대해 다룰 것이기 때문에 C++ 에 나름 최적화된 IDE를 소개 시켜 드리려 합니다. :) 모든 강좌는 보면서 바로바로 따라 해 보는 것을 추천드려요. 천재라면 한 번 보고 기억할 수 있겠지만, 여러분은 천재가 이니니...👍 자, 우선 네이버 검색창에 "Visual Studio" 라고 검색을 해 봅시다. 맨 위에 검색 결과에 무려 마이크로소프트라는 거창한 회사가 나옵니다. 클릭해서 조심스래 들어가 주세요. 이제 뭔가 있어 보이는 언어들이 나오기 시작했습니다. 저 아래에 맨 첫번째 보라색 Visual Studio를 다운로드 받으시면 됩니다. 돈이 많으시면 Professional을 ..
[파이썬] 으로 원주율 계산하기
🎉 파이썬 2022. 2. 25. [파이썬] 으로 원주율 계산하기 엄청나게 복잡해 보이는 계산도, 많은 계산도 파이썬을 이용해서 쉽게 계산할 수 있답니다. 이번에는 원주율 (Pi)를 구하는 공식을 이용해서, 소수점 아래 몇 번째 자리까지 계산이 가능한지 계산을 해 볼께요. "파이썬 편집 프로그램은 파이참을 이용했습니다" 🙀 원주율 구하는 공식 사실 공식이라기보단 방법에 가까워요 코드는 https://mathcoding.tistory.com/17 [수학 코딩] 파이썬으로 원주율(π) 구하기 아르키메데스는 96 각형을 직접 손으로 그려서 다각형의 둘레의 길이를 측정하였고, 원주율(π)이 3.14163이라고 계산하였다. 실제 값과 거의 차이가 나지 않았다. 아르키메데스가 96각형을 정확 mathcoding.tistory.com 이 블로그를 참고했습니다. HTML 삽입 미리보..
[🎨썸네일 메이커] 모바일 미지원 안내
😁 프로젝트(들) 2022. 2. 25. [🎨썸네일 메이커] 모바일 미지원 안내 🔔 안내 🔔 썸네일 메이커를 모바일에서 접속하면 이렇게 다~ 잘려서 보입니다. 물론 반응형 웹 디자인을 하면 되지만, 지금은 어떻게 할 수 없는 관계로 "모바일 접속 지원을 종료합니다" 혹시나 반응형으로 디자인하게 된다면 모바일도 접속이 가능하도록 업데이트를 할 예정입니다. 🔥 자바스크립트 모바일 접속 불가를 알려주는 알림창을 띄우고, 그 알림창의 확인을 누르면 이 포스팅으로 연결되도록 코드를 만들었습니다. HTML 삽입 미리보기할 수 없는 소스 파이어폭스에서 User Agent 를 변경하고 접속해 보니 이렇게 알림창이 뜹니다. Android, IOS는 물론 다른 모바일 환경에서 접속해도 이 알림창이 뜨게 됩니다. 멘트만 좀 바꿔서 사이트에 적용했습니다. 참고로 소스코드는 전체 공개됩니다. (깃허브에 있..
[깃허브 블로그] 깃허브 블로그 만들고 설정하기, Minimal Mistakes
🎟️ 깃허브 2022. 2. 23. [깃허브 블로그] 깃허브 블로그 만들고 설정하기, Minimal Mistakes 깃허브는 코드를 업로드해 공유할 수 있는 다양한 기능들을 가지고 있지만, 이렇게 홈페이지를 호스팅 할 수 있는 기능도 가지고 있어요! 깃허브로 간단하게 블로그를 만드는 방법을 알려 드릴게요.👻 📌레포지토리 만들기 깃허브에서 특정한 이름으로 레포지토리를 만들어 주기만 하면, 자동으로 깃허브 페이지에 호스팅된답니다. 그 레포지토리에 블로그나 홈페이지를 구성하는 파일들을 업로드 해 주면 자동으로 그 파일들을 이용해 블로그나 홈페이지가 만들어져요! 1️⃣ 스킨 포크해 오기 이 깃허브 블로그를 더 쉽게 만들기 위해서, 이미 기본적인 틀을 갖추고 있는 다양한 스킨들이 있답니다. 이 스킨을 이용해서 깃허브 블로그를 만들면 아주 쉽게 만들 수 있어요. 제가 추천하는 스킨은 바로 "Minimal Mistakes"라는 스..
[깃허브 스킨] 💜Purple 스킨 - 깃허브 블로그 Minimal mistakes 테마
🎟️ 깃허브/🎨 깃허브 스킨 2022. 2. 21. [깃허브 스킨] 💜Purple 스킨 - 깃허브 블로그 Minimal mistakes 테마 제가 이 티스토리 블로그 이전에 운영했었던 깃허브 블로그가 있습니다. 지금은 그 깃허브 블로그의 크고 작은 문제들 때문에 이렇게 티스토리에 정착하게 되었어요. 마크다운으로 열심히 작성해 두었던 포스팅들도 하나 하나 티스토리에 옮겨 놓았고 검색등록, 애널리틱스, 서치콘솔 등록도 간단하게 다 마쳤습니다. 😣 테마는 jekyll 테마 "Minimal mistakes" 를 사용했고요, 스킨은 기존 여러 스킨 대신에 제가 직접 커스텀 한 스킨을 사용했습니다. 기존 스킨 중에 썩 맘에 드는 스킨이 없더라고요. 😀 그래서 제가 색깔들을 조합해서 만든 스킨들을 하나씩 배포해 보려 합니다. 🔥 색상 정보 이번 Purple 스킨은 말 그대로 "보라색"을 모티브로 제작되었습니다. 포인트 색상은 (#7f22fd) 이고, 링크..
[HTML / CSS]요즘 인기있는 온라인 코드 작성기 (IDE) 코드샌드박스! CodeSandbox
🔥 HTML, CSS 2022. 2. 20. [HTML / CSS]요즘 인기있는 온라인 코드 작성기 (IDE) 코드샌드박스! CodeSandbox windows 11 CodeSandbox HTML 과 CSS를 작성하고, JS를 연결해 웹사이트를 만들기 위해서 VScode 라는 IDE를 사용하곤 했습니다. 하지만 간단한 수정 사항이 있음에도 프로그램을 실행시켜야 하고, 수정 결과를 보기에도 시간이 꽤 오래 걸렸답니다. (그냥 귀찮아서...) 그래서 오늘 바로 CodeSandbox라는 무려 온라인 코드 작성기를 소개시켜 드리려고 합니다. HTML, CSS는 물론 자바스크립트나 Vue, React 같은 다양한 종류도 있더라고요~ 🔥 회원가입, 로그인 👉 사이트 바로가기 코드샌드박스 사이트에 접속하면 이런 화면이 뜰 텐데요, 따로 회원가입 없이 기존 깃허브 계정이나 구글 계정으로 로그인할 수 있습니다. 이건 편리성이나, 보안성 측면으로 좋은 것 같네요. ..
[보안, 해킹] 웹 해킹 연습 사이트 - webhacking.kr 사용법
🧑‍💻 보안, 해킹 2022. 2. 20. [보안, 해킹] 웹 해킹 연습 사이트 - webhacking.kr 사용법 windows 11 webhacking.kr 사이트를 제작하면서 보안에도 신경을 써야 한다는 생각이 들었습니다. 이곳 저곳 찾아보니 보안에 대해서도 어느 정도 알면 좋지 않을까 해서 직접 웹 해킹을 해보면서 알아가 보도록 합시다. (물론 합법으로요...) 🔥 웹 해킹 연습 사이트 웹 해킹의 다양한 방식적인 부분을 게임(?) 같이 한번씩 해 볼 수 있는 사이트입니다. 워낙 웹 해킹 사이트 중에서도 유명한 사이트라서 한번쯤은 접해 봤을지도 모르겠네요. https://webhacking.kr 사이트 주소마저 웹해킹입니다. ✅ 회원가입 사이트에 접속해서 왼쪽에 Login / Join 버튼을 눌러서 계정을 생성해 주세요. 계정이 있어야 진행이 될 듯 합니다. 간단하게 ID와 비밀번호, 이메일을 적어 주면 바로 계..
[깃허브] 프로필부터 여러 기능 활용까지 한방에 끝내기
🎟️ 깃허브 2022. 2. 20. [깃허브] 프로필부터 여러 기능 활용까지 한방에 끝내기 windows 11더 알아보기 github / stackEdit 개발자이거나, 코딩 / 프로그래밍에 관심이 있으시다면 한 번쯤은 깃허브1 에 대해 들어 보셨을 겁니다. (아니라도 상관 없어요~^^) 하지만 깃허브 블로그에 관한 내용은 좀 어려우니, 이번엔 깃허브 사용법을 간단하게 알려 드리도록 하겠습니다! 🔥 회원가입 깃허브👉바로가기 우선 깃허브에 들어가면, 이런 (있어보이는) 페이지가 뜹니다. 아쉽게도 외국 페이지라서 영어로 봐야 할 듯 하네요. 깃허브 계정이 있다면 다음 단계로 넘어가셔도 됩니다. 계정이 없으신 분들은 계정을 새로 만들어 주셔야 해요! sign up이라는 버튼을 눌러서 회원가입 창으로 들어가 주세요. 이메일 입력 비밀번호 입력 닉네임 설정 인간 증명 2 이메일 인증 등 간단한 절차를 ..
[꿀팁!] 그라데이션 CSS 간편하게 적용하기 - WebGradient
💡 꿀팁! 2022. 2. 20. [꿀팁!] 그라데이션 CSS 간편하게 적용하기 - WebGradient Windows 11 CodeSandbox / VScode HTML1 이나 CSS2 를 이용해서 사이트를 제작하고, 디자인하다 보면 이런 그라데이션3 이 어딘가에 필요하곤 하죠. 그럴 때마다 구글 검색을 통해서 그라데이션 불편하게 찾지 말고! 이제 이 사이트 하나로 간편하게 그라데이션 CSS를 적용해 보세요. 사이트 바로가기: https://webgradients.com/ ❓사용 방법 이 사이트를 사용하는 방법은 정말 간단합니다. 우선, 사이트에 접속해서, 원하는 그라데이션 효과를 찾은 다음 바로 CSS코드를 복사 할 수 있어요. 1️ 원하는 그라데이션 효과 찾기 이 사이트에는 무려 180가지의 그라데이션 효과들이 있습니다. 각각 그라데이션들의 색상 코드와 png 파일4 도 무료로 제공된다고 하네요~ 2️..

티스토리툴바