wisePocket

[HTML, CSS] 기초적인 로그인 페이지 생성 본문

Python&Flask Tutorials, AWS EB/1st WEEK HTML,CSS

[HTML, CSS] 기초적인 로그인 페이지 생성

ohnyong 2023. 6. 26. 20:21

아이디와 패스워드 input 속성인 type="text"와 type="password"를 활용
추후에 form태그로 감싸고 method 속성을 통해 통신해야 한다.
 
head태그에서 style태그를 통해 클래스, 아이디 등 선택자를 지정하여 다양한 style을 적용 시킬 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mytitle {
color:red;
font-size:40px;
}
.mybtn {
font-size: 12px;
background-color: green;
color: white;
}
.mytxt {
color: green;
}
</style>
</head>
<div>
<h1 class="mytitle">로그인 페이지</h1>
<p class="mytxt">ID : <input type="text"></p>
<p class="mytxt">PASS : <input type="password"></p>
<button class="mybtn">로그인 하기</button>
</div>
</body>
</html>

 

 

해당 스터디는 아래 깃을 통해 업데이트 되고 있습니다.

https://github.com/yzpocket/Sparta99training

 

GitHub - yzpocket/Sparta99training

Contribute to yzpocket/Sparta99training development by creating an account on GitHub.

github.com

 

'Python&Flask Tutorials, AWS EB > 1st WEEK HTML,CSS' 카테고리의 다른 글

[1주차 회고] HTML, CSS, 기초 웹페이지 생성 배운점, 어려웠던점  (0) 2023.07.08
[HTML, CSS] 생각보다 쓸만한 CSS 응용편!  (0) 2023.07.01
[HTML, CSS] Google Fonts 스타일 적용하기  (0) 2023.06.30
[HTML, CSS] CSS 파일 모듈화(파일 분리)  (0) 2023.06.27
'Python&Flask Tutorials, AWS EB/1st WEEK HTML,CSS' Related Articles more