w3.css 가입 양식 CSS를 사용하여 가입 양식을 만드는 방법을 알아보자. 가입 양식을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. 그런 다음 각 필드에 대해 입력(일치하는 레이블 포함)을 추가한다. <form action=”action_page.php”> <div class=”container”> <h1>Register</h1> <p>Please fill in this form to create an account.</p> <hr> <label for=”email”><b>Email</b></label> <input type=”text” placeholder=”Enter Email” name=”email” id=”email” required> <label for=”psw”><b>Password</b></label> <input type=”password” placeholder=”Enter Password” name=”psw” id=”psw” required> <label for=”psw-repeat”><b>Repeat Password</b></label> <input type=”password” placeholder=”Repeat Password” name=”psw-repeat” id=”psw-repeat” required> <hr> <p>By creating an account you…

w3.css 소셜 로그인 양식 CSS를 사용하여 소셜 미디어 로그인 양식을 만드는 방법을 알아보자. 소셜 로그인 폼을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. 그런 다음 각 필드에 입력이나 소셜 미디어 링크를 추가한다. <div class=”container”> <form action=”/action_page.php”> <div class=”row”> <h2 style=”text-align:center”>Login with Social Media or Manually</h2> <div class=”vl”> <span class=”vl-innertext”>or</span> </div> <div class=”col”> <a href=”#” class=”fb btn”> <i class=”fa fa-facebook fa-fw”></i> Login with Facebook </a> <a href=”#” class=”twitter btn”> <i class=”fa fa-twitter fa-fw”></i> Login with Twitter </a> <a…

w3.css 문의 양식 CSS를 사용하여 연락처 양식을 만드는 방법을 알아보자. 연락처 양식을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. <div class=”container”> <form action=”action_page.php”> <label for=”fname”>First Name</label> <input type=”text” id=”fname” name=”firstname” placeholder=”Your name..”> <label for=”lname”>Last Name</label> <input type=”text” id=”lname” name=”lastname” placeholder=”Your last name..”> <label for=”country”>Country</label> <select id=”country” name=”country”> <option value=”australia”>Australia</option> <option value=”canada”>Canada</option> <option value=”usa”>USA</option> </select> <label for=”subject”>Subject</label> <textarea id=”subject” name=”subject” placeholder=”Write something..” style=”height:200px”></textarea> <input type=”submit” value=”Submit”> </form> </div> 2단계) CSS 추가 /* Style inputs with type=”text”, select elements…

w3.css 결제 양식 CSS를 사용하여 반응형 결제 양식을 만드는 방법을 알아보자. 체크아웃 양식을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. <div class=”row”> <div class=”col-75″> <div class=”container”> <form action=”/action_page.php”> <div class=”row”> <div class=”col-50″> <h3>Billing Address</h3> <label for=”fname”><i class=”fa fa-user”></i> Full Name</label> <input type=”text” id=”fname” name=”firstname” placeholder=”John M. Doe”> <label for=”email”><i class=”fa fa-envelope”></i> Email</label> <input type=”text” id=”email” name=”email” placeholder=”john@example.com”> <label for=”adr”><i class=”fa fa-address-card-o”></i> Address</label> <input type=”text” id=”adr” name=”address” placeholder=”542 W. 15th Street”> <label for=”city”><i class=”fa fa-institution”></i> City</label> <input type=”text”…

w3.css 가입 양식 CSS를 사용하여 반응형 가입 양식을 만드는 방법을 알아보자. 가입 양식을 만드는 방법 1단계) HTML 추가 <form> 요소를 사용하여 입력을 처리한다. 그런 다음 각 필드에 대해 입력(일치하는 레이블 포함)을 추가한다. <form action=”action_page.php” style=”border:1px solid #ccc”> <div class=”container”> <h1>Sign Up</h1> <p>Please fill in this form to create an account.</p> <hr> <label for=”email”><b>Email</b></label> <input type=”text” placeholder=”Enter Email” name=”email” required> <label for=”psw”><b>Password</b></label> <input type=”password” placeholder=”Enter Password” name=”psw” required> <label for=”psw-repeat”><b>Repeat Password</b></label> <input type=”password” placeholder=”Repeat Password” name=”psw-repeat” required> <label> <input type=”checkbox” checked=”checked”…

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