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; }

w3.css CSS 태그 클라우드 CSS로 태그 클라우드를 만드는 방법을 알아보자. 태그 클라우드를 만드는 방법 1단계) HTML 추가 <span class=”tag-cloud”>Volvo</span> <span class=”tag-cloud”>BMW</span> <span class=”tag-cloud”>Tesla</span> <span class=”tag-cloud”>Nissan</span> <span class=”tag-cloud”>Toyota</span> <span class=”tag-cloud”>Saab</span> <span class=”tag-cloud”>Porsche</span> <span class=”tag-cloud”>VW</span> <span class=”tag-cloud”>Fiat</span> 2단계) CSS 추가 .tag-cloud { display: inline-block; color: white; padding: 8px 20px; border-radius: 25px; background-color: #2196F3; margin-top: 8px; }

w3.css CSS 리본 CSS로 리본을 만드는 방법을 알아보자. 리본을 만드는 방법 이 예에서 리본은 버튼 요소에 속한다. 1단계) HTML 추가 <button class=”btn”>A button for something cool <span class=”ribbon”>NEW</span></button> 2단계) CSS 추가 .btn {   border: none;   border-radius: 5px;   padding: 12px 20px;   font-size: 16px;   cursor: pointer;   background-color: #282A35;   color: white;   position: relative; } .ribbon {   width: 60px;   font-size: 14px;   padding: 4px;   position: absolute;   right: -25px;   top: -12px;   text-align: center;   border-radius: 25px;   transform: rotate(20deg);   background-color: #ff9800;   color: white; }

w3.css 라벨 CSS로 라벨 스타일을 지정하는 방법을 알아보자. 레이블을 스타일링하는 방법 1단계) HTML 추가 <span class=”label success”>Success</span> <span class=”label info”>Info</span> <span class=”label warning”>Warning</span> <span class=”label danger”>Danger</span> <span class=”label other”>Other</span> 2단계) CSS 추가 .label { color: white; padding: 8px; } .success {background-color: #04AA6D;} /* Green */ .info {background-color: #2196F3;} /* Blue */ .warning {background-color: #ff9800;} /* Orange */ .danger {background-color: #f44336;} /* Red */ .other {background-color: #e7e7e7; color: black;} /* Gray */

w3.css 참고사항 CSS로 “노트”를 만드는 방법을 알아보자. 메모는 사용자에게 위험, 성공, 정보 또는 경고 등 특별한 사항을 알리는 데 사용할 수 있다. 노트를 만드는 방법 1단계) HTML 추가 <div class=”danger”> <p><strong>Danger!</strong> Some text…</p> </div> 2단계) CSS 추가 .danger { background-color: #ffdddd; border-left: 6px solid #f44336; }

w3.css 콜아웃 메시지 CSS를 사용하여 콜아웃 메시지를 만드는 방법을 알아보자. 콜아웃 만들기 1단계) HTML 추가 <div class=”callout”> <div class=”callout-header”>Callout Header</div> <span class=”closebtn” onclick=”this.parentElement.style.display=’none’;”>×</span> <div class=”callout-container”> <p>Some text…</p> </div> </div>   콜아웃 메시지를 닫을 수 있는 기능이 필요하다면 “when you click on me, hide my parent element”라는 onclick 속성을 갖는 <span> 요소를 추가하자. 부모 요소는 컨테이너 <div> (class=”alert”)이다. ⭐ HTML 엔터티 ” ×”를 사용하여 문자 “x”를 만들자. 2단계) CSS 추가 콜아웃 상자와 닫기 버튼의 스타일을 지정한다. /* Callout box – fixed…