HTML 예제 (85) 썸네일형 리스트형 버튼 누르면 팝업창 뜨기 버튼을 누를 때 팝업 창을 띄우는 간단한 HTML 코드를 제공합니다. 팝업 창 띄우기 예제 팝업 창 열기 위 코드에서는 window.open() 함수를 사용하여 팝업 창을 엽니다. 팝업 창의 크기는 너비 400픽셀, 높이 300픽셀로 설정되어 있습니다. 실제로 사용하려면 "팝업창의_URL" 부분을 원하는 웹 페이지의 URL로 변경하세요. 버튼 보기 미션 클리어 카운터 미션 클리어 카운터를 나타내는 간단한 HTML 코드를 제공합니다. 이 코드는 사용자가 미션을 클리어할 때마다 카운터를 증가시키는 예제입니다. 미션 클리어 카운터 미션 클리어 횟수: 0 미션 클리어 위 코드에서는 JavaScript를 사용하여 미션 클리어 횟수를 추적하고 클리어 버튼을 클릭할 때마다 카운터를 증가시킵니다. 결과 보기 실시간 주식 시세 실시간 주식 시세를 표시하는 간단한 HTML 코드를 제공합니다. 이 코드는 JavaScript를 사용하여 실제 주식 시세를 가져오지는 않지만, 예제로서 주식 시세를 표시하는 방법을 보여줍니다. 실시간 주식 시세 현재 주식 가격: $0.00 가격 업데이트 위 코드에서는 JavaScript를 사용하여 가상의 주식 가격을 생성하고 이를 HTML 문서에 표시합니다. "가격 업데이트" 버튼을 클릭하면 주식 가격이 업데이트됩니다. 결과 보기 웹사이트 소개 페이지 웹사이트 소개 페이지를 만드는 간단한 HTML 코드를 제공합니다. 이 코드는 웹사이트의 제목, 설명, 이미지, 및 연락처 정보를 표시하는 예제입니다. 우리 웹사이트 소개 우리 웹사이트는 무엇을 하는 곳인지 간단히 소개합니다. 문의하기 문의 사항이 있으시면 아래 연락처로 연락해주세요: 이메일: example@example.com 전화번호: 123-456-7890 위 코드에서는 웹사이트 제목과 설명, 이미지, 연락처 정보를 표시하고 있습니다. 결과 보기 이미지 확대/축소 기능 이미지 확대 및 축소 기능을 가진 HTML 코드를 제공합니다. 이 코드는 JavaScript를 사용하여 이미지를 확대 및 축소할 수 있는 간단한 예제입니다. 이미지 확대/축소 예제 마우스를 이미지 위에 올려서 확대하세요. 위 코드에서는 태그 내에 이미지와 이미지 확대 효과를 정의한 CSS 코드가 포함되어 있습니다. 이미지에 마우스를 올리면 확대되는 효과가 적용됩니다. 결과 보기 화면에 예쁜 텍스트 추가 아름다운 텍스트 스타일링을 적용한 간단한 HTML 코드를 제공합니다. 이 코드는 텍스트에 그림자 효과와 글꼴 스타일을 적용하여 아름다운 텍스트를 화면에 표시합니다. 아름다운 텍스트 스타일링 이 텍스트는 그림자 효과와 특별한 글꼴을 가지고 있습니다. 위 코드에서는 태그 내에 .beautiful-text 클래스에 대한 스타일을 정의합니다. 이 스타일은 'Pacifico' 글꼴을 사용하며, 텍스트 크기와 색상, 그림자 효과를 설정합니다. 결과 보기 간단한 레시피 페이지 간단한 레시피 페이지를 만드는 HTML 코드를 제공합니다. 이 코드는 레시피 제목, 재료 목록 및 순서대로 표시된 레시피 단계를 포함합니다. 맛있는 파스타 레시피 재료 목록: 스파게티 파스타 올리브 오일 마늘 토마토 소스 파마산 치즈 소금 후추 조리 순서: 스파게티 파스타를 끓는 물에 삶는다. 팬에 올리브 오일과 다진 마늘을 데친다. 토마토 소스를 넣고 볶는다. 삶은 스파게티를 소스와 섞는다. 파마산 치즈와 조미료를 넣고 마무리한다. 위 코드에서는 레시피 제목, 재료 목록, 조리 순서를 각각 , , , 요소로 표시하고 해당 항목들을 리스트로 나열합니다. 결과 보기 드롭다운 메뉴 만들기 드롭다운 메뉴를 만드는 간단한 HTML 코드를 제공합니다. 이 코드는 HTML과 CSS를 사용하여 드롭다운 메뉴를 생성합니다. 드롭다운 메뉴 예제 메뉴 항목 1 항목 2 항목 3 위 코드에서는 .dropdown 클래스로 드롭다운 메뉴를 감싸고, .dropdown-content 클래스로 실제 드롭다운 항목들을 감쌉니다. 마우스를 메뉴 위로 가져가면 드롭다운 항목이 나타납니다. 결과보기 이전 1 2 3 4 ··· 11 다음
