코딩 개발일지-2 로그인창 만들기

HTML 로그인창 코드를 만들어보도록 하겠습니다.

우리가 HTML을 배워 최종적으로는 웹사이트를 만들거나 디자인, 유지, 보수 등의 일을 할 수 있습니다.

저는 웹사이트를 만들어보는 것이 목표이기 때문에, 아이디와 비밀번호를 입력할 수 있는 로그인창을 만들어보도록 하겠습니다.

 

 

HTML 로그인 문법

매우 간단하지만 공부하기전에는 몰랐던 내용입니다.

head에는 제목을 넣고, body에는 본문을 넣는다고 지난번에 말씀드렸습니다.

 

구글 홈페이지를 예로 들자면 확실하진 않지만, Google로 보이는 글자가 head에 속하는 것이고, 검색입령 창이나 나머지 내용들이 body에 속한다고 생각하시면 됩니다.

---

그럼 코드를 한 번 볼까요.

body h1>로그인 페이지</h1 p>ID: input type="text"/</p p>PW: input type="text"/</p button>로그인하기</button /body>

지난 포스팅때 html 기본 문법에 작성했었던 h1태그를 이용하여 로그인페이지라는 문장을 작성하겠습니다.

 

여기서 p로 시작하는 것은 문단이고, input로 시작하는 것은 글자 입력창입니다.

문단으로 자리를 잡고 그 자리에 입력창을 작성해주는데 2개를 작성해줍니다.

이유는 로그인할 때 아이디와 비밀번호가 모두 필요하기 때문입니다.

 

위와 같이 작성하고 마지막에는 버튼을 하나 만들어주면됩니다.

바로 아이디와 비밀번호 모두 입력한 뒤 눌러주는 로그인하기 버튼이 되는것입니다.

 

로그인창을 만들때 사이즈와 위치도 잡아줘야하는데 이부분은 div라는 것으로 영역을 잡아주고 거기서 조절하면서 잡아가는 방식입니다.

div를 조만간 다루어 볼 예정입니다.

 

오늘도 이렇게 html에 대해서 조금씩 배웁니다.

아주 작은 내용이고 전체 웹사이트를 보면 아직 배워야 할 내용이 많지만, 올해 안에는 웹페이지 제작도 할 수 있다고 믿고 있습니다.

 

웹사이트 제작에 있어서 AdobeXD 또는 Figma의 디자인 툴도 배워야 하지만, 우선 html부터 모두 배운 뒤 도전해보도록 하겠습니다.

오늘도 읽어주셔서 감사드립니다.

 

 

코딩 개발일지 -1 HTML 기본 내용

코딩 개발일지 -1 HTML 기본 내용