1. css 속성 2. 제이쿼리 전용 메소드 //(단위를 생략한)숫자형으로 반환한다.(단위는 px 기본값) console.log('width()', $('#box').width()); console.log('height()', $('#box').height()); $('#box').height(300); padding 을 더한 것이 실제 태그의 영역이라서 innerWidth로 제공한다. width/height + padding > 사각형 내부 크기 console.log('innerWidth()', $('#box').innerWidth()); //260 console.log('innerHeight()', $('#box').innerHeight()); //260 시각적으로 보이는 상자의 크기를 표현할 때 w..
읽기 1. obj.css('attr') 쓰기 2. obj.css('attr', 'value') 3. obj.css('attr', 'value') .css('attr', 'value') .css('attr', 'value') 4. obj.css({ attr: value, attr: value, attr: value }) 5. obj.addClass('class') 지우기 1. css(속성) : 읽기 2. css(속성, 값) : 쓰기 하나로 통일하여 인자값으로 읽기, 쓰기를 적용한다. 코드 양이 적어 생산성이 높다. 읽기 //자바스크립트로 css 조작할 때 inline style sheet를 사용했다. // alert(document.getElementById('box').style.color); // al..
1. 포트폴리오용 레포지토리 생성한다. 2. github push 웹 페이지를 구현한 코드를 github에 올린다. git clone 레포지토리 주소 . git add . git commit -m 'init' git push origin main github에 잘 올라갔는지 확인한다. 3. Settings - Pages 접속 4. Branch 변경 기존 none에서 main으로 변경한다. 5. 서비스 페이지 완성 https://heosukyeong.github.io/portpolio/ 주소는 https://(깃허브 name).github.io/(레포지토리 이름)/ 으로 생성된다. 주의 코드 수정 후 페이지 반영에 속도가 느리다. 코드를 다 완성 후 커밋하는 것이 좋다. +) 디자인 - 템플릿 사용하기 디..
포트폴리오 작성 단계 1. 정보 수집 포트폴리오의 어떤 내용을 채울지 나의 이력을 수집한다. 2. 페이지 구성 스크롤이 긴 한 페이지로 할지 링크로 여러 페이지 조회가 가능한 사이트로 만들지 생각한다. 3. 레이아웃(화면 설계) 요소 배치와 구성을 구상한다. 본인이 직접 구상해도 좋고 템플릿을 사용하여도 좋다. 4. 구현 HTML + CSS +JavaScript 구현 5. 웹서비스 다른 사람이 조회가능하도록 웹서비스로 등록하는 방법은 웹호스팅, 노션, Github Pages 등이 있다. 1) 웹 호스팅 24시간 동작 가능하도록 서버를 구동해야 한다. 무료 웹 호스팅 닷홈 호스팅 3개월마다 이메일 인증을 해야하는 단점이 있다. https://www.dothome.co.kr/ 닷홈 호스팅 닷홈은 도메인, 무..
🔻Effect 웹 페이지에서 요소의 화면 표시를 동적으로 변경하는 동적 효과를 제공하는 기능이다. 이를 통해 페이지에 동적이고 매끄러운 애니메이션 효과를 추가할 수 있다. 기본 뼈대 jQuery Effect 상자 🔻Effect 종류 1. hide(time), show(time), toggle(time) hide : 숨기기 show : 보이기 toggle : 숨기기/보이기 time : 밀리세컨드 기준이다. 'fast', 'slow' 키워드로 속도 지정이 가능하다. 2. fadeOut(time), fadeIn(time), fadeToggle(time) fadeOut(time) : 서서히 나타나게 한다. fadeIn(time) : 서서히 사라지게 한다. fadeToggle(time) : 나타나 있으면 사라지게..
기본 뼈대 jQuery Event 🔻BOM, DOM 이벤트 등록 방법 BOM btn.onclick = function() {} DOM btn.addEventListener('click', function() {}); 🔻jQuery 이벤트 함수 1. 전용 이벤트 함수 객체.이벤트함수(콜백함수) $('#btn1').click(function() { alert('btn1'); }); 2. 범용 이벤트 함수 객체.on(이벤트명, 콜백함수) $('#btn2').on('click', function() { alert('btn2'); }); 다양한 이벤트를 on 으로 접근한다. 이벤트함수는 BOM, DOM에서 사용하는 것과 같다. 3. 이벤트 제거 전용 함수, 범용 함수의 이벤트를 제거한다. $('#btn2').of..
🔻jQuery() 함수 jQuery 라이브러리의 핵심이며, HTML 문서 내에서 요소를 선택하고 조작하기 위한 강력한 도구이다. 이 함수를 사용하여 CSS 선택자를 이용해 HTML 요소를 찾고, 해당 요소에 대해 다양한 작업을 수행한다. 🔻jQuery() 함수 특징 1. CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다. 2. 반환값에 무언가를 적용하면 항상 자동으로 루프가 동작되어 각 요소마다 적용된다. 3. 자바스크립트 객체와 jQuery 객체는 서로 형변환할 수 있다. 기본 뼈대 jQuery 함수 상자1 상자2 상자3 상자4 상자5 1. CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다. jQuery('CSS 선택자').css() 로 접근한다. 2. 반환값에 무언가를 적용하면 항상 자..
template를 사용하면 코드 작성 시간을 줄일 수 있다. 🔻만드는 순서 1. 원하는 스타일의 코드 작성 본인의 원하는 스타일로 파일을 하나 작성한다. 설정 - 사용자 코드 조각 HTML 검색 파일 내에 추가 작성 "Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } 추가 완료된 전체 코드 { // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is wh..
🔻jQuery 란 자바스크립트 코드를 간결하게 작성하고, 크로스 브라우징 문제를 해결하며, 다양한 기능을 쉽게 사용할 수 있게 해주는 라이브러리이다. 자바의 .jar 파일 여러개 모아놓은 것이라 생각하면된다. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and ex..
🔻화살표 함수, Arrow Function 자바의 람다와 비슷한 개념이다. 자바의 람다는 익명 객체의 추상 메소드를 표현하는 기술이었지만, 자바스크립트의 화살표 함수는 익명 함수를 표현하는 기술이다. 기본 구문 const add = (a, b) => a + b; 함수 선언 방법 1. 함수 선언문 function f1() { console.log('f1'); } f1(); 2. 함수 표현식 (리터럴) == 익명함수 const f2 = function () { console.log('f2'); } f2(); 익명이므로 그냥 호출할 수가 없어 변수에 저장하여 호출한다. 변수에 저장하지않고 호출하는 방법인 즉시호출이 있다. 즉시호출 전체를 묶고 호출한다. (function() { console.log('f2_1..
