5. 자주 쓰이는 CSS 연습하기

앞서 간단한 로그인 페이지를 제작하고 그 페이지에 제가 몇가지 css를 적용하여 나름(?) 예쁘게 꾸며보았는데요!

이번엔 튜터와 함께 아래와 같은 화면을 만들어서

튜터 로그인.png

background-image, background-size, background-position color, width, height, border-radius, margin, padding 등의 자주 쓰이는 CSS를 연습해 보겠습니다!

"로그인 페이지"와 "아이디, 비밀번호를 입력해주세요" 부분을 div로 묶고 배경에 이미지를 넣어주어 간단하게 꾸민거 같죠?

여기서 배경에 이미지를 넣을때!

background-image: url(~)
background-size: ;
background-position: ;

위 세 친구들은 한쌍이라고 생각하세요! 거의 같이 붙어다닌답니다! url에 ~부분에 이미지가 있는 경로 혹은 주소를 넣어주면 되겠죠?

위 사진에서 이미지 위의 글씨들이 가운데에 정렬되어있다는 것을 확인할 수 있는데요!

여기서 필요한 개념 "여백"!

여백에는 두가지 개념이 있어요

margin : 내기준 바깥쪽으로의 여백
padding : 내기준 안쪽으로의 여백

바깥쪽,,? 안쪽,,? 무슨말인지 확실히 보여드릴게요!

<body>
<div class="text">
	<h1 class="title">로그인 페이지</h1>
	<p>아이디, 비밀번호를 입력해주세요</p>
</div>
<div class="login">
	<p>ID: <input type="text" class="login-form"> </p>
	<p>Password: <input type="password" class="login-form"></p>
	<button class="btn_m">로그인하기</button>
	<button class="btn_p">로그인하기</button>
</div>
</body>
--------------------------------------------
<style>
	.btn_m {
      margin: 30px;
    }
  .btn_p {
      padding: 30px;
    }
</style>