css

javascript

HTML, CSS, JavaScript를 활용한 아코디언 메뉴 구현하기

2023.03.29

HTML, CSS, JavaScript는 웹 개발에서 핵심적인 역할을 합니다. 이번에는 HTML, CSS, JavaScript를 활용하여 아코디언 메뉴를 구현하는 방법을 알아보겠습니다. HTML HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 아코디언 메뉴를 구현하기 위해서는 과 요소를 사용합니다. 이번 예제에서는 각 아코디언 메뉴 항목의 제목과 내용을 각각 과 로 나누어 구성하였습니다. 또한, JavaScript에서 이벤트를 처리하기 위해 각 제목 요소에 click 이벤트를 추가해야 합니다. 제목1 화살표 내용1 제목2 화살표 내용2 제목3 화살표 내용3 CSS CSS는 HTML 문서의 디자인과 스타일을 정의하는 스타일 시트 언어입니다. 이번 예제에서는 아코디언 메뉴의 제목과 내용을 스타일링..

javascript

API와 자바스크립트를 이용해 실시간 날씨 정보 받아오기

2023.03.28

자바스크립트를 활용한 동적 날씨 정보 출력 이번에는 자바스크립트를 활용하여 날씨 정보를 동적으로 출력하는 방법을 알아보겠습니다. 이를 위해 7Timer라는 날씨 API를 사용하여 필요한 데이터를 가져올 것입니다. 1. API 데이터 가져오기 가져온 데이터를 활용하여 날씨 정보를 동적으로 출력하기 위해, 먼저 API 데이터를 가져와야 합니다. 이를 위해 fetch()를 사용하였습니다. fetch() 함수는 Promise를 반환하므로, async/await를 활용하여 비동기적으로 API 데이터를 가져옵니다. async function loadItems() { const data = await fetch( "https://www.7timer.info/bin/api.pl?lon=127.378&lat=36.349..

HTML, CSS, JavaScript를 활용한 아코디언 메뉴 구현하기

API와 자바스크립트를 이용해 실시간 날씨 정보 받아오기

티스토리툴바