황금빛 블로그

오늘은 vue3에서 아코디언 만들기 일단은 마지막 시간으로 vue의 내장 컴포넌트인 을 사용해서 아코디언 기능을 만들어보도록 하겠습니다.특징1이라는 내장 컴포너트를 사용하게 될 경우 Transition 컴포넌트에 기본적으로 내장된 훅을 이할 수 있어요 트렌지션이 적용된 소스를 먼저 보도록 하겠습니다. 위 코드에서 보면 트렌지션 컴포넌트에 @before-enter, @enter, @before-leave, @leave 이벤트 호출이 있는데요 이것이 바로 트렌지션의 내장 훅입니다. 이것들은 아래와 같은 이벤트를 인식합니다.@before-enter : 요소가 DOM에 들어가기 직전에 실행됨@enter : 트랜지션이 시작될 때 실행됨@before-leave : DOM에서 나가기 전에 실행됨@lea..

이전 시간에는 dom 참조 ref를 활용해서 아코디언 메뉴를 부드럽게 펼치고 닫아봤는데요 오늘은 이벤트 타겟을 활용해서 아코디언을 부드럽게 열고 닫는 기능을 적용해보겠습니다.앞에서 포스팅한 dom ref 사용한 방식과 기능 구현 방식은 거의 동일하다고 보시면 됩니다. 차이가 있다면 부드럽게 펼칠 div를 ref로 선택하는가 event.target로 선택하는가의 차이 뿐입니다. 앞시간에서 dom ref로 요소를 컨트롤 할 때는 아래와 같이 ref 변수를 선언해서 사용을 했는데요let contRefs = ref([]); event.target로 작업을 할 경우에는 ref 변수가 필요가 없습니다. 어떻게 보면 일반의 스크립트로만 작업을 하는 방식이기 때문에 오히려 제일 익숙한 방식일 수 있습니다. 전체적은 ..

DOM ref event.target오늘은 지난 시간에 이어서 vue에서 만든 아코디언 메뉴를 부드럽게 하는 방법에 대해서 알아보겠습니다.앞 시간 요약v-for 반복문으로 생성한 아코디언 컨텐츠들에 상태값(isOpen)을 독립적으로 설정해두고 개별적으로 열고 닫고 상태를 컨트롤 한다.오늘 작업 포인트1. 부드럽게 open할 요소를 ref 또는 event.target 으로 select한다.2. v-show를 사용하면 요소가 display none/block 처리되기 때문에 요소를 컨트롤 하기 전에는 반드시 요소를 display:block 처리해준다. 오늘 탭을 부드럽게 열고 닫는 기능에서는 v-show 디렉티브를 사용할건데요 간단하게 v-if와 v-show의 차이에 대해서 알고 넘어가자면v-show실제 돔..

오늘은 vue에서 아코디언 메뉴 만드는 방법을 포스팅해보도록 하겠습니다.개요반복문을 사용해 생성한 각 아코디언 탭 컨텐츠는 개별적으로 열고 닫을 수 있다. (하나의 탭을 open했을 때 나머지 탭이 닫히면 안됨)우리가 이전에 jQuery 또는 Es6 자바스크립트로 아코디언 메뉴를 만들 때에는 for문 등의 반복문을 사용하더라도 간단하게 toggle이라는 함수를 사용해서 아코디언 기능을 만들 수 있었는데요 vue나 react에서는 약간의 차이가 있습니다.예를 들어 Es6에서 아코디언 아이템들이 여러개 있다고 하더라도 별도의 준비 없이 클릭하는 아이템에 해당하는 인덱스를 활용하여 아래와 같이 토글 함수를 이용해 간단히 클릭하는 item의 index를 열고 닫고를 처리할 수 있었습니다.item.classLis..

안녕하세요 코딩하는 돌팔이 개발자입니다. 오늘은 vue.js에 대해서 간단히 소개해드리려고 합니다. 간단한 포스팅을 통해서 vue가 뭐 하는 것인지 어떤놈인지 대충 알아가셨으면 좋겠스니다. 렛츠고!?🤫프로그래밍에 관심 있으신 분들이라면 vue나 react에 대해서 들어보셨을 텐데요 이 두 도구 모두 SPA를 구현하는 기술들입니다.SPA란? SPA는 Single Page Application의 줄임말로 one페이지를 통해서 화면을 출력하는 어플리케이션을 말하는데요 즉, 단일 페이지 어플리케이션이라고 합니다. 아주 간단히 설명을 하자면, 기존의 웹사이트들은 일정 영역에 새로운 정보를 출력하거나 새로운 화면을 노출시키기 위해서 동기식으로 전체 화면을 다시 로딩(새로고침O)하는 방식이었다면 이 SPA 방식은 ..

