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…

w3.css 알림 CSS를 사용하여 알림 메시지를 만드는 방법을 알아보자. 알림 메시지 만들기 알림 메시지는 사용자에게 위험, 성공, 정보 또는 경고 등 특별한 사항을 알리는 데 사용될 수 있다. 1단계) HTML 추가 <div class=”alert”> <span class=”closebtn” onclick=”this.parentElement.style.display=’none’;”>×</span> This is an alert box. </div>   경고 메시지를 닫는 기능을 원한다면 “you click on me, hide my parent element”라는 온클릭 속성이 있는 <span> 요소(컨테이너 <div> (class=“alert”)를 추가하자. 2단계) CSS 추가 알림 상자와 닫기 버튼의 스타일을 지정한다. /* The alert message box */ .alert…

w3.css 제품 카드 CSS로 제품 카드를 만드는 방법을 알아보자. 제품 카드를 만드는 방법 1단계) HTML 추가 <div class=”card”> <img src=”jeans3.jpg” alt=”Denim Jeans” style=”width:100%”> <h1>Tailored Jeans</h1> <p class=”price”>$19.99</p> <p>Some text about the jeans..</p> <p><button>Add to Cart</button></p> </div> 2단계) CSS 추가 .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: auto; text-align: center; font-family: arial; } .price { color: grey; font-size: 22px; } .card button { border: none; outline: 0; padding: 12px; color: white; background-color: #000; text-align:…

w3.css 프로필 카드 CSS로 프로필 카드를 만드는 방법을 알아보자. 프로필 카드를 만드는 방법 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”> <div class=”card”> <img src=”img.jpg” alt=”John” style=”width:100%”> <h1>John Doe</h1> <p class=”title”>CEO & Founder, Example</p> <p>Harvard University</p> <a href=”#”><i class=”fa fa-dribbble”></i></a> <a href=”#”><i class=”fa fa-twitter”></i></a> <a href=”#”><i class=”fa fa-linkedin”></i></a> <a href=”#”><i class=”fa fa-facebook”></i></a> <p><button>Contact</button></p> </div> 2단계) CSS 추가 .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: auto; text-align: center; } .title {…

w3.css 플립 카드 CSS를 사용하여 플립카드를 만드는 방법을 알아보자. 플립카드를 만드는 방법 1단계) HTML 추가 <div class=”flip-card”> <div class=”flip-card-inner”> <div class=”flip-card-front”> <img src=”img_avatar.png” alt=”Avatar” style=”width:300px;height:300px;”> </div> <div class=”flip-card-back”> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> 2단계) CSS 추가 /* The flip card container – set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if…