New World
[HTML] 로그인 화면 만들기 #1 본문
안녕하세요, 오랜만에 Languages 로 글을 쓰게 되었습니다.
로그인 화면을 만들어 볼 생각입니다.
차례대로 구글, 네이버, 다음 로그인 버튼, 진입 전 화면들 입니다.
우선 위와 같은 로그인 화면을 만들어 볼 생각입니다.
구글: 로그인 버튼
네이버: 간단한 글귀, 로그인 버튼, 아이디.비밀번호 찾기 버튼, 회원가입 버튼
다음: Daum 아이디로 로그인 버튼, 카카오 계정으로 로그인 버튼, 카카오 QR 코드로 로그인 버튼, 회원가입 버튼
각 화면에서 보이는 걸 나열해보았습니다.
서로 같은 부분도 있고 다른 부분도 있는 걸 확인할 수 있습니다.
공통된 부분부터 차례대로 코드를 작성해보도록 하죠.
로그인 버튼
로그인 버튼을 만들기 전 버튼 코드부터 알아두어야 합니다.
버튼 코드는 <button></button>으로 주로 사용합니다.
하지만, 로그인 버튼은 조금 다릅니다.
로그인 버튼은 <a></a> 코드를 사용해줍니다.
다르게 본다면, 하이퍼링크를 사용해준다는 것과 다른 것이 없죠.
a 태그의 속성 중 하나인 href로 버튼을 눌러 하이퍼링크로 이동해주기 위해 사용한다고 생각해도 될 것 같습니다.
a태그와 관련된 문서는 후에 업로드 할 예정입니다.
버튼 코드만 써주게 된다면 위 사진과 같이 회색 바탕에 로그인 이름만 노출되는 것을 확인할 수 있습니다.
여기에서 [그림 1]과 같이 로그인 버튼을 보여주기 위해서는 CSS 코드가 필요합니다.
CSS 코드를 써주기 위해 <head> 태그 안에 <style> 태그를 넣어주었습니다.
style 코드를 분류시켜주기 위해 #를 사용합니다.
각자의 로그인 버튼과 비슷하게 보이기 위해 CSS 코드를 덧붙여 주었습니다.
이렇게 다른 로그인 버튼들도 CSS 코드만 바꿔주어 만들어 주었습니다.
예를 들어, 구글의 로그인 버튼은 배경색(background-color)은 다저 블루(dodgerblue)를 넣어주었으며 글자색(color)은 하얀색으로 넣어주었습니다.
이러한 CSS 코드에 대한 자세한 사항은 추후 제 블로그에 관련 게시글을 업로드할 예정입니다.
그 다음은 버튼을 눌렀을 때 발생하는 이벤트를 구현하는 것입니다.
이벤트를 구현할 때 HTML에서는 onClick을 사용해줍니다.
하지만 로그인 버튼은 <button> 이 아닌 <a> 를 사용해주기 때문에 a 태그의 속성인 href를 사용해줄 것입니다.
각 사이트에서 가져온 로그인 버튼을 누른 후 나오는 페이지의 URL을 가지고 와서 붙여줍니다.
이후 선택한 링크로 이동되며 로그인 페이지로 넘어오게 됩니다.
'Programming > Languages' 카테고리의 다른 글
| [Ubuntu] 개발 도구 설치 + 깃허브까지 사용해보자! (0) | 2021.11.03 |
|---|---|
| [Ubuntu] 세팅 해보자! (0) | 2021.11.03 |
| [PHP+MySQL+PHPAdmin] 서로 다른 테이블의 속성을 select 하여 json 형식으로 만들기 (0) | 2020.08.08 |
| [JSP 공부 #7] JSTL (0) | 2020.06.30 |
| [JSP 공부 #6] 표현 언어(EL) (0) | 2020.06.30 |
