w3.css 텍스트 버튼 CSS를 사용하여 텍스트 버튼의 스타일을 지정하는 방법을 알아보자. 텍스트 버튼 스타일 지정 방법 1단계) HTML 추가 <button class=”btn success”>Success</button> <button class=”btn info”>Info</button> <button class=”btn warning”>Warning</button> <button class=”btn danger”>Danger</button> <button class=”btn default”>Default</button> 2단계) CSS 추가 “텍스트 버튼” 모양을 얻으려면 기본 배경색과 테두리를 제거한다. .btn { border: none; background-color: inherit; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block; } /* On mouse-over */ .btn:hover {background: #eee;} .success {color: green;} .info {color: dodgerblue;} .warning {color: orange;} .danger {color: red;}…

w3.css 전체 너비(블록) 버튼 CSS를 사용하여 블록 버튼(전체 너비)의 스타일을 지정하는 방법을 알아보자. 블록 버튼 스타일 지정 방법 1단계) HTML 추가 <button type=”button” class=”block”>Block Button</button> 2단계) CSS 추가 전체 너비 버튼을 만들려면 너비를 100%로 추가하고 블록 요소로 만든다. .block { display: block; width: 100%; border: none; background-color: #04AA6D; padding: 14px 28px; font-size: 16px; cursor: pointer; text-align: center; }

w3.css Navbar의 “더보기” 버튼 ‘더 보기’ 버튼을 만드는 방법을 알아보자. 드롭다운 네비게이션바 만들기 사용자가 탐색 모음 내의 요소 위로 마우스를 가져갈 때 나타나는 드롭다운 메뉴를 만든다. 1단계) HTML 추가 <div class=”navbar”> <a href=”#home”>Home</a> <a href=”#news”>News</a> <div class=”dropdown”> <button class=”dropbtn”>More <i class=”fa fa-caret-down”></i> </button> <div class=”dropdown-content”> <a href=”#”>Link 1</a> <a href=”#”>Link 2</a> <a href=”#”>Link 3</a> </div> </div> </div>   <button>, <a> 또는 <p> 요소 등 모든 요소를 ​​사용하여 드롭다운 메뉴를 연다. 드롭다운 메뉴를 만들고 그 안에 드롭다운 링크를 추가하려면 컨테이너 요소(예:…

w3.css 다음 및 이전 버튼 CSS를 사용하여 ‘다음’과 ‘이전’ 버튼을 만드는 방법을 알아보자. 다음 및 이전 버튼을 만드는 방법 1단계) HTML 추가 <a href=”#” class=”previous”>« Previous</a> <a href=”#” class=”next”>Next »</a> <a href=”#” class=”previous round”>‹</a> <a href=”#” class=”next round”>›</a> 2단계) CSS 추가 a { text-decoration: none; display: inline-block; padding: 8px 16px; } a:hover { background-color: #ddd; color: black; } .previous { background-color: #f1f1f1; color: black; } .next { background-color: #04AA6D; color: white; } .round { border-radius: 50%; }

w3.css 아이콘 버튼 CSS로 아이콘 버튼을 만드는 방법을 알아보자. 아이콘 버튼을 만드는 방법 1단계) HTML 추가 Font Awesome과 같은 아이콘 라이브러리를 추가하고 HTML 버튼에 아이콘을 추가한다. <!– Add icon library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <!– Add font awesome icons to buttons –> <p>Icon buttons:</p> <button class=”btn”><i class=”fa fa-home”></i></button> <button class=”btn”><i class=”fa fa-bars”></i></button> <button class=”btn”><i class=”fa fa-trash”></i></button> <button class=”btn”><i class=”fa fa-close”></i></button> <button class=”btn”><i class=”fa fa-folder”></i></button> <p>Icon buttons with text:</p> <button class=”btn”><i class=”fa fa-home”></i> Home</button> <button class=”btn”><i class=”fa fa-bars”></i> Menu</button> <button class=”btn”><i…

w3.css 알림 버튼 CSS로 알림 버튼을 만드는 방법을 알아보자. 알림 버튼을 만드는 방법 1단계) HTML 추가 <a href=”#” class=”notification”> <span>Inbox</span> <span class=”badge”>3</span> </a> 2단계) CSS 추가 .notification { background-color: #555; color: white; text-decoration: none; padding: 15px 26px; position: relative; display: inline-block; border-radius: 2px; } .notification:hover { background: red; } .notification .badge { position: absolute; top: -10px; right: -10px; padding: 5px 10px; border-radius: 50%; background: red; color: white; }

w3.css 알약 버튼 CSS를 사용하여 알약형 버튼을 만드는 방법을 알아보자. 알약 버튼을 만드는 방법 1단계) HTML 추가 <button class=”button”>Pill Button</button> 2단계) CSS 추가 다음 border-radius 속성을 사용하여 버튼에 둥근 모서리를 추가한다. .button { background-color: #ddd; border: none; color: black; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; border-radius: 16px; }

w3.css 다운로드 버튼 CSS를 사용하여 다운로드 버튼의 스타일을 지정하는 방법을 알아보자. 다운로드 버튼을 만드는 방법 1단계) HTML 추가 Font Awesome과 같은 아이콘 라이브러리를 추가하고 HTML 버튼에 아이콘을 추가한다. <!– Add icon library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <!– Auto width –> <button class=”btn”><i class=”fa fa-download”></i> Download</button> <!– Full width –> <button class=”btn” style=”width:100%”><i class=”fa fa-download”></i> Download</button> 2단계) CSS 추가 /* Style buttons */ .btn { background-color: DodgerBlue; border: none; color: white; padding: 12px 30px; cursor: pointer; font-size: 20px; } /* Darker…

w3.css 로딩 버튼 CSS를 사용하여 로딩 버튼을 만드는 방법을 알아보자. 로딩 버튼 스타일 지정 방법 1단계) HTML 추가 Font Awesome과 같은 아이콘 라이브러리를 추가하고 HTML 버튼에 아이콘을 추가한다. <!– Add icon library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <!– Add font awesome icons to buttons (note that the fa-spin class rotates the icon) –> <button class=”buttonload”> <i class=”fa fa-spinner fa-spin”></i>Loading </button> <button class=”buttonload”> <i class=”fa fa-circle-o-notch fa-spin”></i>Loading </button> <button class=”buttonload”> <i class=”fa fa-refresh fa-spin”></i>Loading </button> 2단계) CSS 추가 /* Style buttons */…

w3.css 자세히 읽기 – 간략히 읽기 버튼 JavaScript를 사용하여 “자세히 읽기 – 간략히 읽기 버튼” 을 만드는 방법을 알아보자. 자세히 읽기 – 간략히 읽기 버튼 만드는 방법 1단계) HTML 추가 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id=”dots”>…</span><span id=”more”>erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac….