JavaScript를 쓰지않고 CSS 로만 Dropdown 메뉴를 만들어 보도록 하겠습니다. 핵심은 :hover 효과와 display:none; 속성을 잘 활용하는 것. :hover = mouse를 올렸을 때 라는 경우의 수 display = 요소를 어떻게 보여줄지 결정하는 css 속성 1. dropdown menu를 ul li ul 로 html 짠 경우 html 코드 (일부) slide1 ▼ sub_slide1 sub_slide2 css 적용 (일부) /* 서브메뉴 숨기기 */ #gnb li ul{ display:none; } /*메인메뉴 마우스가 올라가면 텍스트 아래 검은 테두리 만들기 */ #gnb > li:hover > a{ border-bottom:3px solid black; } /* 메인메뉴..
오늘은 공부하면서 사용한 slider 플러그인 중 하나인 "Swiper" plugin을 가져왔습니다. jQuery 공부 도중 슬라이더에 대한 플러그인이 있더라구요 javascript로 짜여있지만 좋았습니다. 설치 방법부터 기본 적용까지 + multiple swiper 사용하기 까지 써보려고 합니다. 기본 설정 1. 먼저 로고 하단의 [Get Started] 를 Click 주로 CDN을 사용하기 때문에 [Use Swiper from CDN] 있는 영역으로 갑니다. ... 2. slide 코드를 작성할 3.body 사이에 swiper 기본형식을 사용하기 위해 마크업을 합니다. (cdn 바로 아래 [Add Swiper HTML Layout] 참고) Slide 1 Slide 2 Slide 3 ... 사용해보기 ..
HTML 마크업에 대해 알기 전에 HTML이 뭔지 알아보자 ★ HTML Hypertext Markup Language 의 약자로 프로그래밍 언어는 아니지만, 웹페이지가 어떻게 구조화 되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 즉, 웹페이지 만들때 사람으로 치면 '뼈' 라고 생각하시면 됩니다. ★ MarkUp (마크업) 언어 "MarkUp(마크업)"으로 둘러싸인 언어를 말하는데요. 마크업이라고도 하지만 tag(태그) 로 둘러쌓인 언어 라고도 합니다. ★MarkDown (마크다운) 언어 마크업 언어중 하나로 간단히 생각하면 읽고 쓰기가 간편한 언어 라 보시면 됩니다. MarkDown으로 만든 파일의 확장자는 .md 입니다. 예로 들면 README.md 또는 옛날 페이스북의 @이름 ..
★참고 저는 기본 셋팅으로 이렇게 한다. 를 알려드리고 싶은거 뿐 개인적으로 설정하시는데 참고용으로 봐주시기 바랍니다. 같이 일일이 치기 싫을때, 바로가기 키로 한방에 누르면 좋지 않겠습니까!? 왼쪽 아래 '톱니바퀴' 클릭 > 바로 가기 키 > 오른쪽 위에 json 파일을 열어줍니다. 자신이 평소에 자주쓰는 행동이 있다면(ex.폴더만들기) 직접 만들어 보시면 좋을 것 같습니다. [ //시작 { "key": "ctrl+alt+left", "command": "editor.emmet.action.prevEditPoint" }, { "key": "ctrl+alt+right", "command": "editor.emmet.action.nextEditPoint" }, { //새 파일 만들기 "key": "ctrl..
★참고 저는 기본 셋팅으로 이렇게 설정한다. 를 알려드리고 싶은거 뿐 개인적으로 설정하시는데 참고용으로 봐주시기 바랍니다. 지난 번 세팅 때 요거 ↓↓↓ 설치하신분들 한해서 제가 쓰는 방법을 알려드릴게요!! 1. 로컬디스크(:C) > 사용자 > (사용자명) > .vscode > extensions > abusaidm.html-snippets-x.x.x > snippets 이동! 위에 보이는 snippets.json 파일을 vscode로 열어주세요. 비어있거나 작성된 것이 있다면 다 지워줍니다. 2. 단축키 작성 { // { } 로 시작을해서 dictionary 형태로 작성해줍니다. "지정할 단축키" : { "prefix": "지정한 단축키", "body": [ "", "", "", "", "\t", ""..
※참고 !! 제가 편하게 사용하기 위해 깔아논 것 중 뽑아서 추천해드리는 것이기 때문에 절대적으로 깔아야 되는건 아님!! 맨 아래에 글에 쓰인 확장프로그램명 이름만 따로 정리해 놨습니다. 1. Korean(사용법) Language Pack for Visual Studio code vscode를 한글버전으로 보여주는 확장프로그램입니다. 요즘에는 다 설치되서 나오기 때문에 신경안써도 되지만 혹.시 라도 언어가 영어로 되있는 분들을 위해 적어봤습니다. >> 한국어(+다른언어) 적용방법 바로가기키(=shortcut ...) 클릭 >> format 검색 >> editor.action.format 부분을 찾으시면 됩니다. 위의 사진의 단축키가 다르다면 본인이 편한대로 설정하셔도 괜찮습니다. 설치하셨다면 잘 설정 되..
★반복 학습 JS 사용시 알아야할 4가지 앞 쪽에 .(콤마) 가 없는 경우(X) 앞 쪽에 .(콤마) 가 있는 경우(O) 뒤 쪽에 () 가 없는 경우(X) 변수 속성 뒤 쪽에 () 가 있는 경우(O) 함수 메소드 jQuery란? javascript 를 쉽게 사용하게 해주는 오픈소스 기반의 라이브러리 이다. 직접 배포하는 것 아니면 주로 CDN을 사용합니다. 설치방법 1. jQuery 홈페이지에 접속한다. jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animati..
