반응형 코딩3 float를 이용한 탭 메뉴 버튼 만들기2 - jQuery, vanilla JS 구현 float를 이용한 탭 메뉴 버튼 만들기2 - jQuery, vanilla JS 구현 이전 포스팅에서 HTML/CSS를 이용해서 탭메뉴 버튼의 UI를 만들어보았습니다. float를 이용한 탭 메뉴 버튼 만들기 - Part 1 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 HTML/CSS를 이용해서 Tab Menu 버튼을 만들어 봅시다. 바로 이런 거요. 쇼핑몰 상품설명 상세페이지에서 흔히 볼수 있는 형태입니다. 저의 입장에서라면 사 kincoding.com 그러면 이제 이 메뉴를 동적으로 작동하도록 만들어야겠죠? 그런 역할을 해주는 언어가 바로 Javascript입니다. 프로그래밍 언어를 이용하는 코딩은 흥미진진합니다. 생명력을 불어 넣.. 2023. 2. 13. ChatGPT3 도움 받아서 갤러리 오버레이 버튼 만들기 ChatGPT3 도움 받아서 갤러리 오버레이 버튼 만들기 갑자기 이런 버튼을 만들어 보고 싶어 졌습니다. 백그라운드로 들어 있는 이미지 위로 플레이 버튼이 가운데 올라가 있는 형태입니다. 대충 생각을 해보니, 이미지가 들어 있는 div는 position: relative를 주고 저 플레이버튼을 이미지(?)로 만들고 opacity로 투명도를 준 다음 position: absolute로 만든 다음 붕~ 띄워서 가운데 정렬을 하면 되는 것인가? 하는 생각이 들었습니다. 타이핑해서 코드를 작성하려다, 문득 어제 만났던 그녀가 ChatGPT3가 떠 올랐습니다. 만들기 귀찮으니 일단 ChatGPT3에게 질문을 개떡 같이 말해도 찰떡 같이 알아듣는 ChatGPT AI가 너무나 대견합니다. 요즘 제 업무를 참 많이 도.. 2023. 2. 5. Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 웹 사이트에서 마우스 롤오버를 하면 숨겨져 있던 서브메뉴가 보인다거나, 공지 알림창을 클릭하면 사라지거나 하는 경우는 거의 대부분 Javascript로 CSS의 display 속성 값을 'none' 이나 'block'으로 변경하는 방법을 사용하는 경우가 많습니다. 물론 이와 같은 방법은 알림창 뿐 만이 아니라, 모든 HTML의 엘리먼트 요소들에 적용이 가능합니다. 동작원리도 매우 간단하기 때문에 한번 들여다보고 이해를 해두면, 동적인 UI를 만드는데 아주 훌륭한 기초지식이 되어줄 것입니다. 간단한 HTML / CSS 예제 코드를 통해 함께 살펴보겠습니다. Notice 버튼 .alert-box { background-color: slategray; paddin.. 2023. 1. 15. 이전 1 다음 반응형
