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

얼음꽃 ㅣ 2022. 8. 30. 12:50

728x90

그림과 같이 간단한 로그인 페이지를 만드는걸 첫 스타트로 배웠습니다.

딱 형태로 봤을때는

1. 로그인 페이지라는 제목

2. ID, PW가 들어갈수 있는 입력 창

3. 입력창에 입력이 끝나고나서 누를수 있는 로그인 버튼

이렇게 3가지로 나눠서 볼 수 있을 거 같습니다.

다음 코드를 보시게 되면

<title>로그인페이지</title> 이 부분은 저희가 웹페이지를 켰을때 제목 상태창에 나타나는 부분입니다.

예를 들어 네이버를 켜시게 되면 탭 창에

이런 형태를 많이 보실수 있습니다. 이게 title에 해당하는 부분이기도 합니다.

이 타이틀은 웹페이지를 봤을때 맨 위 즉, 머리 부분이기 때문에 <head></head> 부분에 들어가신 것을 보실수 있습니다.

참고로 html 파일에서 <></> 이런 형태를 자주 보시게 될텐데 <> 이 부분은 열어주는 부분, </> 이 부분은 닫아주는 부분으로 항상 짝지어서 다닌다고 생각하시면 됩니다.

그림에서 진한 검은색으로 나타낸 로그인 페이지를 보시게되면

<body> 부분에 <h1>로그인 페이지</h1>이라고 적혀있는걸 보실 수 있는데요

여기서 h다음에 나온 숫자가 커지면 커질수록 글씨 크기가 작아진다고 보시면 됩니다. 예를 들어보면

<h1>부터 <h6>까지 있으며 숫자가 커질수록 크기가 작아지는 것을 볼 수 있습니다.

글씨 크기를 조정하는 느낌이죠.

다음은 ID, PW를 넣은 부분을 보시면 <p></p>로 묶여있고 그안에 <input type="text">가 있습니다.

p같은 경우는 문단을 묶어서 쓰는 경우라 생각하시면 편하시고, 그림에서 ID, PW 옆에 네모칸 상자가 있었던거 기억하시나요? 그 부분을 나타낸게 input 입니다. 여기서 type을 어떤걸 주냐에 따라 그 안에 넣는 방식이 달라질수가 있어요.

마지막으로 button은 알기 쉽게 <button></button>으로 묶여있습니다. 나중에 이 버튼을 다른곳에 연결할 수 있을거라는 느낌이 드네요.

728x90

얼음꽃의 일지