코딩 너무 어려워...근데 재미있긴 해
1. CSS1
Document로그인 페이지
아이디, 비밀번호를 입력해주세요
ID :
PW :
로그인하기<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.mytitle {
width: 300px;
height:200px;
color:white;
text-align: center;
padding-top: 30px;
border-radius: 8px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button> 로그인하기 </button>
</body>
</html><div> <div>: 구역을 나누는 태그- 꾸미기 :
<body>에class="mytitle"명찰을 달아 주고<head>에<style>태그안에 넣어주면 된다. - 내 밖으로의 여백 :
margin/ 안쪽으로의 여백 :padding
2. CSS2
Document1번을 중앙으로 옮기고 싶을때 일단 한번 감싸줘야한다. 그러기 위해선?
👉구역 = <div>감싸준다 그후 중앙으로 이동
가운데로 이동한다?
👉 양쪽의 여백을 동등하게 가져간다.
div는class="wrap"이라는 명찰을 달아준다
로그인 페이지
아이디, 비밀번호를 입력해주세요
ID :
PW :
로그인하기로그인 페이지를 중앙으로 정렬을 해야하는데 background-color : green을 적용했을때 화면 양쪽 여백이 없는걸 볼 수 있다. 중앙으로 옮기고 싶으면 로그인 페이지에 가로 값을 줘서 구역을 좁혀야 한다.
Documentmargin: 50px auto 0px auto;margin 값은 위에서 부터 시계방향으로 위 -> 오른쪽 -> 아래 -> 왼쪽 순
위쪽 마진 50px, 오른쪽은 auto는 끝까지 다민다, 0px 아래는 필요 없어서 0, 왼쪽도 끝까지 다민다 auto
로그인 페이지
아이디, 비밀번호를 입력해주세요
ID :
PW :
로그인하기코딩 너무 재미있당ㅎㅎㅎㅎㅎ 헤헤헿헤헤헤
튜터님 짱짱맨👍
₊·*◟(˶╹̆ꇴ╹̆˵)◜‧*･