HTML／CSS85 [HTML/CSS] 탭 메뉴 만들기 안녕하세요 이번 게시글에서는 탭 메뉴를 만들어 탭 클릭시 하단의 내용이 보여지는 예제입니다. 우선 시연영상입니다. 다음은 전체 코드입니다. 탭1 탭2 탭3 탭1 탭1의 내용을 넣어주세요 탭2 탭2의 내용을 넣어주세요 탭3 탭3의 내용을 넣어주세요 2024. 2. 7. [HTML/CSS] 세로 드롭다운 메뉴 안녕하세요 오늘은 HTML/CSS/JavaScript 를 활용하여 새로 드롭다운 메뉴를 만들어 볼게요. 우선 사용할 HTML 태그는 table, tr, td 태그입니다. 태그: 목적: 웹 페이지에 테이블을 만들 때 사용합니다. 태그는 테이블의 시작과 끝을 나타내며, 테이블의 전체적인 구조를 정의합니다. 자식 요소: (테이블 행), (테이블 헤더 셀), (테이블 데이터 셀), , , 등을 자식 요소로 포함할 수 있습니다. 태그 (Table Row): 목적: 테이블의 개별 행을 나타냅니다. 각 태그는 테이블의 한 행을 대표하며, 하나 이상의 또는 요소를 포함할 수 있습니다. 자식 요소: 주로 (테이블 데이터 셀) 또는 (테이블 헤더 셀) 태그를 자식 요소로 가집니다. 배치: 태그 내에 순차적으로 배치되어 테.. 2024. 2. 6. [HTML/CSS] 버튼 클릭시 나오는 모달창 구현하기 안녕하세요 이번 게시글에서는 버튼을 클릭했을때 나오는 모달창을 구현해보겠습니다. 우선, 시연영상입니다. 전체 코드입니다. modal.html stickcode 모달창 띄우기 버튼 × 모달창 내용! modalscript.js const btn = document.getElementById("popupBtn"); // 모달을 띄우는 버튼 요소 가져오기 const modal = document.getElementById("modalWrap"); // 모달 창 요소 가져오기 const closeBtn = document.getElementById("closeBtn"); // 모달을 닫는 버튼(X) 요소 가져오기 btn.onclick = function () { modal.style.display = "block.. 2024. 1. 29. [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. 이전 1 2 3 4 5 ··· 10 다음