일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- nginx
- 숙제
- 위키백과
- cors
- 비동기
- 트랜잭션
- 개발일지
- 부트스트랩
- 노드 윈스턴
- 1주차
- 3주차
- MongoDB
- 웹 스크래핑(크롤링)
- 스파르타코딩클럽
- Node.js
- Get
- JWT
- 항해99
- SQL
- 4주차
- NoSQL
- post
- db
- OpenAPI
- HTTPS
- 5주차
- Sequelize
- 2주차
- Transaction
- node winston
- Today
- Total
얼음꽃의 일지
간단한 로그인 페이지 만들기 본문
그림과 같이 간단한 로그인 페이지를 만드는걸 첫 스타트로 배웠습니다.
딱 형태로 봤을때는
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>으로 묶여있습니다. 나중에 이 버튼을 다른곳에 연결할 수 있을거라는 느낌이 드네요.
'웹개발 개발일지 > 1주차' 카테고리의 다른 글
부트 스트랩을 추가 이용해보자! (0) | 2022.08.30 |
---|---|
폰트, 부트스트랩을 이용한 웹페이지 (0) | 2022.08.30 |
로그인 페이지에 변화 주기 (0) | 2022.08.30 |
웹페이지 배우기 앞서 어떤 형식일까? (0) | 2022.08.30 |
HTML, CSS, JavaScript이란? (0) | 2022.08.30 |