w3.css 로그인 양식 CSS를 사용하여 반응형 로그인 양식을 만드는 방법을 알아보자. 로그인 폼을 만드는 방법 1단계) HTML 추가 컨테이너 안에 이미지를 추가하고 각 필드에 맞는 입력(매칭 라벨 포함)을 추가한다. 입력을 처리하기 위해 <form> 요소를 감싸자. PHP 튜토리얼에서 입력을 처리하는 방법에 대해 자세히 알아볼 수 있다. <form action=”action_page.php” method=”post”> <div class=”imgcontainer”> <img src=”img_avatar2.png” alt=”Avatar” class=”avatar”> </div> <div class=”container”> <label for=”uname”><b>Username</b></label> <input type=”text” placeholder=”Enter Username” name=”uname” required> <label for=”psw”><b>Password</b></label> <input type=”password” placeholder=”Enter Password” name=”psw” required> <button type=”submit”>Login</button> <label> <input type=”checkbox” checked=”checked” name=”remember”>…

w3.css 맨 위로 스크롤 버튼 CSS를 사용하여 “맨 위로 스크롤” 버튼을 만드는 방법을 알아보자. 스크롤 투 탑 버튼을 만드는 방법 1단계) HTML 추가 클릭하면 사용자가 페이지 상단으로 이동하는 버튼을 만든다. <button onclick=”topFunction()” id=”myBtn” title=”Go to top”>Top</button> 2단계) CSS 추가 #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99;…

w3.css 둥근 버튼 CSS를 사용하여 원형 버튼의 스타일을 지정하는 방법을 알아보자. 둥근 버튼 스타일링 방법 1단계) HTML 추가 <button class=”button button1″>2px</button> <button class=”button button2″>4px</button> <button class=”button button3″>8px</button> <button class=”button button4″>12px</button> <button class=”button button5″>50%</button> 2단계) CSS 추가 다음 border-radius 속성을 사용하여 버튼에 둥근 모서리를 추가한다. .button { background-color: #04AA6D; border: none; color: white; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; } .button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius:…

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