몽땅뚝딱 개발자

소개순서 (1) 개념 및 기본 선택자 (2) 문서 객체 조작(DOM Control) (3) 이벤트(Event) 👉🏻 (4) 효과(Effects) ◽ 효과(Effect)의 기본형태 모든 효과는 속도, 콜백함수를 지정할 수 있으며 생략할 수도 있다. $('선택요소').이벤트함수('속도', 콜백함수) 💡 Tip 속도: slow, normal, fast 또는 사용자 지정 숫자 ◽ 효과(Effects) 종류 효과 설명 $('선택요소').hide() 선택 요소 숨김 $('선택요소').show() 선택 요소 노출 $('선택요소').toggle() show(), hide() 반복 // 버튼을 클릭할 때 마다 태그가 사라지고 나타나는 것이 반복됨. $("button").click(function(){ $("p").tog..

소개순서 (1) 개념 및 기본 선택자 (2) 문서 객체 조작(DOM Control) 👉🏻 (3) 이벤트(Event) (4) 효과(Effects) ◽ 이벤트(Event) 정의 웹 브라우저 내에서 벌어지는 버튼 클릭이나 마우스의 움직임등의 모든 행위를 '이벤트'라고 한다. ◽ 이벤트(Event) 종류 이벤트 설명 click() 선택 요소를 클릭했을 때 발생 dbclick() 이벤트 대상을 더블클릭했을 때 발생 mouseover() 마우스를 올려놓았을 때 발생 mouseout() 마우스가 벗어났을 때 발생 pocus() 대상에 포커스가 생겼을 때 발생 blur() 대상이 포커스를 잃었을 때 발생 focusin() 대상에 포함된 input 요소에 포커스가 있을 때 발생 focusout() 대상에 포함된 inpu..

이전 필드에서 reset.css를 본 적이 있는데, 파일을 열어보지도 않고 'reset 기능과 관련된 css인가...?' 생각했었다. 나중에 퍼블리셔분이 필요한 파일이라고 말씀하시기에 배포할 때 빼먹지않는 정도로만 인지했었는데.. 만약 이 css가 왜 필요했는지 그 때 찾아보고 알았더라면 토이프로젝트를 할 때 css 관련하여 고생이 덜 했을거라는 생각이 든다. reset.css는 브라우저마다 기본스타일이 다르기때문에 브라우저끼리 동일한 스타일을 주기 위해 css를 초기화하는 환경설정용 css라고 한다. 브라우저마다 여백도 다르고 초기값도 달라서 항상 불편하다는 생각만 했지 방법을 찾을 생각을 못 한 나 자신... 반성 중..🙃 작성한 곳 마다 다르게 작성되어 있고 정해진 표준은 없는 것 같다. 적절히 원..

◽ 문서 객체 조작(DOM Control) 1) 탐색 선택자: 정확한 요소를 선택하는 방법 선택자 설명 $("ul li:odd") 의 요소 중 홀수 인덱스 요소만 선택 $("ul li:even") 의 요소 중 짝수 인덱스 요소만 선택 $("ul li:first") 의 요소 중 첫번째 요소 선택 $("ul li:last") 의 요소 중 마지막 요소 선택 $("ul li:eq(1)"), $("ul li").eq(1) 의 요소 중 두번째 요소만 선택 $("ul li:it(2)") 의 요소 중 세번째 이전 요소만 선택 $("ul li:gt(2)") 의 요소 중 세번째 이후 요소만 선택 $("ul li:nth-child(2n)") 의 요소 중 2의 배수 번째 요소만 선택 $("ul li:contains('문자')..

👉🏻 (1) 개념 및 기본 선택자 (2) 문서 객체 조작(DOM Control) (3) 이벤트(Event) (4) 효과(Effects) ◽ 제이쿼리란? 자바스크립트의 가장 대표적인 라이브러리 언어이다. 다양한 애니메이션 효과의 구현을 위한 기능적인 함수들이 많이 추가되어 있다. ◽ 실행함수 작성 제이쿼리는 보다 위에서 import(삽입)되기 때문에 문서의 모든 요소들이 로딩된 이후에 요소 선택자를 사용할 수 있다. 따라서 먼저 실행함수를 작성하여야 한다. // 기본 문법 $(document).ready(function() { ...실행문 }); // 간단하게 줄여쓸 수 있다. $(function() { ...실행문 }); ◽ 기본 선택자 및 속성(Selector & Attribute) 선택자 설명 $("..

◽ 다단 편집(Multiple Colume)이란? float이나 position을 사용하지 않고도 다단을 편집할 수 있다. ◽ 종류 colume-count: 3; // 박스의 내용을 3단로 colume-gap: 20px; // 각 단 사이의 간격 설정 colume-rule: 2px dotted brown; // 단 사이의 구분선과 타입 설정 출처 김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ background-origin 배경 이미지의 한계를 정하는 것이다. background-origin: border-box; // 박스의 테두리를 포함한 부분까지 background-origin: padding-box; // 박스의 안 여백을 포함한 부분까지 background-origin: content-box; // 박스의 안 여백을 제외한 부분까지 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ background-size background-size: 80px 60px; // 가로 크기 80px, 세로 크기 60px background-size: 80px; // 가로 크기와 세로 크키 모두 150px background-size: container; // 박스의 세로 크기에 맞춤 background-size: cover; // 박스의 가로 크기에 맞춤 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

cli2랑 cli3의 설정이 이렇게 다를 수가 있을까..? 문법 하나 테스트해본다고 프로젝트 생성하는데 cli3로 시작하니 많은 문제에 직면하였다. 다음엔 실수가 없도록 문제가 되었던 main.js와 router.js를 이 곳에 기록한다....😑 📄 main.js import { createApp } from 'vue'; import App from "./App.vue"; import router from "./router/index.js"; createApp(App).use(router).mount('#app') 📄 router.js import { createRouter, createWebHistory } from "vue-router"; const routes = [ { path: "/", name..

◽ 경로 설정하기 아래와 같이 설정하여 파일 import 시 @로 쉽게 경로를 찾을 수 있다. // jsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "~/*": [ "./*" ], "@/*": [ "./src/*" ], } }, "exclude": [ "node_modules", "dist" ] } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.