CATEGORIES
오늘 알아볼 내용은 입력폼 중 하나인 input 태그가 체크박스 또는 라디오 타입으로 어떤 값을 가지고 있을때 이를 체크하였는지 확인할 수 있는 다양한 방법에 대하여 알아보고자 한다. 방문자가 이를 클릭했을경우 이를 불러오기 위한 방법은 어떤 것이 있을까?우선 순수 자바스크립트의 방법을 알아보고 제이쿼리를 활용했을때의 방법도 알아볼 것이다. 먼저 자바스크립트를 사용한 방법을 예제와 함께 자세하게 알아보자.빨간 라인이 방문자가 클릭가능한 라디오 버튼이다.아래 방법은 순수 자바스크립트 방법을 사용한 방법이다. 사실 최근에는 제이쿼리나 기타 라이브러리를 활용하기 때문에 이 코드는 많이 사용되지 않을 수 있다. 하지만 가장 기본이 되는 방법으로 알아야 할 필요가 있을 것이다.그럼 아래 예제를 통해 자세히 알아보자.
Last Modified : 2018-07-25 10:57:59
자바스크립트를 사용하여 이벤트를 구현할 때 이벤트 캡처링과 이벤트 버블링이 등장합니다. 아래에서는 이벤트 버블링(Event Bubbling)이 무엇이고 관련된 이슈가 왜 발생하는지 ~ 또 어떻게 해결하는지 알아보겠습니다. 먼저 이벤트 버블링이 무엇인지 알아봅니다.이벤트 버블링이란이벤트 버블링은 선택한 엘리먼트가 부모 요소를 가지는 경우에 발생한다. 모든 요소들은 body부터 하위 자식 요소들까지 계층 구조를 가지고 있습니다. 예를들어 만약 부모 요소 안에 있는 어떤 엘리먼트를 클릭한다고 생각해봅니다. 이때 해당 엘리먼트를 포함하는 부모 요소를 클릭하지 않을 수 있을까요? 내부에 존재하기 때문에 당연히 어렵겠죠. 실제로는 아래와 같이 dep1, dep2를 지나야 dep3를 클릭할 수 있습니다.그림) html
Last Modified : 2021-07-13 13:32:47제이쿼리를 사용하여 태그 이름을 가져오는 방법을 알아봅니다. 어떻게하면 태그명을 쉽게 가져올 수 있을까요? 아래에서 알아보세요!# 제이쿼리 태그명 가져오기현재 제이쿼리에서 태그명만 가져오는 메소드는 없습니다. 다만 prop() 메소드를 사용하면 태그명을 알 수 있는 방법이 있죠.$(엘리먼트).props('tagName')props() 메소드는 태그 요소의 어트로뷰티 값을 얻기 위해서 많이 쓰이지만 이와 같이 태그 이름을 얻을 수도 있습니다. 그럼 아래의 간단한 예제를 봐주세요.! 제이쿼리 태그명 가져오기 예제보기, props()간단한 예제를 만들어봅니다. strong 태그 요소를 props() 메소드를 사용해 태그 이름을 얻어보려고 합니다.@ prop_tag.html<strong id="ele">Tag na
Last Modified : 2020-08-05 22:30:30자바스크립트 객체가 가진 값, 프로퍼티 및 메소드를 제거하는 방법입니다.객체의 프로퍼티, 메소드를 제거하는 방법으로 delete 키워드를 사용합니다. delete를 사용하면 선택한 프로퍼티 또는 메소드를 쉽게 제거할 수 있습니다. 그럼 아래 예제를 봐주세요.# 객체 프로퍼티, 메소드 삭제하는 방법아래의 obj라는 객체가 존재하는 경우 속성값 no를 제거하려합니다.obj = { no: 1, name: 'webisfree'}만약 no를 제거할 경우 아래와 같이 수행합니다.delete obj[no];delete obj.no;위 두 가지 모두 객체의 프로퍼티중에서 no를 제거합니다.! 객체가 상속받은 경우만약 해당 객체가 상속받은 경우라면 원래의 객체의 프로퍼티, 메소드는 그대로 존재하게 됩니다. 이를 함께 제
Last Modified : 2017-08-29 07:09:29
css를 사용하여 웹브라우저의 텍스트를 드래그하거나 더블 클릭하여 선택할 수 있습니다. 만약 텍스트 선택을 막거나 더블 클릭 등을 바꾸려면 어떻게 할 수 있는지 알아봅니다.# CSS user-select 프로퍼티 알아보기브라우저에서 드래그나 더블 클릭을 사용한 텍스트 선택 등을 막으려면 몇 가지 방법이 있습니다. 자바스크립트를 사용 할 수 있고 CSS에서도 제공하는 user-select를 사용할 수 있습니다. user-select 사용방법은 아래와 같습니다.user-select: auto | all | none | text;user-select는 이처럼 몇 가지 값을 선택할 수 있으며 기본값은 auto입니다. 각각의 옵션 기능을 알아보겠습니다.auto : Default값으로 브라우저 허용시 텍스트 선택 가능
Last Modified : 2019-12-05 20:56:00
VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 서로 주고 받는 양방향 바인딩(Two way binding) 방법에 대하여 알아봅니다.먼저 컴포넌트 사이의 데이터를 주고 받는 방법은 여러가지가 있습니다. 전역 데이터를 사용하거나, 이벤트버스(EventBus), Vuex 아니면 Props를 사용할 수도 있죠. 여기서 Props를 사용하는 방법이 많이 사용되는데요 ~! Props를 사용한 컴포넌트간의 데이터 전송방법부모, 자식 컴포넌트 사이에 Props를 사용하면 부모에서 자식으로 데이터를 전송할 수 있지만 반대로 자식에서 부모로 전달할 수 없는 문제가 생깁니다. 그럼 어떻게하면 해결할 수 있는지 아래에서 알아봅니다.(참고사항. Vue 2 이전에는 props를 사용하여 동일한 스코프 모델명을 사용하면 서로
Last Modified : 2019-08-06 00:08:34자바스크립트 event.stopPropagation() 사용하는 방법은?# event.stopPropagation() 사용하기자바스크립트에서 stopPropagation() 메서드는 event 객체의 버블링을 제거해줍니다. event.defaultPrevent()와 함께 매우 자주 사용되는 중요한 메서드입니다.여기서 event 버블링이란 이벤트가 연속하여 발생하는 버블 현상을 의미합니다. 이벤트는 이벤트캡쳐링과 이벤트버블링으로 나타나는데 클릭이 발생한 경우를 예로들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상을 의미합니다.이 경우 의도하지 않은 두 번째 이벤트가 추가로 발생하여 오류가 발생할 수 있습니다. 이를 피하기 위
Last Modified : 2017-05-19 20:13:23
다양한 언어를 제공하기 위한 방법으로 html에서 lang 어트리뷰트를 태그에 사용할 수 있습니다. 동시에 css의 lang 프로퍼티를 사용할 수 있죠. css의 프로퍼티와 html어트리뷰트를 같이 다룬 이유는 둘 다 함께 사용할 수 있기 때문입니다. 왜 그런지도 아래에서 함께 자세히 알아봅니다. # HTML lang attribute먼저 lang 어트리뷰트를 알아봅니다. 태그에 lang을 사용하면 웹에서 보여질 컨텐츠가 어떤 언어인지 알려주게됩니다. 이때 선택할 언어 코드를 값으로 사용합니다. 간단한 문법은 아래와 같습니다.<html lang="ko"> 매우 자주 볼 수 있는 코드로 여기서 ko는 korean인 한국어를 의미합니다. 위와같이 주로 태그의 제일 상위의 html 태그에 사용하였지만 어떤 태그에
Last Modified : 2019-08-06 22:00:02
자바스크립트의 객체의 프로퍼티 이름을 변경하는 방법을 알아봅니다.! 객체 내부의 프로퍼티 이름 변경하기, change property name가장 간단한 방법은 새롭게 만들고 기존 값을 삭제하는 방법입니다. 순서는 아래와 같습니다.1. 변경 할 프로퍼티가 객체에 존재하는지 확인하기2. 존재하는 경우 변경할 프로퍼티를 새로 생성 후 변경 전 프로퍼티 값을 선언3. 기존의 프로퍼티를 delete()를 사용하여 삭제만약 아래와 같이 객체 obj 내부에 프로퍼티(property) siteNames를 siteUrl로 변경하려면?obj = { siteNames: 'webisfree.com'}아래와 같이 수행합니다.if (obj.hasOwnProperty('siteNames')) { obj.siteUrl= obj.s
Last Modified : 2020-09-09 09:00:22react native에서 부모 컴포넌트의 값인 변수, 함수 또는 state를 자식 컴포넌트가 사용하는 방법에 대하여 알아봅니다.# react native 부모의 값 자식 컴포넌트 사용먼저 부모가 가진 값을 자식 컴포넌트가 사용하는 방법으로 props를 이용할 수 있습니다. props를 사용하여 변수나 함수를 전달할 수 있으며 이때 사용 방법은 아래와 같습니다.// app.jsimport Test from './test.js'export default Main extends React.component { render() { return ( <View> <Test sitename="'Webisfree'"></Test> </View> ) }}Main 컴포넌트는 부모
Last Modified : 2018-08-21 20:15:38객체의 프로퍼티 값을 if문을 사용하여 비교하는 방법에 대하여 알아보겠습니다.먼저 객체는 프로퍼티와 메소드를 가지고 있습니다. 프로퍼티의 값에 if문을 사용하여 비교하거나 검증할 때 주의할 점이 있는데 그것은 객체가 존재하는지를 미리 확인할 필요가 있다는 점입니다.어떤 상황에서는 빈 객체가 아닌 선언되지 않은 객체가 비교대상일수도 있고 이런 경우 undefined 에러가 나타납니다. 이런 에러를 발생하지 않는 방법이 추가로 필요합니다.# 객체 프로퍼티에 if문을 사용하여 비교하는 예제보기먼저 아래와같은 예제가 있습니다. site라는 객체가 없는 경우 아래 코드를 실행하면 없는 객체 name의 프로퍼티에 if문을 적용하므로 에러가 나타납니다. if (site.name === 'webisfree') { con
Last Modified : 2017-09-29 01:44:26VueJS에서 props로 콜론이 사용된 경우를 쉽게 볼 수 있습니다. 이때 콜론이 단독으로 사용된 경우도 볼 수 있는데 아래처럼 말이죠.여기서의 : 기호는 short-hand인 단축 키워드로 사용되었으며 이처럼 v-bind: 대신에 :을 사용할 수 있습니다. 아래의 예제코드를 보세요.<myComponent v-bind:do-something="..." /><myComponent :do-something="..." />위 두 컴포넌트에 사용된 prop 모두 동일합니다. 둘 다 do-something의 prop에 특정한 값을 전달하고 있습니다.: 콜론 기호를 사용하는 것과의 차이점은 문자열로 볼 것인지... 아니면 VueJS에서 사용되는 자바스크립트로 인식될 것인지의 차이입니다. 만약 :이 사용된 props
Last Modified : 2018-09-28 08:11:31자바스크립트에서 객체의 프로퍼티 값을 비교할때 가장 효과적인 방법은 무엇일까요?# 자바스크립트 객체의 프로퍼티 값 비교 방법자바스크립트에서 객체의 프로퍼티 값을 비교할때 주의할 부분이 있습니다. 객체의 존재 여부와 프로퍼티 또는 메소드가 존재하느냐 .. 그리고 타입은 일치하느냐입니다. 다시 말하면 아래를 확인해야합니다. 객체의 존재여부 체크비교 할 프로퍼티 및 메소드 체크타입의 일치 여부이때 객체 및 프로퍼티, 메소드 등이 존재하지 않는 undefined라면 코드의 실행과정에서 에러가 발생할 수 있습니다. 이에 대한 예외처리를 할 수 있으나 에러가 End 유저에게 발생하지 않도록 하려면 이를 확인 비교하는 검증과정이 필요합니다.아래는 타입 에러를 고려하지 않을 경우의 코드값입니다. 넘겨줄 파라미터의 값이 항
Last Modified : 2019-08-12 21:55:35
css 프로퍼티인 pointer-events에 대하여 알아봅니다. 어떻게 사용하고 언제 사용할까요?# CSS Property pointer-eventscss를 사용하여 클릭이벤트를 제어할 수 있을까요? 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events입니다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다. 아래는 간단한 사용 방법입니다..prevent-click { pointer-events: none; }이 속성은 CSS3의 프로퍼티로 선택 가능한 옵션은 아래와 같이 세 가지가 있습니다.none // 클릭 이벤트를 적용하지 않음auto // 브라우저 자동으로 선택함inherit // 상속 되어짐참고로 만약 none의 값을 사용할 경
Last Modified : 2019-08-06 21:59:57