뱁 새 |ૂ•ᴗ•⸝⸝)” [1127282] · MS 2022 · 쪽지

2023-12-11 12:45:41
조회수 5,470

코린이의 로그인 페이지 만들기 (1)

게시글 주소: https://orbi.kr/00065770524

안녕하세요 뱁새입니다 (۶•<•)۶❗️


오늘부터 저의 코딩 공부 과정을 남기기 위해

게시글을 작성해볼 예정입니다


그럼 시작해볼까요?


1st. html로 로그인 페이지의 뼈대 만들기



로그인 페이지의 뼈대입니다


여기서 아이디와 비밀번호 입력칸에 placeholder 속성을 사용해 아무것도 입력을 하지 않는 상태에서는

"아이디", "비밀번호" 라는 문구가 뜨도록 하였습니다


또한 저는 css와 js를 분리하여 사용하므로 이 아이들이 html과 연결되도록 하기 위해서

<link rel="stylesheet" href="login.css"> 그리고 <sc/2 src="login.js"></sc/2> 를 작성해주었습니다




2nd. css로 로그인 페이지 꾸미기



html이 뼈대를 담당했다면 css는 꾸미기를 담당합니다


여기서 로그인 페이지 전체에 적용해줄 글꼴을 삽입하고

각각에 적용할 내용들을 입력해주었습니다


사실 저는 꾸미기 감각이 없어서 구글을 서치해 제 마음에 드는 것으로 코드를 긁어와 약간씩 변형하였습니다




페이지 완성



굿 




다음 글에서는 로그인 페이지에 자바스크립트를 활용해 간단한 로그인 기능을 구현하는 과정을 업로드해보겠습니다


코린이 파이팅

rare-더 귀여운 비둘기

0 XDK (+0)

  1. 유익한 글을 읽었다면 작성자에게 XDK를 선물하세요.