예제 (34) 썸네일형 리스트형 모달 팝업: 모달 창을 HTML과 CSS로 만들어 팝업 레이어 생성 HTML과 CSS를 사용하여 모달 팝업(모달 창)을 만들어보겠습니다. 이 모달 팝업은 버튼을 클릭하면 나타나고, 닫기 버튼을 클릭하면 사라지는 간단한 모달입니다. 1. HTML 파일 생성하기 먼저 텍스트 에디터(메모장, Visual Studio Code 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다. 모달 열기 × 모달 제목 모달 내용을 여기에 추가합니다. 2. CSS 스타일 시트 생성하기 다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 스타일 시트에서는 모달의 초기 상태와 스타일을 정의합니다. /* styles.css */ body { font-family: Arial, sans-serif; backgrou.. 스크롤 이벤트: 스크롤 위치에 따라 요소가 나타나거나 사라지는 효과 스크롤 이벤트를 사용하여 웹 페이지 요소가 스크롤 위치에 따라 나타나거나 사라지는 효과를 만들어보겠습니다. 이 효과를 구현하려면 JavaScript를 사용하여 스크롤 이벤트를 감지하고 요소의 CSS 스타일을 변경해야 합니다. 1. HTML 파일 생성하기 먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다. 스크롤해서 나타나거나 사라지는 요소 2. CSS 스타일 시트 생성하기 다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 스타일 시트에서는 스크롤 이벤트로 나타내고 숨길 요소의 초기 스타일을 정의합니다. /* styles.c.. 회전하는 로고: CSS로 로고 이미지 회전 애니메이션 CSS를 사용하여 로고 이미지를 회전 애니메이션으로 만드는 HTML 예제 프로그램을 만들어보겠습니다. 1. HTML 파일 생성하기 먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다. 2. CSS 스타일 시트 생성하기 다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 이 스타일 시트에서는 로고 이미지에 회전 애니메이션을 정의합니다. /* styles.css */ .rotating-logo { animation: rotate 4s linear infinite; /* 회전 애니메이션 설정 */ width: 200px; /* 로고.. 레인보우 텍스트: CSS 그래디언트를 사용하여 텍스트에 레인보우 색상 적용 CSS 그래디언트를 사용하여 텍스트에 레인보우 색상을 적용하는 HTML 예제 프로그램을 만들어보겠습니다. 이 예제에서는 background-clip 속성을 사용하여 텍스트에 그래디언트를 적용합니다. 1. HTML 파일 생성하기 먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다. 레인보우 텍스트 2. CSS 스타일 시트 생성하기 다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 이 스타일 시트에서는 텍스트에 레인보우 색상을 적용하는 스타일을 정의합니다. /* styles.css */ .rainbow-text { backgro.. 반짝이는 배경: CSS 애니메이션으로 배경 색상을 반짝이게 만들기 CSS 애니메이션을 사용하여 배경 색상을 반짝이게 만드는 HTML 예제 프로그램을 만들어보겠습니다. 이 예제에서는 CSS의 @keyframes를 사용하여 배경 색상을 반복적으로 변경하여 반짝이는 효과를 만들 것입니다. 1. HTML 파일 생성하기 먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다. 2. CSS 스타일 시트 생성하기 다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 이 스타일 시트에서는 반짝이는 배경의 스타일 및 애니메이션을 정의합니다. /* styles.css */ .blinking-bg { width: 1.. 타자 효과: 글자 한 글자씩 나타나는 타자 효과 HTML과 JavaScript를 사용하여 글자 한 글자씩 나타나는 타자 효과를 만들어보겠습니다. 이 효과는 글자가 일정한 간격으로 나타나는 것을 시뮬레이션합니다. 1. HTML 파일 생성하기 먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다. 2. JavaScript 파일 생성하기 다음으로 JavaScript 파일을 생성합니다. 이 파일을 "script.js"로 저장합니다. JavaScript를 사용하여 타자 효과를 구현할 것입니다. // script.js const text = "타자 효과: 글자 한 글자씩 나타나는 타자 효과"; const typingEffec.. 비밀 메시지: CSS로 텍스트 숨기고 호버(hover) 시 나타나게 하기 HTML과 CSS를 사용하여 텍스트를 숨기고 호버(hover) 시에 나타나게 하는 비밀 메시지를 만들어보겠습니다. 이렇게 하면 텍스트가 보이지 않다가 마우스를 호버할 때만 나타날 것입니다. 1. HTML 파일 생성하기 먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다. 이 텍스트는 숨겨져 있습니다. 2. CSS 스타일 시트 생성하기 다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 이 스타일 시트에서는 텍스트를 숨기고 호버 시 나타나게 하는 스타일을 정의합니다. /* styles.css */ .hidden-text { op.. 블링크 텍스트 만들기 블링크 텍스트(텍스트가 깜빡이는 효과)를 만들기 위한 HTML 예제 프로그램을 작성해보겠습니다. 블링크 태그는 현재 웹 표준에서 권장되지 않으며, 브라우저에서는 지원이 되지 않을 수도 있으므로 사용을 피하는 것이 좋습니다. 대신, CSS와 JavaScript를 사용하여 텍스트 애니메이션 효과를 구현하는 것이 좋습니다. 1. HTML 파일 생성하기 먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다. 이 텍스트가 깜빡입니다! 2. CSS 스타일 시트 생성하기 다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 이 스타일 시트에서.. 이전 1 2 3 4 5 다음
