IT_susu

옵션 값을 합치기 위해 extend 메소드를 사용해 봅시다. $.extend(target[,object1][,objectN])target : 합쳐지는 추가 객체의 속성을 받을 객체.object1 : 합쳐질 때 기준이 될 객체. 즉, 기본옵션objectN : 기준 객체에 합쳐질 추가 객체 즉, 사용자지정옵션 사용 예options = $.extend(default_options, options)

1. Active File in StatusBarvscode 아래쪽에 파일의 경로를 알려줌. 2. Auto Close Tag자동으로 닫힘 태그를 생성해 줌. 3. Auto Rename Tag이름을 바꾸면 닫히는 태그까지 같이 자동으로 바꿔줌 4. Document Thisctrl + alt + d 를 누르면 그 문서가 어디있는지 보여줌 5. Git History(git log)깃 연결할 때 로그 저장 6. HTML Snippets내가 저장해 놓았던 코드 양식을 불러옴 7. HTMLHinthtml 오류 잡아주기 8. JavaScript Snippet Packjavascript 자주쓰는 문법 단축키 9. jshintjs 오류 잡아주기 10. Live HTML Previewersidebar에서 실시간 html ..

크로스는 교차하여 서로 다른 것을 잇는다라는 의미로 생각하시면 됩니다. 크로스브라우징이 생겨난 배경은 브라우저마다 서로 다르게 코드를 읽어서, 개발자들이 개발하는데 많은 어려움을 겪었습니다.브라우저의 종류는 매우 다양한데, 그 모든 것을 맞춰서 코딩해 줄 수가 없고 비생산적으로 개발 시간이 너무나 늘어나기 때문입니다.따라서, 이 문제를 해결하고자 표준이 나왔으며, 지금은 브라우저들도 웹표준을 반영하고 있습니다.그러나 여전히 서로 다른 부분들이 존재하기 때문에 이를 고려하여 코딩해야 하는 이슈를 크로스브라우징 이슈라고 합니다. 크로스플랫폼은 크로스 브라우징처럼 이제 플랫폼이 서로 다르다는 의미입니다. 마찬가지 배경적인 이유로 인해노트북, 모바일폰, 티비, 시계, 태블릿 등 다양한 기기에도 적절한 디자인과 ..

html은 문서의 뼈대. 내용물을 담당하고,css는 이 내용물들을 보기 좋게 다듬는 디자인을 담당하고,js는 이 내용물들의 이용과 관련한 처리를 담당한다. 쉽게 집으로 비교해서html은 집의 뼈대 철근 같은 것을 의미하고css는 벽지라던지 방의 모양 같이 디자인을 의미하고js는 전기스위치를 누르면 전기가 켜지고 문을 잠구는 기능 등을 의미한다.

웹프론트엔드를 이해하기 위해서, 웹과, 프론트엔드를 먼저 알아야 합니다. 웹은 인터넷을 활용한다는 의미.프론트엔드는 유저와 직접적으로 상호작용하는 부분.백엔드는 유저와 직접 상호작용하지 않고 내부적으로 작용하는 부분. 따라서 웹프론트엔드란,인터넷 환경에서 유저와 직접적으로 상호작용하는 부분을 다루는 분야입니다. --------------------------------------------------------------------------------------- + 2018.10.17 추가 브라우저 환경에서 UI를 구성하는 부분을 담당하는 것이 웹프론트엔드개발입니다. UI를 구성하는 방법이 크게 2가지로 나뉘는데 첫 째는, 데이터를 다루는 부분을 백엔드 기반 언어로 하여 서버 단에서 다 처리하도록 구..

이벤트를 짤 때, 이벤트핸들러에 함수명을 적어도 동작합니다.$(document).on('keydown', keyboardInput);위의 예에서 keyboardInput은 다른 곳에 정의되어 있는 함수이죠.위와 같이 코드를 작성하면 jquery에서 이미 이벤트핸들러 함수인 keyboardInput을 호출하는 코드가 이미 적혀있는 것입니다. 또한 keyboardInput 함수에서 파라미터로 받을 수 있는 것이 이벤트 객체입니다.// 이벤트 객체를 사용할 경우 function keyboardInput(e) { console.log(e); }여기서는 e가 이벤트 객체를 받는 파라미터가 되는 것입니다.위 코드를 치고 실행하면 콘솔에서 이벤트객체를 확인할 수 있습니다.

없는 요소를 해당 메소드들에게 넣으면 추가가 되고,있는 기존 요소를 선택하여 메소드에게 넣으면 이동이 된다.삭제는 $('#cleaning').remove(); 1. 해당요소 앞에 추가하기 : before()$('ul li:first-child').before('어떤 요소'); //추가$('ul').before($('#cleaning')); // 이동 2. 해당요소 뒤에 추가하기 : after()$('ul li:first-child').after('어떤 요소'); 3. 해당요소의 자식들 중 맨 마지막에 추가하기 : append()$('ul').append('어떤 요소'); 4. 해댱요소의 자식들 중 맨 앞에 추가하기 : prepend()$('ul').prepend('어떤 요소');

키를 누르면 --> keydown 키 값이 무엇인지 알아내려면 이벤트 객체의 key값의 value를 보면 된다.확인방법)코드를 아래와 같이 작성한 후,$(document).on('keydown', function(event){console.log(event);}); 브라우저의 콘솔 창을 켜 놓고 아무 키나 누르면 event 객체가 뜬다.화살표를 눌러 상세 내용을 보면 'key'라고 쓰여진 키의 값을 확인하면 된다. * 키보드를 누르는 이벤트 작성$(document).on('keydown', function(event){if ( event['key'] === 1 ) {console.log('1번 키를 누르셨습니다.');}});

이벤트는 비일상적인 사건이며, 언제 발생할 지 사전에 예측할 수 없으므로 일반적인 제어흐름과 다르다. 예측 대신 발생하면 감지하여 그에 대응하는 처리를 호출하는 원리로 동작한다. 예) 키보드 esc를 누르면 팝업창이 닫힌다. 파란색 부분이 이벤트 분홍색 부분이 이벤트 핸들링이다. 어떠한 일이 발생하는 것이 이벤트이며, 이벤트가 발생할 때, 어떤 처리를 할 것인지를 명시한 부분이 이벤트 핸들링이다. 코드로 보면, $('.btn_popup').on('click', function(){}); document.getElementById('home').addEventListener('click', function(){}); 이벤트가 실행되는 원리 자바스크립트는 단일 쓰레드이기 때문에 동시에 여러 작업을 할 수 없..

글자 및 inline요소는 우리가 생각하는 높이와 다르게 동작한다.따라서 속성명도 height이 아니라 line-height이다. 1. 타이포그래피 이론 2. 글자크기의 높이 설정하기라인의 높이, line-height는 위의 그림과 같이 영역을 차지한다. 즉, font-size + leading영역의 합이다.leading영역을 없애고 싶다면 line-height: 1;font 자체에 지정되어있는 여백을 없애는 기능은 없으며, 억지로 line-height을 1보다 적은 수로 줘서 눈대중으로 맞출 수는 있다.단, font-family가 달라지면 바뀐 폰트의 여백은 또 다르게 설정되어 있을 것이므로 line-height를 다시 맞춰야 한다. 3. inline요소의 높이 설정하기2번 주제와 같이 여백 하나 없이..