css
-> 꾸미기
'무엇을 꾸미기 위해선 꾸밀 대상의 명찰을 만들어서
명찰을 불러 주어야함'
style 에서 명찰을 부를때
.명찰 {}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Page Title</title>
<style>
/* cmd+/ 주석 다는법 */
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
*
/* ( * 전체를 전부 다 적용할것이다) */
{
font-family: 'Jua', sans-serif;
}
/* 폰트는 스타일에 넣어주면 됨 */
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
.mytitle {
background-color: red;
width: 300px;
height: 200px;
border-radius: 10px;
/* 테두리 모따기 */
color: white;
text-align: center;
padding: 50px 0px 0px 0px;
/* ( padding 안쪽으로 여백) */
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
/* background 에 이미지 넣는법 tag 3개 줄줄이로 붙음 */
}
.mybtn {
margin: 20px 20px 20px 50px;
/* (margin 바깥쪽으로 여백) */
}
.mytext {
color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p class="mytext">Id : <input type="text" /></p>
<p class="mytext">pw : <input type="text" /></p>
<button class="mybtn"> 로그인 하기 </button>
</div>
</body>
</html>
폰트 넣는법
Import 와 css rule 복사해서
Style 안에 넣어주면 됨
<style>
import
*{css rule}
</style>css 파일 분리 하는 법
안녕하세요. 백엔드 개발자되려구요