오늘은 간단하게 티스토리 css 코드를 수정하는 방법을 알아보겠습니다. 최근에 아주 오랜만에 티스토리의 스킨을 변경하였는데요 기존에 전체 커스텀했던 스킨을 기본 스킨으로 변경을 하니까 어딘가 조금씩 심심하고 아쉬운 부분들이 보이더군요 그래서 앞으로 조금씩 스킨을 수정해보려고 하는데요 오늘은 그 첫번째로 메인 화면에서 리스트 썸네일 모서리를 부드럽게 둥글게 수정하는 방법을 알아보겠습니다.티스토리 css 수정하기아래 캡쳐 이미지를 보시면 우측의 썸네일 모서리가 직각인 것을 보실 수 있습니다. 너무 각이져있다 보니 부드러운 느낌으로 수정을 하고 싶은데요 어떤 부분의 css를 수정해야 하는지 추적해보도록 하겠습니다.수정위치 찾기먼저 크롬 브라우저를 기준으로 설명을 드리면 수정하고자 하는 요소에 마우스를 가져다 ..

오늘은 간단하게 css3의 스케일을 활용해서 마우스를 갖다 댔을 때 해당 요소가 확대되는 scale() 기능에 대해서 알아보도록 하겠습니다. 오늘 알아볼 기능은 저의 블로그 메인화면에도 적용되어 있는 기능이기도 한데요 css3를 활용하면 기존에 script를 활용해야 했던 애니메이션 기능들을 매우 간단하게 구현할 수 있습니다. 이 트랜스폼 트랜지션 속성은 처음 사용할 때에는 이해하는데 어려움이 있지만, 작동하는 최소한의 구조만 이해한다면 이후에는 어려운 부분 없이 더 많은 기능들을 사용해 볼 수 있습니다. transform이란? 스케일은 css3에서 transform 속성 중에 하나입니다. transform을 적용하면 해당 요소를 화면에서 다른 형태로 보여지게 만들 수 있습니다. transition란? ..

html 태그를 사용하다 보면 파란색 외곽선이 생기는 것을 볼 수 있다. 이는 button, a, select 등 form 요소 태그가 가지는 기본 속성이지만 경우에 따라서 이 파란색 보더를 없애고 싶을 때가 있다. 바로 없애보자. button { outline: 0; } a { outline: 0; } select { outline: 0; } /*한번에 처리*/ button, a, select { outline: 0; } 참 쉽죠? 앞으로 CSS 꿀팁은 계속됩니다.

jQuery 를 사용하면 상당히 편한 부분이 많습니다. 오늘은 동적인 element에 이벤트를 바인딩하는 방법에 대해서 알아보겠습니다. 사실 jQuery에서 동적 요소에 이벤트를 주는 것은 어렵지 않습니다. javascript를 예로 들면, 이벤트가 바인딩 되어있던 요소가 화면이 로딩 된 이후에 동적으로 추가 생성된다고 하면, elements를 추가하는 기능 이후에 또 이벤트를 바인딩해주어야 하는 번거로움이 있었습니다. 그러나 jQuery는 이러한 반복적인 코드처리를 해주지 않아도 알아서 이벤트를 붙여줍니다. 직접 코드로 보겠습니다. jquery 로 이벤트 바인딩하는게 뭐가 어렵다고 이런 포스팅을 하나 싶은 분들도 계실텐데요. 넘기지 마시고 잘 보셔야 합니다~! $('li').on('click', fun..

무려 4개월 만에 돌아온 css 강좌입니다. 날마다 오는 클라스가 아니여~ 오늘은 css 선택자 중 하나인 class 선택자에 대해서 알아보겠습니다. 이 class 선택자는 내가 지정한 class중에서 동일한 문자를 포함하고 있는 클래스들을 모두 선택해줍니다. 기본적으로 아래와 같이 요소를 선택해서 스타일을 주는데요 .name{height:100px;} 아래와 같이 중복되는 스타일을 가진 요소들이 있을 때 단순하게 아래와 같이 작업을 하는 경우가 있었을 겁니다. 1 2 3 4 5 .name1,2,3,4,5라는 요소에 height라는 공통적인 스타일이 있습니다. 저렇게 사용해도 상관은 없지만, 나중에 유지보수할 경우 똑같은 일을 5번 반복해야하는 상황도 생기고 코드가 불필요하게 길어지면서 지저분해보이기까지..