Mingg's Diary

2024-11-18

w3.css 텍스트 토글/스왑 JavaScript로 텍스트를 전환하는 방법을 알아보자. 요소의 텍스트 전환 1단계) HTML 추가 <button onclick=”myFunction()”>Click Me</button> <div id=”myDIV”>Hello</div> 2단계) JavaScript 추가 function myFunction() { var x = document.getElementById(“myDIV”); if (x.innerHTML === “Hello”) { x.innerHTML = “Swapped text!”; } else { x.innerHTML = “Hello”; } }

2024-11-17

How To – 다크 모드 전환

w3.css 다크 모드 전환 CSS와 JavaScript를 사용하여 다크 모드와 라이트 모드를 전환하자. 클래스 전환 1단계) HTML 추가 디자인을 토글하려는 콘텐츠를 저장해야 하는 모든 요소를 사용하자. 우리의 예에서는 <body>단순성을 위해 다음을 사용한다. <body> 2단계) CSS 추가 <body> 요소의 스타일을 지정하고 토글을 위한 .dark-mode 클래스를 만든다. body { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; } 3단계) JavaScript 추가 <body> 요소를 가져와 .dark-mode 클래스 사이를 전환한다. function myFunction() { var element = document.body; element.classList.toggle(“dark-mode”);…

2024-11-16

How To – 숨기기 및 표시 전환

w3.css 숨기기 및 표시 전환 JavaScript를 사용하여 요소를 숨기거나 표시하자. 요소 토글(숨기기/표시) 1단계) HTML 추가 <button onclick=”myFunction()”>Click Me</button> <div id=”myDIV”> This is my DIV element. </div> 2단계) JavaScript 추가 function myFunction() { var x = document.getElementById(“myDIV”); if (x.style.display === “none”) { x.style.display = “block”; } else { x.style.display = “none”; } }

2024-11-15

How To – 좋아요/싫어요 버튼을 전환

w3.css 좋아요와 싫어요 전환 CSS와 JavaScript를 사용하여 좋아요/싫어요 버튼을 전환하자. 요소 토글(숨기기/표시) 1단계) HTML 추가 <!– Add icon library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <!– Use an element to toggle between a like/dislike icon –> <i onclick=”myFunction(this)” class=”fa fa-thumbs-up”></i> 2단계) JavaScript 추가 function myFunction(x) { x.classList.toggle(“fa-thumbs-down”); }

2024-11-14

How To – 반응형 Iframe

w3.css 반응형 Iframe CSS를 사용하여 반응형 iframe을 만드는 방법을 알아보자. 종횡비 1단계) HTML 추가 <div class=”container”> <div class=”text”>Some text</div> <!– If you want text inside the container –> </div> 16:9 화면 비율 컨테이너 DIV의 가로 세로 비율을 유지하기 위해 padding-top에 백분율 값을 추가한다. 다음 예제는 YouTube 동영상의 기본 화면 비율인 16:9의 화면 비율을 생성한다. .container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } /* Then style the…

2024-11-13

How To – 종횡비

w3.css 종횡비 CSS를 사용하여 요소의 종횡비를 유지하는 방법을 알아보자. 크기 조절 시 종횡비(4:3, 16:9 등)를 유지하는 유연한 요소를 만든다. 요소의 종횡비는 너비와 높이 사이의 비례 관계를 설명한다. 두 가지 일반적인 비디오 종횡비는 4:3(20세기의 보편적 비디오 형식)과 16:9(HD 텔레비전 및 유럽 디지털 텔레비전의 보편적이며 YouTube 비디오의 기본)이다. 종횡비 1단계) HTML 추가 <div class=”container”> <div class=”text”>Some text</div> <!– If you want text inside the container –> </div> 1:1 화면비 패딩 상단에 백분율 값을 추가하여 DIV의 종횡비를 유지한다. 다음 예제는 가로 세로 비율을…

2024-11-12

How To – 패럴랙스 스크롤링

w3.css 패럴랙스 스크롤링 CSS를 사용하여 “패럴랙스” 스크롤링 효과를 만드는 방법을 알아보자. 패럴랙스 스크롤링은 배경 콘텐츠(즉, 이미지)가 스크롤링하는 동안 전경 콘텐츠와 다른 속도로 움직이는 웹사이트 트렌드다. 패럴랙스 스크롤링 데모 패럴랜스 스크롤링을 사용하지 않는 데모 ⭐ 패럴랙스 스크롤링은 모바일 기기/스마트폰에서 항상 작동하지는 않는다. 그러나 미디어 쿼리를 사용하여 모바일 기기에서 효과를 끌 수 있다. 패럴랙스 스크롤링 효과를 만드는 방법 컨테이너 요소를 사용하고 특정 높이의 컨테이너에 배경 이미지를 추가한다. 그런 다음 를 사용하여 background-attachment: fixed; 실제 패럴랙스 효과를 만든다. 다른 배경 속성은 이미지를 완벽하게…

2024-11-11

How To – 반응형 가격표

w3.css 반응형 가격표 CSS를 사용하여 반응형 가격표를 만드는 방법을 알아보자. 반응형 가격표를 만드는 방법 위에서 시작하는 선형 그라데이션 배경색을 만든다. 청록색/녹색에서 파란색으로 시작한다. 1단계) HTML 추가 <div class=”columns”> <ul class=”price”> <li class=”header”>Basic</li> <li class=”grey”>$ 9.99 / year</li> <li>10GB Storage</li> <li>10 Emails</li> <li>10 Domains</li> <li>1GB Bandwidth</li> <li class=”grey”><a href=”#” class=”button”>Sign Up</a></li> </ul> </div> 2단계) CSS 추가 * { box-sizing: border-box; } /* Create three columns of equal width */ .columns { float: left; width: 33.3%; padding: 8px; } /* Style the…

2024-11-10

How To – 스크롤 시 헤더 크기 조정

w3.css 스크롤 시 헤더 크기 조정 CSS와 JavaScript를 사용하여 스크롤 시 헤더를 줄이는 방법을 알아보자. 스크롤 시 헤더를 축소하는 방법 위에서 시작하는 선형 그라데이션 배경색을 만든다. 청록색/녹색에서 파란색으로 시작한다. 1단계) HTML 추가 <div id=”header”>Header</div> 2단계) CSS 추가 헤더 스타일 지정 #header { background-color: #f1f1f1; /* Grey background */ padding: 50px 10px; /* Some padding */ color: black; text-align: center; /* Centered text */ font-size: 90px; /* Big font size */ font-weight: bold; position: fixed; /* Fixed position – sit on…

2024-11-09

How To – 스크롤 헤더

w3.css 스크롤 헤더 CSS를 사용하여 스크롤 시 고정/고정 헤더를 만드는 방법을 알아보자. 스크롤 시 고정 헤더를 만드는 방법 위에서 시작하는 선형 그라데이션 배경색을 만든다. 청록색/녹색에서 파란색으로 시작한다. 1단계) HTML 추가 <div class=”header” id=”myHeader”> <h2>My Header</h2> </div> 2단계) CSS 추가 헤더 스타일을 지정한다. 스크롤 위치에 도달했을 때 헤더가 고정되도록 position:sticky 및 top:0을 추가한다. .header { position: sticky; top: 0; padding: 10px 16px; background: #555; color: #f1f1f1; } position: sticky; 사용자의 스크롤 위치를 기준으로 요소가 배치된다. Sticky 요소는 스크롤 위치에…