w3.css 고정 푸터 CSS를 사용하여 고정 푸터를 만드는 방법을 알아보자. 고정된 바닥글을 만드는 방법 1단계) HTML 추가 <style> .footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: red; color: white; text-align: center; } </style> <div class=”footer”> <p>Footer</p> </div>

w3.css 빛나는 텍스트 CSS를 사용하여 빛나는 텍스트를 만드는 방법을 알아보자. 빛나는 텍스트를 만드는 방법 text-shadow 속성을 사용하여 네온 조명 효과를 만든 다음 animation과 keyframes을 함께 사용하여 반복적으로 빛나는 효과를 추가한다. 1단계) HTML 추가 <h1 class=”glow”>GLOWING TEXT</h1>

w3.css 잘라낸 텍스트 CSS를 사용하여 반응형 컷아웃/녹아웃 텍스트를 만드는 방법을 알아보자. 컷아웃 텍스트(또는 녹아웃 텍스트)는 배경 이미지 위에 잘라져 나타나는 투명한 텍스트다. ⭐ 이 예제는 Internet Explorer나 Edge에서는 작동하지 않는다. 잘라낸 텍스트를 만드는 방법 텍스트 크기는 vw “뷰포트 너비”를 의미하는 단위로 설정할 수 있다. 이렇게 하면 텍스트 크기가 브라우저 창 크기에 맞게 조정된다. 1단계) HTML 추가 <div class=”image-container”> <div class=”text”>NATURE</div> </div> 2단계) CSS 추가 이 mix-blend-mode속성을 사용하면 이미지에 잘라낸 텍스트를 추가할 수 있다. 그러나 IE 또는 Edge에서는 지원되지 않는다. .image-container…

w3.css 반응형 텍스트 CSS를 사용하여 반응형 타이포그래피를 만드는 방법을 알아보자. 반응형 텍스트 브라우저 창 크기를 조절하여 텍스트 크기가 어떻게 변하는지 확인하자. 텍스트 크기를 조정할 때는 “vw” 단위를 사용하자. 10vw는 크기를 뷰포트 너비의 10%로 설정한다. 뷰포트는 브라우저 창 크기다. 1vw = 뷰포트 너비의 1%다. 뷰포트 너비가 50cm이면 1vw는 0.5cm다. 반응형 글꼴 크기 텍스트 크기는 vw “뷰포트 너비”를 의미하는 단위로 설정할 수 있다. 이렇게 하면 텍스트 크기가 브라우저 창 크기에 맞게 조정된다. 1단계) HTML 추가 <h1 style=”font-size:8vw;”>Hello World</h1> <p style=”font-size:2vw;”>Resize the browser…

w3.css 글머리 기호 없이 나열하기 CSS를 사용하여 글머리 기호가 없는 순서 없는 목록을 만드는 방법을 알아보자. 글머리 기호 없이 목록을 만드는 방법 1단계) HTML 추가 <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Remove bullets, margin and padding:</p> <ul class=”no-bullets”> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> 2단계) CSS 추가 ul.no-bullets { list-style-type: none; /* Remove bullets */ padding: 0; /* Remove padding */ margin: 0; /* Remove margins */ }

w3.css 배지가 있는 목록 그룹 CSS를 사용하여 배지가 있는 목록 그룹을 만드는 방법을 알아보자. 목록 그룹을 만드는 방법 1단계) HTML 추가 <ul> <li>Inbox <span class=”badge”>2</span></li> <li>Other <span class=”badge”>5</span></li> <li>Saved</li> <li>Stuff</li> <li>Old</li> </ul> 2단계) CSS 추가 /* Transform a basic list into a customized list group */ ul.list-group { list-style-type: none; padding: 0; margin: 0; } ul.list-group li { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; } /* Style badges inside the list…

w3.css 목록 그룹 CSS를 사용하여 기본 목록을 “목록 그룹”으로 변환하는 방법을 알아보자. 목록 그룹을 만드는 방법 1단계) HTML 추가 <ul> <li>Adele</li> <li>Agnes</li> <li>Billy</li> <li>Bob</li> <li>Calvin</li> <li>Christina</li> <li>Cindy</li> </ul> 2단계) CSS 추가 ul { list-style-type: none; /* Remove bullets */ padding: 0; /* Remove padding */ margin: 0; /* Remove margins */ } ul li { border: 1px solid #ddd; /* Add a thin border to each list item */ margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; /* Add…

w3.css 쿠폰 CSS로 “쿠폰”을 만드는 방법을 알아보자. 쿠폰을 만드는 방법 1단계) HTML 추가 <div class=”coupon”> <div class=”container”> <h3>Company Logo</h3> </div> <img src=”hamburger.jpg” alt=”Avatar” style=”width:100%;”> <div class=”container” style=”background-color:white”> <h2><b>20% OFF YOUR PURCHASE</b></h2> <p>Lorem ipsum..</p> </div> <div class=”container”> <p>Use Promo Code: <span class=”promo”>BOH232</span></p> <p class=”expire”>Expires: Jan 03, 2021</p> </div> </div> 2단계) CSS 추가 .coupon { border: 5px dotted #bbb; /* Dotted border */ width: 80%; border-radius: 15px; /* Rounded border */ margin: 0 auto; /* Center the coupon */ max-width: 600px; }…

w3.css HR 스타일 CSS를 사용하여 hr 요소의 스타일을 지정하는 방법을 알아보자. HR 스타일링 방법 1단계) HTML 추가 <hr> 2단계) CSS 추가 이 border속성을 사용하면 hr 요소의 스타일을 지정할 수 있다. /* Red border */ hr.new1 { border-top: 1px solid red; } /* Dashed red border */ hr.new2 { border-top: 1px dashed red; } /* Dotted red border */ hr.new3 { border-top: 1px dotted red; } /* Thick red border */ hr.new4 { border: 1px solid red; } /* Large rounded…

w3.css 원 CSS를 사용하여 빈 원을 만드는 방법을 알아보자. 원을 만드는 방법 1단계) HTML 추가 <span class=”dot”></span> <span class=”dot”></span> <span class=”dot”></span> <span class=”dot”></span> 2단계) CSS 추가 .dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; }