오늘은 저번 시간에 배운 jQuery와 Media Query를 활용해서 반응형 헤더 만드는 방법을 배워볼게요. 뷰포트 너비에 따라 네비게이션 메뉴의 형태가 드로월 메뉴(햄버거 메뉴) 형식으로 변경해서 모바일에도 최적화를 시켜볼게요. 사전에 알아야 할 지식은 HTML, CSS, 간단한 jQuery입니다. 자세히는 block 타입, position, Click 이벤트를 활용해서 짧은 시간 안에 만들어보겠습니다. 🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟 🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요 🚀 ┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다. https://youtu.be/1FhfdnrRbJc 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자인 공부의 첫 단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다. ☞ 유튜브 : https://www.yo...

🚀 멤버십 전용 오늘은 jQuery 사용법을 배워볼게요. 우리가 배우려는 제이쿼리는 자바스크립트를 좀 더 효율적이고 쉽게 사용하는 걸 도와주는 라이브러리입니다. 배워볼 예제는 모달 팝업입니다. 클릭하면 켜지고, 딤 레이어나 닫기 버튼 누르면 꺼지도록 만들어볼게요. 바로 제이쿼리를 알아보기 앞서 우리가 이걸 배우는 게 맞는지 알아보는 시간과 변수와 함수, 클릭 이벤트 등의 간단한 사용법을 배워볼게요. jQuery – https://jquery.com/ 🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟 🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요 🚀 ┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다. https://youtu.be/lGRMjEkwegg 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자인 공부의 첫 단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니...

🚀 멤버십 전용 유명한 프레임워크인 부트스트랩을 통해서 웹사이트를 쉽게 만드는 방법을 알아보겠습니다. 예전에 웹디자인 입문 강좌에서 부트스트랩을 통한 웹 ui 엘리먼트와 컴포넌트를 소개한적이 있었죠. 이번에는 직접 사용해보는 시간입니다. 부트스트랩 – http://bootstrapk.com/getting-started 🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟 🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요 🚀 ┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다. https://youtu.be/0xqdo8mHYDA 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자인 공부의 첫 단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다. ☞ 유튜브 : https://www.youtube.com/c/designbase ☞ 디자인베이스 소개 : http://design...

이번 영상에서는 파비콘을 웹사이트에 쉽고 간단하게 적용하는 방법을 알아볼게요. 파비콘이란 favorites+icon의 합성어로, 인터넷 웹 브라우저의 주소창에 접속했을 때, 상단 탭의 왼쪽에 작게 보여지는 아이콘을 말합니다. 브라우저에 여러 사이트에 방문할 경우 브러우서 상단에 탭이 많은데, 그중에 심볼만 봐도 내가 만든 사이트라는걸 알 수 있도록 힌트를 줘야겠죠. 간단하지만 중요한 역할을 하고 있습니다. 파비콘 이미지 크기는 몇으로 하고, 어떻게 ico파일로 출력하는지, 그리고 HTML 코드로 어떻게 넣는지 다 알려드릴게요. 파비콘 제너레이터 – https://realfavicongenerator.net 🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟 🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요 🚀 ┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다. https://youtu.be/4vWqyqQ...