-
CSS - 인스타 클론(1)CSS/CSS 2020. 4. 28. 16:53
출처 : 인스타그램 보이는 사진처럼 로그인 폼을 만들었다.
하지만, 보이는 것처럼 input 태그와 button태그에 그림자가 껴있는 걸 볼 수 있다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>repl.it</title> <link href="style/common.css" rel="stylesheet" type="text/css" /> <link href="style/login.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="login-form"> <img src="img/logo_text.png" /> <input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" id="userId" /> <input type="password" placeholder="비밀번호" id="userPw" /> <button class="loginBtn" type="button">로그인</button> </div> <script src="js/login.js"></script> </body> </html>* { box-sizing: border-box; } body { background-color: rgba(var(--b3f, 250, 250, 250), 1); min-height: 100vh; display: flex; align-items: center; } .login-form { margin: 0 auto; display: flex; flex-direction: column; background-color: white; border: 1px solid rgba(var(--b6a, 219, 219, 219), 1); width: 350px; height: 300px; padding: 0px 25px; } .login-form img { padding: 30px 45px 45px 45px; margin-bottom: 0px; } .login-form #userId { background-color: rgba(var(--b3f, 250, 250, 250), 1); margin-bottom: 5px; padding: 8px; border-radius: 4px; border: 1px solid #cdced0; } .login-form #userPw { background-color: rgba(var(--b3f, 250, 250, 250), 1); padding: 8px; border-radius: 4px; margin-bottom: 15px; border: 1px solid #cdced0; } .login-form .loginBtn { color: white; font-weight: bold; padding: 3px 0; background-color: #b2dffc; border: 1px solid #b2dffc; border-radius: 4px; }#userId와 #userPw와 .loginBtn에 해당하는 곳에 테두리 속성 border 속성을 넣어준다.
짜잔!
border속성을 넣어주면 거짓말처럼 그림자가 사라지는 효과를 볼 수 있다.
'CSS > CSS' 카테고리의 다른 글
CSS - 개구리 게임(2) (0) 2020.04.29 CSS - flex 개구리 게임(1) (0) 2020.04.28 CSS - flexbox 정리 (0) 2020.04.25 CSS - 레이아웃의 모든 것 정리 (0) 2020.04.21 CSS - 문법 (0) 2020.03.02