Frontend12 [javaScript/jQuery/Vue.js]버튼 클릭 시 요소 숨기기/보이기 오랜만에 버튼 클릭 시 HTML요소를 숨겼다 나타냈다를 반복하는 스크립트를 작성하게 되었다. 프레임워크 덕분에 간단하게 만들었지만 예전에 jQuery를 사용해 비슷한 화면을 제작했던 것이 생각나 gitHub를 뒤져 옛날 프로젝트를 찾아냈다. 처음으로 이 코드를 썼을 때는 요소가 사라졌다가 뿅하고 다시 나타나는게 재밌어서 몇번이나 클릭했던 기억이 있다. 정리해 두고 다음에 참고하면 좋을 것 같다. jQuery를 이용한 onClick시 요소 숨기기/나타내기 기록하기 숨겼다 나타내는 부분 왼쪽의 버튼을 클릭하면 독서록을 기록할 수 있는 폼이 나타났다가 다시 버튼을 클릭하면 폼이 사라지는 형식의 페이지이다. Vue.js onClick시 요소 숨기기/나타내기 이번에는 Vue.js프레임워크를 이용해 변수를 선언 한.. 2023. 10. 30. [CSS] 채팅에 사용할 말풍선 만들기 백개발이 끝나 즐거운 UI시간을 보냈다. 우선 완성본이다. 채팅에는 이 외에도 전송영역, 첨부파일영역 등 다양한 영역이 존재하지만 이번에는 대화영역을 올려서 다음개발 때도 사용하고자 한다. *front는 Vue.js, Quasar 프레임워크를 사용하고 있다. 우선 HTML소스이다. Quasar 프레임워크를 사용하고 있지만 Quasar컴포넌트를 사용하면 css를 고치는데 제약이 좀 있어서 이번에는 Editor만 Quasar컴포넌트를 사용하고 나머지는 div로 만들었다. HTML코드에서 신경써줘야 할 점은 바로 자기자신의 말풍선 class 와 다른사람의 말풍선 class를 구분하는 조건을 적어줘야 한다는 것이다. 나는 Vue.js를 사용하고 있기 때문에 class에 조건을 걸어 바인딩해주었다. 다른 툴을 사.. 2023. 10. 28. [CSS] hr 태그 색상 변경하기/ HTML 선 색상 변경하기 만드는 화면 특성상 border를 자주 이용하는데 가끔 태그를 사용할 때가 있다. 간단한데 자주 사용하지 않으니 사용할 때 마다 검색하는 일이 잦아서 기록해두려고 한다. hr 태그 색상 변경하기 hr 태그를 사용할 때는 원하는 색상을 background에 입력하고 꼭 height와 border:0 을 함께 입력해주어야한다. 입력하지 않으면 색상이 변경되지 않는다. 2023. 10. 16. [CSS] quasar에 정의되어있는 가상 선택자 클래스 css 변경하기 Quasar프레임워크를 사용하다가 css를 변경할 때, Quasar가 가지고 있는 클래스를 재정의하여 사용하곤 한다. 하지만 기존 css의 가상 클래스 중 :active, :focus는 Quasar가 가지고 있는 클래스에 붙여 사용하려 해도 적용되지 않는 경우가 있다. 예를들어 q-tab의 경우이다. 개발자 도구를 들여다 보면 활성화된 탭에는 q-tab--active라는 클래스가, 비활성화된 탭에는 q-tab--inactive라는 클래스가 적용되어있다. 이러한 경우 q-tab:active 또는 q-tab:focus를 사용한다고 하더라도 적용 자체가 되지 않거나, 원하는 결과를 얻기가 어렵다. Quasar에서 가상클래스 재정의 하는 법 * Quasar자체에서 제공하는 클래스를 가상클래스라고 정의하기에는 확.. 2023. 10. 14. [Vue.js] Vue.js에서 Resize 이벤트 처리하기 기존에는 HTML 요소에 일일이 CSS로 height를 줘서 높이를 처리하곤 했었는데 vue의 Resize이벤트를 사용하여 CSS 없이 간단하고 깔끔한 코드를 작성해보고자 한다. *Javascript기반의 Vue.js, Vue.js 기반의 quasar프레임워크를 사용하고 있다. Resize 이벤트 결론부터 말하자면 headerDiv라는 참조를 가진 엘리먼트의 높이에 30을 더한 값을 conditionHeight 데이터 속성에 할당하는 코드이다. 섹션에서 this.$refs.headerCard.$el을 사용하여 headerCard DOM의 엘리먼트 높이를 가져오고, 그 높이에 30을 더한 값을 conditionHeight에 할당한 뒤 이후에 그 높이를 conditionHeight에 반영시킨다. 또한 nex.. 2023. 10. 13. [Vue.js] HTML 요소의 클래스(class)를 동적으로 바인딩하기 css를 하다보면 하나의 HTML요소에 상황에 따라 다른 스타일을 적용해 주어야 할 때가 있다. 예를 들면 클릭 된 탭이 A냐 B냐에 따라 색상을 변경해 준다든가, 높이를 다르게 설정한다든가 하는 경우이다. :class 디렉티브 이런경우에는 :class 디렉티브를 사용해주면 된다. :class 디렉티브는 HTML요소의 클래스를 동적으로 바인딩하는데 사용된다. 삼항연산자를 이용하여 tabs가 template인 경우에는 aTemplateClass 클래스가, tabs가 template이 아닌 경우에는 bTemplateClass 클래스가 적용되게 해준다. 그 후에는 태그에 원하는 스타일을 지정해주면 된다. 사용자가 화면에서 탭을 클릭하면 tabs의 데이터가 변경됨에 따라 클래스를 동적으로 바인딩 할 수 있다. 2023. 10. 12. 이전 1 2 다음 728x90
