๐ฌClaymorphism ๋ก๊ทธ์ธ ์์ | HTML ๋ฐ CSS
์์ค ์ฝ๋:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Claymorphism Login Form</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="container">
<form action="#">
<h3>Login In</h3>
<div class="inputBox">
<label for="user">Username:</label>
<div class="box">
<div class="icon">
<i class="fa-solid fa-user"></i>
</div>
<input type="text" id="user" name="user">
</div>
</div>
<div class="inputBox">
<label for="password">Password:</label>
<div class="box">
<div class="icon">
<i class="fa-solid fa-lock"></i>
</div>
<input type="password" id="password" name="password">
</div>
</div>
<label> <input type="checkbox">Remember me</label>
<button class="submit">Log in</button><br>
<a href="#" class="forgot">Forget Password?</a>
</form>
</div>
</body>
</html>
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ฌClaymorphism ๋ก๊ทธ์ธ ์์ | HTML ๋ฐ CSS), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/robsonmuniz16/claymorphism-login-form-html-css-28d8ํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค