얼음꽃의 일지

로그인 페이지에 변화 주기 본문

웹개발 개발일지/1주차

로그인 페이지에 변화 주기

얼음꽃 2022. 8. 30. 13:43
728x90

이전에 만들었던 로그인 페이지에 변화를 주려고 합니다.

 

https://iceflower.tistory.com/3

 

간단한 로그인 페이지 만들기

그림과 같이 간단한 로그인 페이지를 만드는걸 첫 스타트로 배웠습니다. 딱 형태로 봤을때는 1. 로그인 페이지라는 제목 2. ID, PW가 들어갈수 있는 입력 창 3. 입력창에 입력이 끝나고나서 누를수

iceflower.tistory.com

아직 못보신 분들이 계시다면 위의 글 한번 읽어보시면 되겠습니다.

 

이전에 만들었던 웹페이지 형태를 다시 가져오면

 

간단한 로그인 페이지

이런 모양이었습니다. 이제 여기에 변화를 주려고 하는데요. 이런 형식으로 주려고 합니다.

 

로그인 페이지 변화주기

 

차근차근 하나씩 설명을 부과하면서 말씀드리자면

 

코드를 설명하기에 앞서 <div></div>가 무엇인지 알려드리겠습니다.

 

이전에 <p></p>라는 것을 보셨을텐데요. p를 설명할때 문단을 묶어주는 형태라고 생각하면 쉽다고 말씀드렸는데요.

 

<div></div>는 박스 형태로 묶는다고 생각하시면 조금 쉽습니다.

 

div 설명을 위한 그림

그림을 보시면 큰 빨간 div안에 초록 div파란 div가 있습니다. 빨간 div의 CSS를 건들게되면 파랑, 초록 div도 변화를 받게 됩니다. 반대로 파랑이나 초록 div가 각각 변화를 줘도 빨간 div 혹은 서로에게는 변화를 줄 수 없습니다. 이래서 박스 형태라고 보시면 되겠습니다.

 

변화 주기에 앞서 div로 먼저 묶어서 나눠서 보여드리면 다음과 같습니다.

 

div 묶은 형태

먼저 class를 준 이유는 나중에 CSS를 주기 위해서 부여한 것이라고 보시면 됩니다.

 

그리고 class="wrap" 이라는 큰 박스안에 class="mytitle" 이라는 박스가 존재하시는걸 볼 수 있습니다.

 

class="wrap" 으로 묶은 이유는 웹페이지 가운데에 위치하게끔 만들기 위해서 묶은 것이고,

 

class="mytitle" 으로 묶은 이유는 위의 그림(로그인 페이지 변화주기)처럼 사진과 글씨 색상, 여백 등을 조절 하기 위해서 묶었습니다.

 

mytitle 부분부터 코드를 보여드리면 이렇습니다.

(사진은 인터넷 가셔서 저작권에 걸리지 않는 사진을 찾아 오른쪽 마우스 클릭 - 이미지 주소 복사 하시면 됩니다. )

 

class="mytitle" CSS 부분

코드 의미
background-image 배경에 사진 삽입
background-size 배경 사이즈
bakcground-position 배경 위치
width 가로
height 세로
color 글씨 색깔 ( 배경색은 background-color 입니다. )
text-align 글씨 정렬
border-radius 모서리(귀퉁이) 둥근 정도

위의 사용된 코드들을 표로 만들어 쉽게 볼 수 있게 하였으니 참고하시기 바랍니다.

 

background에 사진을 집어 넣게 되는 경우 background-image, size, position 이 3코드는 항상 붙어다니는 코드라고 생각하시면 됩니다.

 

wrap부분의 코드를 보여드리면 이렇습니다.

 

class="wrap" CSS 부분

어떻게 묶여있는지 보여드리기 위해 background 컬러를 넣은 것이므로 굳이 따라 하실필요는 없습니다.

 

새로운 코드인 margin이 나왔는데요 margin과 함께 padding도 같이 설명하겠습니다.

 

코드 의미
margin 바깥 여백
padding 안쪽 여백

표에 나온 거 처럼 margin은 택배 상자 밖의 여백을 의미하는것이고 , padding은 택배 상자 안의 여백을 의미한다고 보시면 되겠습니다. 

 

wrap에서 width을 주고 margin을 준 이유는 width가 설정이 안되어있으면 크기가 100%로 보이기때문에 변화가 보이지 않습니다. 따라서 크기를 정해주고 margin: auto를 주게되면 가운데 정렬 즉, 왼쪽과 오른쪽 여백이 똑같아 지게 됩니다.

 

<button>을 보시게 되면 class="mybtn" 이 주어져있는데요 이건 버튼 주위의 여백 즉 바깥 여백을 주기 위해서 그렇습니다.

 

class="mybtn" CSS 부분

 margin : 20px 이 의미하는것은 margin : 20px, 20px, 20px, 20px 과 같은 의미 이고

 

이건 margin : 위 여백, 오른쪽 여백, 아래 여백, 왼쪽 여백 (시계방향) 을 의미한다고 보시면 되겠습니다. 

 

마지막으로 전체 코드를 올려두겠습니다.

 

전체코드

728x90