반응형
HTML CSS 로그인 화면 예제
글. 수알치 오상문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>제목</title>
</head>
<style>
ul { list-style:none;}
li { line-height:50px;}
label {
width:75px;
float:left;
margin: 0px 20px;
}
</style>
<body>
<label> </label><h1>환영합니다!!!</h1>
<form action="#">
<ul>
<li>
<label for="user-id">ID</label>
<input type="text" name="id" id="user-id" required placeholder="아이디 입력...">
</li>
<li>
<label for="user-pw">PASSWORD</label>
<input type="password" name="pw" id="user-pw" required placeholder="비밀번호 입력...">
</li>
<li>
<label> </label>
<input type="submit" value="로그인">
</li>
</ul>
</form>
</body>
</html>
반응형
'HTML, CSS' 카테고리의 다른 글
| 반응형 메인 이미지 만들기 (0) | 2021.10.14 |
|---|---|
| 스르륵 좌우로 나타나는 사이드메뉴 input:checked(checkbox) (0) | 2021.10.10 |
| 반응형 웹 HTML , CSS, 미디어쿼리 @media 예제 (0) | 2021.10.08 |
| HTML / CSS 반응형 웹과 미디어 쿼리(그리드 레이아웃, 플렉스 박스 레이아웃, CSS 그리드 레이아웃) (0) | 2021.10.07 |
| HTML, 자바스크립트(Javascript), 장고(Django) 템플릿 주석(설명문) 비교 (0) | 2021.10.05 |