" 묵묵히 갈 길을 갈 수 있는 것도 용기 "

오딘박스(OdinBOX), 혁신을 이룹니다.

html 8

SweetAlert2를 활용하여 알림창 변경방법

자바스크립트,디자인,프론트엔드,백엔드,오픈소스라이브러리,공식문서,깃허브 기본 알림창을 변경하여 자신의 웹을 바꿔보자 최근 포트폴리오를 준비하면서 사이트를 만드는데 자바스크립트 등으로 만들어져 있는 오픈소스 라이브러리에 대한 관심도가 많아져 검색을 하다 보니 정말 다양하고 좋은 기능들이 많이 있기도 하고 신기한 기능들이 많이 있었습니다. 그중에서 사이트에 적용을 하면 괜찮을 것 같은 알림창(Alert)관련한 오픈소스를 여러분에게 소개를 해드리려고 합니다. 목차 SweetAlert2 [#] 우리가 보통 홈페이지를 이용하다 보면 자주 볼 수 있는 알림 창의 경우 보통 아래의 모양처럼 나오는 것을 확인을 할 수 있습니다. SweetAlert를 사용하게 되면 위와 같은 기본 알림창의 디자인을 바로 변경하여 사용할..

DEVELOPMENT 2022.05.14 (2)

맥에서 스프링 개발환경 구축하는 방법

맥,이클립스,운영체제,윈도우,개발,프레임워크,JSP,HTML,JS,CSS자바,스크립트,버전 맥에서 스프링을 사용하는 방법 최근 스프링 관련하여 공부를 하고 있는데 이전 글에도 글을 썼지만 맥북 에어를 구입을 하고 처음 맥을 사용하면서 어려움이 많습니다. 물론 지금 사용한 지 조금 지나다 보니 익숙해지긴 하지만 여전히 어렵다고 느껴집니다 사용이 불편하고 어려운 건 둘째 치더라도 개발환경을 윈도우에서 늘 익숙하게 사용하던 것처럼 하려는데 맥과 전혀 맞질 않아 제대로 실행이 안되기도 하고 프로그램 삭제 후 재설치하려는데 제대로 삭제가 안돼서 몇 번 초기화하다가 결국 공장초기화를 진행을 하고 우여곡절이 많았습니다 그래서 이번 글은 저와 같은 분들이 없었으면 좋겠고 또 나중에 제가 혼자 설정을 하는 일이 있으면 ..

DEVELOPMENT 2022.04.17

웹(WEB/UX) 디자인 관련 참고할만한 사이트

웹,UI,UX,반응형,모바일,PC,데스크톱,디자인사이트,그래픽,JS,HTML,CSS WEB UI/UX 디자인 참고 해보세요! 웹사이트 디자인을 위해 혼자 창작으로 해내는 것도 좋겠지만 다른 웹사이트들은 어떤 식으로 만들어져 있는지 확인을 하면서 참고를 하는 것도 정말 필요한 과정 중 하나입니다. 예를 들어 자신이 만드려고 하는 홈페이지가 커뮤니티 관련 홈페이지라고 한다면 관련 커뮤니티 홈페이지를 확인을 하면 되지만 불편하기도 하고 다양한 사이트를 보는 것이 자신이 사이트를 만들 때 디자인 관련하여 더욱 도움이 된다고 생각합니다. 그럴 때 바로 필요한 사이트를 여러분에게 소개를 해드리려고 합니다. 웹사이트모음 굿디자인웹 국내 최우수 웹디자인 선정, 웹사이트. 굿디자인웹 www.gdweb.co.kr - 굿디..

DEVELOPMENT 2022.01.06

Bootstrap :: Modal 활용하는 방법

HTML,홈페이지,웹,개발,프로그래밍언어,자바스크립트(JS),Jquery)제이쿼리,웹,팝업,모달 팝업보단 모달을 쓰자! 일반적으로 우리가 웹페이지를 이용하다 보면 자주 볼 수 있는 화면이 있는 팝업과 함께 모달이 존재합니다. 저의 경우 처음 HTML이라는 것을 접했을 때는 팝업(pop-up)을 이용하여 어떤 필요한 정보를 출력을 하였는데 우리가 인터넷을 쓰다 보면 팝업창이 뜨면 내용을 정확히 보지도 않고 닫거나 불편하고 여러모로 크게 좋진 않아 어떻게 하면 좋을까 고민을 하다 모달(modal)이라는 것을 알게 되었습니다. 그래서, 여러분에게 팝업과 모달의 차이점에 대해서 간단히 알아보고 모달 사용방법에 대해서 알아보도록 하겠습니다. 목차 모달(Modal) VS 팝업(pop-up) 팝업(pop-up) 우선..

DEVELOPMENT 2021.08.27

티스토리 자동목차(TOC) 만드는 방법

자동목차,TOC,jquery,javascript,자바스크립트,html,소스코드,블로그팁,노하우 블로그 목차로 포스팅을 좀 더 편하게 해보자 블로그 글을 올릴 때 조금 더 가독성이 있게 하려면 어떻게 해야 할까 고민을 하다 생각한 것은 목차를 만들어보면 어떨까라는 것입니다. 일단 목차가 있으면 필요한 부분을 바로 볼 수 있기도 하고 글이 정돈된 모습이 보기에 편하다는 장점이 있습니다. 일일이 손으로 목차를 만들고 하는 것은 번거롭고 시간도 많이 걸립니다. 그래서 자동목차(TOC)로 만들어놓으면 다른 부분은 크게 신경 안 쓰고 포스팅 후 작성이 됩니다 그러면 자동 목차를 만드는 방법을 설명을 해드리겠습니다. 목차 준비물 티스토리 [#] jQuery.TOC [#] 적용방법 jQuery.TOC 적용방법 다운로드..

IT/Blog 2021.05.12

블로그 스킨 수정 완료

블로그스킨,스킨,홈페이지,개편,스킨,html,bootstrap 스킨 개편 완료! 기존 스킨에서 테스트 블로그를 만들어 몇가지 추가를 하고 수정을 거쳤습니다. 아직은 사실 부족한 것은 많지만 더욱 미루게 되면 언제 적용을 하게 될지 알 수 없기에 미리 적용을 하고 차츰 수정을 진행할 예정입니다. 댓글의 경우 이미지/동영상(유튜브도 가능) 주소를 올리게 되면 댓글에 잠시후 이미지가 나오게 됩니다. 위와 같이 나오게 됩니다. 조금 더 댓글을 재미있게 쓸 수 있을 것 같아보입니다. 몇몇 수정을 진행을 하였는데 본문 내용 하단에 커피후원하기 버튼을 추가했습니다. 해당 버튼을 누르면 카카오페이로 후원을 할 수 있도록 만들었습니다 물론 자율적인 선택입니다 양질의 포스팅과 함께 더욱 정확한 내용으로 다가가도록 하겠습니다.

IT/Blog 2021.05.11 (1)

가상화폐(코인) 실시간 시세 조회 만드는 방법

업비트,가상화폐,비트코인,코인시세,현재시세.,주식,투자,개발문서,html,css,bootstrap,js,javascript 가상화폐 실시간 시세 받아오자 요즘 가상화폐 관련하여 많은 사람들이 관심이 많고 물론 저 또한 코인에 관심이 많이 있다 보니 검색하여 코인 관련하여 뉴스나 글들을 찾아보는 편입니다 그런데 업비트, 코인원, 빗썸 등 어플을 이용하지 말고 내가 스스로 개발을 할 수 있는 방법에 대해서 알아보다가 한번 만들어보고 여러분에게도 알려드리고 싶어서 이렇게 글을 적으려고 합니다 생각보다 간단하고 문서가 잘 정리가 되어있어 금방 이해할 수 있습니다. 우선, 저의 경우 업비트를 이용하여 한번 해보도록 하겠습니다 시작하기 전 필요한 것은 업비트 개발자센터[#]에 들어가는 것입니다 그리고 하단 부분에 ..

DEVELOPMENT 2021.05.06

블로그 로딩바/로딩 이미지 구현 방법

로딩바,블로그이미지,html,css,스킨편집,다운로드js,로딩이미지,스킨편집,스킨꾸미기,워드프레스,네이버,티스토리 블로그를 조금 더 멋지게 꾸며보자 블로그를 하다 보면 남들과 조금 다르게 차별화를 두고 내 블로그를 꾸미고 싶다는 생각을 하기도 합니다 저 같은 경우에도 조금 더 좋은 모습 타 블로그보다 더 괜찮은 모습으로 보이기 위해 여기저기 찾아보기도 하고 적용하던 중 로딩바 설정 및 로딩 이미지 관련하여 설정하는 방법에 대해서 알려드리도록 하겠습니다. 크게 두 가지 방법으로 했으니 원하는 방법으로 설정을 해주시면 됩니다! 블로그를 조금 더 멋지게 꾸며보자 첫번째, 블로그 로딩바 만들기 블로그 관리화면에서 꾸미기>스킨편집을 누릅니다. 위와 같이 스킨 편집화면으로 이동되는 것을 확인할 수 있습니다. 스킨편..

IT/Blog 2021.04.18