Vue 컴포넌트에서의 속성 상속과 커스터마이징 Vue에서는 컴포넌트 간 속성 상속을 통해 부모 컴포넌트에서 정의한 속성을 자식 컴포넌트에게 전달할 수 있다. 이 과정에서 몇 가지 기본 규칙과 커스터마이징 방법을 알아볼 것이다. 속성 상속의 기본 구조 속성 상속은 부모 컴포넌트에서 자식 컴포넌트로 속성을 전달하는 과정이다. 예를 들어, index.vue에서 fb-input-phone 컴포넌트로 속성을 전달하는 구조는 다음과 같다. 휴대폰 번호 input 테스트 input-phone.vue 컴포넌트에서는 $attrs 객체를 사용해 부모로부터 전달받은 모든 속성을 상속받을 수 있다. 이는 다음과 같이 구현할 수 있다. 속성 상속을 제거하고 커스터마이징 모든 속성을 상속받는 것이 아니라 일부 속성만 선택적으로 ..
Microsoft Edge 및 IE의 특별한 입력 필드 아이콘 숨기기 Microsoft Edge 및 이전 버전의 Internet Explorer 브라우저는 사용자 편의성을 위해 텍스트 및 비밀번호 입력 필드에 특별한 아이콘을 기본적으로 제공한다. 하지만 때로는 이러한 아이콘이 디자인이나 사용성 측면에서 방해가 될 수 있다. 아래에는 이 두 아이콘을 숨기는 방법이 설명되어 있다. -ms-clear 아이콘 숨기기 -ms-clear 아이콘은 텍스트 입력 필드()에 문자가 입력되었을 때 나타나며, 입력된 텍스트를 한 번에 지울 수 있는 ‘X’ 아이콘을 표시한다. 이 아이콘을 숨기려면 다음 CSS 코드를 사용한다. input::-ms-clear { display: none; } -ms-reveal 아이콘 숨기기 ..
문제 Error: EACCES: permission denied` 노드 패키지를 글로벌로 설치 할 때 권한 문제 발생 /usr/local/bin/pacakge -> /usr/local/lib/node_modules/pacakge/bin/pacakge > pacakge@4.13.0 install /usr/local/lib/node_modules/pacakge > node scripts/install.js Unable to save binary /usr/local/lib/node_modules/pacakge/vendor/linux-x64-72 : Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/pacakge/vendor' at Obj..
Traversing(순회) "순회"를 의미하는 traversing은 다른 요소와의 관계를 기반으로 HTML 요소를 찾거나 선택하는데에 사용된다. 하나의 선택으로 시작하여 원하는 요소에 도달할 때까지 해당 선택을 통해 이동한다. 아래 이미지는 HTML 페이지를 트리(DOM 트리)로 보여준다. traversing을 사용하면 선택한(현재) 요소에서 시작하여 트리에서 쉽게 위(상위), 아래(자손) 및 옆으로(형제) 이동할 수 있다. 이 이동을 DOM 트리 통과(또는 순회)라고 한다. 요소는 의 부모 이며 그 안에 있는 모든 것의 조상이다. 요소는 요소의 부모이자 의 자식이다. 왼쪽 요소는 의 부모 , 의 자식 및 의 자손이다. 요소는 왼쪽 의 자식 이며 및 의 자손이다. 두 요소는 형제다. (같은 부모를 공유함..
jQuery의 레이아웃 메소드 Layout 작업을 위한 몇 가지 중요한 메소드가 있다. width() height() innerWidth() innerHeight() outerWidth() outerHeight() width() / height() width() 메소드는 요소의 padding, border, margin를 제외한 width를 설정하거나 반환한다. height() 메소드는 요소의 padding, border, margin를 제외한 height를 설정하거나 반환한다. 지정된 요소 의 width와 height를 반환받기: $("button").click(function(){ var txt = ""; txt += "Width: " + $("#div1").width() + ""; txt += "H..
CSS 조작 jQuery에는 CSS 조작을 위한 몇 가지 방법이 있다. addClass() : 선택한 요소에 하나 이상의 클래스를 추가. removeClass() : 선택한 요소에서 하나 이상의 클래스를 제거. toggleClass() : 선택한 요소에서 클래스 추가/제거 간을 전환. css() : 스타일 속성을 설정하거나 반환. addClass() 다른 요소에 클래스 속성을 추가한다. 물론 클래스를 추가할 때 여러 요소를 선택할 수 있다. $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); addClass()메소드 내에서 여러 클래스를 지정할 수도 있다. $("button").c..
새 HTML 콘텐츠 추가 새 콘텐츠를 추가하는 데 사용되는 네 가지 jQuery 메소드는 아래와 같다. append() : 선택한 요소의 끝에 내용 삽입 prepend() : 선택한 요소의 시작 부분에 콘텐츠 삽입 after() : 선택한 요소 뒤에 내용 삽입 before() : 선택한 요소 앞에 콘텐츠 삽입 append() / prepend() append()메소드는 선택한 HTML 요소의 끝에 콘텐츠를 삽입한다. prepend()메소드는 선택한 HTML 요소의 처음에 콘텐츠를 삽입한다. $("p").append("Some appended text."); $("p").prepend("Some prepended text."); append() 및 prepend()를 사용하여 여러 새 요소 추가 appen..
jQuery의 매우 중요한 부분 중 하나는 DOM을 조작할 수 있는 가능성이다. jQuery에는 요소와 속성에 쉽게 액세스하고 조작할 수 있는 DOM 관련 메서드가 함께 제공된다. 콘텐츠 가져오기 - text(), html(), val() DOM 조작을 위한 간단하지만 유용한 세 가지 jQuery 메서드는 아래와 같다. text() : 선택한 요소의 텍스트 내용을 설정하거나 반환. html() : 선택한 요소의 내용을 설정하거나 반환(HTML 마크업 포함). val() : 양식 필드의 값을 설정하거나 반환. text() ,html()메소드를 사용하여 콘텐츠를 가져오기 : $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#b..
jQuery의 다양한 Effect hide() 와 show() hide() 와 show() 메소드를 사용하면 HTML 요소를 숨기거나 표시할 수 있다. $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 문법 $(selector).hide(speed,callback); $(selector).show(speed,callback); speed 매개변수는 hide/show 속도를 지정하며 “slow”, "fast" 또는 밀리초 값을 사용할 수 있다. callback 매개변수는 또는 메소드가 완료된 후 실행되는 함수다. 속도 매개변수를 사용하여 hide()사용하기: $("button").cli..
DOM 이벤트 웹 페이지가 응답할 수 있는 모든 방문자의 행동을 이벤트라고 한다. 이벤트는 어떤 일이 발생하는 정확한 순간을 나타낸다. 예: 요소 위로 마우스 이동 라디오 버튼 선택 요소 클릭 "fires/fired" 라는 용어는 종종 이벤트와 함께 사용된다. 예: "키를 누르는 순간 키 누르기 이벤트가 발생한다." 몇 가지의 일반적인 DOM 이벤트 Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 이벤트 메소드 문법 jQuery에서 대부분의 D..
