위와 같은 화면을 만들어보자
우선
로그인페이지
아이디, 비밀번호를 입력해주세요
라는 애둘을 묶어줘야겠다
묶어주는건 <div></div>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
아 mytitle 저 묶음이 보여지게 style에서 background-color : green; 을 줬다.
출력하면
이렇게 나온다.
그럼 이제 저 칸길이를 조절해주자.
<style>
.mytitle {
background-color : green;
width : 300px;
height : 200px;
}
</style>
됐다.
그럼 이제 글씨 색은 하얀색으로 해보자
color : white;
이제 저 글씨 친구들을 가운데 오게 해야한다.
가운데 정렬!?
text-align : center;
넣어줬다.
이제 남은건 저 글씨를 가운데로 내려주고 배경을 깔아준 뒤 둥글게 처리해야한다.
background-image : url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size : cover;
background-position : center;
border-radius : 10px;
위에 3개는 항상 같이 붙어다닌다.
마지막 border-radius 는 끝선을 둥글게 처리해주는 명령어다.
자 이제 마지막으로 글간격을 내려주자.
여기서 부가적으로 설명을 좀 더 붙이자면, margin 이라는 아이와 padding이라는 애가 있는데
이 차이를 지금 보여주겠다.
margin
원래 있던 로그인 버튼에 margin을 줘보자
기존 로그인 하기 버튼이다.
마진을 주면
이런식으로 밀어낸거를 확인할 수 있다.
Padding
패딩을 줘보자.
아
차이를 알겠다
쉽게 생각하면 margin 은 바깥쪽 여백, padding은 안쪽 여백으로 생각하면 수월하겠다.
그럼 위에 상황처럼 글자를 내려야 하니 안쪽 여백을 사용하면 되지 않겠는가?
padding 을 mytitle에 넣어보자 대신에 위쪽 안쪽 여백만 줄것이니
padding-top : 40px;
로 넣어주자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<style>
.mytitle {
background-color : green;
width : 300px;
height : 200px;
color : white;
text-align : center;
background-image : url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size : cover;
background-position : center;
border-radius : 10px;
padding-top : 40px;
}
.mybtn {
/*padding : 20px 20px 20px 20px;*/
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button class="mybtn">로그인하기</button>
</body>
</html>
완성
여기서 추가적으로 하나만 더 해보자 저 로그인 페이지 전체를 가운데 정렬 해볼까?
.all {
background-color : green;
width : 300px;
margin : auto;
}
all로 div를 한번 더 묶어주자
그런다음
background-color : green;으로 색깔 한번 칠해주고 얼마나 묶이는지 판단해보자
width는 아까 창의 width 준만큼 주고
margin을 auto로 명령해주면?
짜잔 가운대로 왔다.
끝
'📁 𝐡𝐭𝐦𝐥 & 𝐜𝐬𝐬 > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 부트스트랩 써보기 (2) | 2023.01.10 |
|---|---|
| [HTML & CSS] 폰트, 주석, 파일분리 (2) | 2023.01.10 |
| [HTML & CSS] CSS 기초 (0) | 2023.01.10 |
| [HTML & CSS] 간단한 로그인 페이지 만들어보기 (0) | 2023.01.10 |
| [HTML & CSS] 기본 내용 (0) | 2023.01.10 |
