HTML／CSS91 [HTML/CSS] 다크모드 구현하기 안녕하세요 이번 게시글에서는 html, css, js 를 이용해 다크모드 기능 구현방법에 대해 설명하겠습니다. 우선 시연영상입니다. 다음은 전체 코드입니다. darkmode.html 다크 모드 토글 다크 모드 테스트 이것은 다크 모드 테스트입니다. script.js const darkModeToggle = document.getElementById("dark-mode-toggle"); const content = document.querySelector(".content"); darkModeToggle.addEventListener("click", () => { // body 요소에 dark-mode 클래스를 추가 또는 제거하여 스타일을 변경합니다. document.body.classList.toggle.. 2024. 1. 20. [HTML/CSS] tailwind를 사용해서 간단한 todo 리스트 만들기 안녕하세요 오늘은 tailwind를 사용해서 간단한 todo 리스트를 만들어보겠습니다. 위 기능을 구현하기 위해 todo.html 파일에 다음과 같이 코드를 작성해주세요 할 일 목록 추가 또한 todo.js 파일에 다음과 같이 코드를 작성해주세요 // 할 일 추가 함수 function addTask() { // 입력 필드와 할 일 목록의 HTML 요소를 가져옴 let taskInput = document.getElementById("new-task"); let taskList = document.getElementById("task-list"); // 입력된 텍스트를 가져오고 공백 제거 let task = taskInput.value.trim(); // 텍스트가 비어있지 않다면 실행 if (task !=.. 2024. 1. 16. [HTML/CSS] Tooltip 구현하기 안녕하세요, 이번 게시글에서는 html, css로 tooltip을 구현해보겠습니다. 우선 시연 영상부터 보여드리겠습니다. 다음은 전체 코드입니다. 마우스를 올려보세요 여기는 툴팁 내용! 2024. 1. 11. [HTML/CSS] Bowser 라이브러리를 통해 오페라 브라우저인 경우 css 스타일 바꾸기 안녕하세요 오늘 Bowser 라이브러리를 통해 오페라 브라우저인 경우 css 스타일을 변경해보겠습니다. 해당 게시글과 관련된 이전 게시글입니다. 참고하실분은 참고해주세요 https://stickode.tistory.com/1026 다음은 test.html 코드입니다 다음과 같은 결과물을 얻을 수 있습니다. 2024. 1. 7. [HTML/CSS] Bowser 라이브러리를 통해 브라우저 이름과 버전 정보 가져오기 안녕하세요 오늘은 Bowser 라이브러리를 통해 브라우저 이름과 버전 정보 가져오는 방법에 대해서 알아보겠습니다. 해당 라이브러리는 다음과 같이 활용될 수 있습니다. 브라우저마다 지원하는 기능이 다르기 때문에, 라이브러리를 사용하여 사용자의 브라우저를 감지하여 호환되지 않는 기능을 대체하는 코드를 제공할 수 있습니다. 다음은 라이브러리를 사용한 간단한 예시 입니다. test.html 코드는 다음과 같습니다. 다음과 같은 결과물을 얻을 수 있습니다. 2023. 12. 29. [HTML/CSS] Tailwind로 이미지에 그림자 및 회전 효과를 적용할 수 있는 카드뷰 만들기 안녕하세요 이번에는 이전 게시물에 이어서 텍스트도 수정해보겠습니다. 이전 게시물 링크입니다. https://stickode.tistory.com/1020 다음은 test.html 의 코드입니다. Rotate: Shadow: Image Title Your image description will appear here. 위 예제를 통해 다음과 같은 결과물을 얻을 수 있습니다. 2023. 12. 20. [HTML/CSS] Tailwind로 캘린더 만들기 안녕하세요 이번시간에는 Tailwind를 사용하여 캘린더를 만들어 보겠습니다. October 2023 Sun Mon Tue Wed Thu Fri Sat 2023. 12. 4. [HTML/CSS] Tailwind로 사용자 선택 이미지 카드 뷰어 만들기 안녕하세요 오늘은 Tailwind로 사용자 선택 이미지 카드 뷰어 만들어 보겠습니다 test.html 의 코드는 다음과 같습니다. 이미지 제목 여기에 선택한 이미지의 설명을 추가할 수 있습니다. 위 예제를 통해 다음과 같은 결과물을 얻을 수 있습니다. 2023. 12. 1. [HTML/CSS]카드 컴포넌트 캐러셀 구현 안녕하세요 이번 시간에는 이미지와 같은 컨텐츠를 표시할 때, 여러 개의 아이템을 한 번에 보여주는 캐러셀을 구현해보겠습니다. Swiper 라이브러리와 Tailwind CSS 를 활용하여 만들어보겠습니다. https://stickode.tistory.com/982 위 블로그를 참고해서 먼저 카드 컴포넌트를 만들어 줍니다. 그리고 스와이퍼 사용을 위한 코드를 조금 수정하겠습니다. 이미지 타이틀 1 제목 1 여기에 설명을 작성하세요. 더 보기 이미지 타이틀 2 제목 2 여기에 설명을 작성하세요. 더 보기 이미지 타이틀 3 제목 3 여기에 설명을 작성하세요. 더 보기 2023. 11. 26. 이전 1 2 3 4 5 6 ··· 11 다음
