[HTML, CSS, JS] 회원가입, 로그인 페이지 구현

연·2024년 8월 17일
web

just공부

목록 보기
2/47

웹 페이지 구현하기에 앞서 웹 기초가 거의 없었기 때문에 HTML, CSS, JavaScript를 이번 기회에 제대로 공부할 겸, 과제도 할 겸 시간은 타이트했지만 열심히 해봤다. 그래서 급하게 필요한 문법이라던가, 개념을 정리하며 정리된 코드들을 참고하며 만들었다.
내 배경지식은 1학년 때 인터넷프로그래밍을 듣지 못하고 2학년 때 웹프로그래밍을 들었었는데 힘들어서 한 학기 내내 끌려다닌 정도로, 3-2에는 팀플 과목이 있기 때문에 어느 정도의 웹 공부를 해야겠다고 생각했고 이번이 기회라고 들어서 열심히 했다.

웹해킹 시작 전에 워밍업하는 건데, 웹 어렵다...

아마 css 보면 불필요한 코드가 있을 것 같은데 수정이 필요한 부분은 알려주세요!

공부

HTML

주요 범위 요소

요소설명
<html>HTML 문서의 범위 지정
<head>HTML 문서의 정보 지정
<body>HTML 문서의 구조 지정

메타 데이터 요소

요소설명
<title>브라우저의 제목 표시줄 및 페이지 탭에 보여지는 문서 제목 지정
<base />HTML 문서에 포함된 모든 상대 URL들의 기준 URL을 지정함
- href: 기준 URL
- target: target 속성을 사용하는 요소(<a>)의 기본값
<link />외부 리소스(HTML, CSS, Icon 등)의 연결 및 현재 문서와의 관계 명시
- rel: (필수) 현재 문서와 외부 리소스와의 관계
- href: 외부 리소스의 URL
- type: 외부 리소스의 MIME 타입
<meta />기타 메타데이터 (검색엔진이나 브라우저에 정보 제공)
- charset: 문자 인코딩 방식
- name: 메타 데이터의 이름 (정보의 종류)
- http-equiv: 서버/사용자 에이전트의 작동방식 변경에 대한 지시
- content: name, http-equiv의 값
<style>문서나 문서 일부에 대한 스타일 정보(CSS)를 지정
- type: MIME 타입

콘텐츠 구분 요소

요소설명
<h1> <h2> <h3> <h4> <h5> <h6>문서의 정보 계층 구조화 (Heading)
문서나 구분된 영역의 제목 지정, 문서의 목차
<header>문서의 헤더 지정. 주로 제목, 로고 등을 포함
<footer>문서의 푸터 지정. 주로 작성자, 저작권, 관련 문서 등을 포함
<main>문서의 주 콘텐츠 지정
<section>문서의 일반적인 영역 지정
- Heading 요소 포함하여 식별
<aside>문서의 별도 콘텐츠 지정
- 주로 광고나 기타 링크 등의 사이드바 지정
<nav>다른 페이지 링크를 제공하는 영역 지정 (Navigation)
- 주로 메뉴, 목차, 색인 등 지정
<div>본질적으로 아무것도 나타내지 않는 콘텐츠 영역 지정 (Division)

폼 관련 요소

요소설명
<form>웹 서버에 정보를 제출하기 위한 양식 범위를 정의
- action: 전송한 정보를 처리할 웹페이지의 URL
- autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부
- method: 서버로 전송할 HTTP 방식
- name: 고유한 양식의 이름
- novalidate: 서버로 전송 시 양식 데이터의 유효성을 검사하지 않도록 지정
- target: 서버로 전송 후 응답 받을 방식을 지정
<input />사용자에게 입력 받을 데이터 양식
- autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부
- autofocus: 페이지가 로드될 때 자동으로 포커스
- checked: 양식이 선택되었음을 표시
- form: <form>의 id 속성 값
- list: 참조할 <datalist>의 id 속성 값
- max: 지정 가능한 최대 값
- min: 지정 가능한 최소 값
- maxlength: 입력 가능한 최대 문자 수
- multiple: 둘 이상의 값을 입력할 수 있는지 여부
- name: 양식의 이름
- placeholder: 사용자가 입력할 값의 힌트
- readonly: 수정 불가한 읽기 전용
- src: 이미지의 URL
- alt: 이미지의 대체 텍스트
- type: 입력 받을 데이터의 종류
- value: 양식의 초기 값
- type=button: 일반 버튼
- type=checkbox: 체크박스
- type=color: 색상
- type=email: 이메일
- type=file: 파일
- type=hidden: 보이지 않는 전송할 양식
- type=image: 이미지 제출 버튼
- type=number: 숫자
- type=password: 비밀번호
- type=radio: 라디오 버튼
- type=range: 범위 컨트롤
- type=reset: 초기화
- type=search: 검색
- type=submit: 제출 버튼
- type=tel: 전화번호
- type=text: 일반 텍스트
- type=url: 절대 URL
<label>라벨 가능 요소의 제목(Caption)
- for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함
- for: 참조할 라벨 가능 요소의 id 속성 값
<button>선택 가능한 버튼을 지정
- autofocus: 페이지가 로드될 때 자동으로 포커스
- disable: 버튼 비활성화
- form: <form>의 id 속성 값
- name: 폼 데이터와 함께 전송되는 버튼의 이름
- type: 버튼의 타입
<textarea>여러 줄의 텍스트 양식
- autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부
- autofocus: 페이지가 로드될 때 자동으로 포커스
- disable: 양식 비활성화
- form: <form>의 id 속성 값
- maxlength: 입력 가능한 최대 문자 수
- name: 양식의 이름
- placeholder: 사용자가 입력할 값의 힌트
- readonly: 수정 불가한 읽기 전용
- rows: 양식의 줄 수
<select>드롭다운 목록 지정
- autofocus: 페이지가 로드될 때 자동으로 포커스
- disable: 양식 비활성화
- form: <form>의 id 속성 값
- multiple: 여러 옵션을 선택할 수 있는지 여부
- name: 양식의 이름
- size: 한 번에 보여지는 옵션의 수
<option>드롭다운이나 자동완성 목록의 옵션 지정
- disable: 옵션을 비활성화
- label: 표시될 옵션의 제목
- selected: 옵션이 선택되었음을 표시
- value: 양식으로 제출될 값

전역 속성

모든 HTML 요소에서 공통으로 사용할 수 있음

속성설명
id문서 전체에서 고유한 식별자(identifier, ID)를 정의
class공백으로 구분된 요소의 별칭 지정
style요소에 적용할 CSS를 선언
title요소의 정보(설명) 지정

인라인 텍스트 요소

요소설명
<a>다른 URL로 연결할 수 있는 하이퍼링크 지정 (Anchor)
- 다른 페이지, 같은 페이지 위치(#), 파일, 이메일 주소, 전화번호 등
- download: 이 요소가 리소스를 다운로드하는 용도로 사용됨
- href: 링크 URL
- rel: 현재 문서와 링크 URL의 관계
- target: 링크 URL의 표시 위치
- type: 링크 URL의 MIME 타입
<b>문체가 다른 글자의 범위 지정 (bold)
<mark>하이라이팅할 때 사용
<strong>의미의 중요성 강조 (bold 표시)
<u>밑줄이 있는 글자 지정
- CSS text-decoration: underline; 사용 권장
<br />줄바꿈 지정

내장 콘텐츠 요소, 스크립트 요소

요소설명
<iframe>다른 HTML 페이지를 현재 페이지에 삽입
- name: 프레임의 이름
- src: 포함할 문서의 URL
- width: 프레임의 가로 너비
- height: 프레임의 세로 너비
- frameborder: 프레임 테두리 사용 여부

멀티미디어 요소

요소설명
<img />이미지 삽입
- src: 이미지 URL
- alt: 이미지 대체 텍스트
- width: 이미지 가로 너비
- height: 이미지 세로 너비
<audio>소리 콘텐츠(MP3) 삽입
- autoplay: 준비되면 바로 재생
- controls: 제어 메뉴 표시
- loop: 재생이 끝나면 다시 처음부터 재생
- preload: 페이지가 로드될 때 파일을 로드할지의 지정
- src: 콘텐츠 URL
- muted: 음소거 여부
<video>동영상 콘텐츠(MP4) 삽입
- autoplay: 준비되면 바로 재생
- controls: 제어 메뉴 표시
- loop: 재생이 끝나면 다시 처음부터 재생
- src: 콘텐츠 URL
- muted: 음소거 여부
- poster: 동영상 썸네일 이미지 URL
- width: 동영상 가로 너비
- height: 동영상 세로 너비
<figure>이미지나 삽화, 도표 등의 영역 지정
<figure>
  <img src="milk.jpg" alt="A milk">
  <figcaption>Milk is a nutrient-rich.</figcaption>
</figure>

CSS

CSS 방식

  • in-line 방식: HTML 요소의 style 속성에 직접 작성하는 방식
  • embedded 방식: HTML <style></style> 안에 작성하는 방식
  • link 방식: HTML <link>를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
  • @import 방식: CSS @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
<body> 
  <p style="height:100px; color:blue"> 
</body>
------------------
<head> 
  <style type="text/css"> 
    .logo {color: #eeeeee;} 
  </style> 
</head>
-------------------
<head> 
  <link href="style.css" rel="stylesheet" type="text/css"> 
</head>
-------------------
<head> 
  <style type="text/css"> 
    @import url(style.css); 
  </style> 
</head>

CSS 선택자

  • HTML 요소 선택자 : CSS 적용 대상으로 HTML 요소의 이름 직접 사용

    • h2 { color: teal; text-coration: underline; }

  • id 선택자 : CSS를 적용할 대상으로 특정 요소 선택할 때 사용, 이때 # 사용

    • <input type=”text” id=”userid” value=”id” > //HTML
    • #userid { color:teal; text-decoration: underline; } //CSS

  • class 선택자 : 특정 집단의 여러 요소를 한 번에 선택할 때 사용

    • <input type=”text” class=”userinfo” id=”userid” value=”id” >
    • <input type=”password” class=”userinfo” id=”userpwd” value=”pwd” >
    • <input type=”text” class=”userinfo” id=”usermail” value=”mail” >
    • .userinfo { color: lime; font-size: 25px; }

  • group 선택자 : 여러 선택자를 같이 사용하고자 할 때 사용, 쉼표로 구분하여 연결

  • 전체 선택자 : * 문자를 사용하여 요소 내부의 모든 요소 선택

      • { color=lime; font-size: 25px; }
    • div * { color=black; font-size: 30px; }

CSS 권장 작성 순서

  1. 레이아웃: display, float, position
  2. 박스 모델: width, height, margin, padding, border
  3. 배경: background
  4. 폰트: font, color, text-align, vertical-align

CSS 적용 우선순위

  1. 속성 값 뒤에 !important 를 붙인 속성
  2. HTML에서 style 을 직접 지정한 속성
  3. #id 로 지정한 속성
  4. .class 로 지정한 속성
  5. 태그 이름 (예: body)으로 지정한 속성

CSS 속성

  • display : 속성을 어떻게 보여줄지 결정

    • none: 노출되지 않게 설정
    • block: 가로 한 블록 전체 사용
    • inline: 가로 한 줄에 노출되도록 사용
    • inline-block: 블록과 인라인의 중간

    • flex-box : display 속성 중 하나, display:flex 작성 후 아래 속성 값 사용 가능

      • flex-direction: 항목을 스택하려는 방향 정의
      • row: 기본값, 가로
      • row-reverse: 가로 역순
      • column: 세로
      • column-reverse: 세로 역순
      • flex-wrap: 플렉스 항목을 래핑할지 여부
      • wrap: 플렉스 항목이 래핑되도록
      • nowrap: 기본값
      • wrap-reverse: 래핑 역순
      • justify-content: 플렉스 항목 정렬
      • center: 가운데 정렬
      • flex-start: 컨테이너 시작 부분 정렬
      • flex-end: 컨테이너 끝 정렬
      • space-around: 공백이 있는 일정 간격에 맞게 정렬
      • space-between: 공백 없이 일정 간격에 맞게 정렬
      • align-items: 플렉스 항목 정렬
      • stretch: 기본값, 항목을 확장하여 컨테이너 채움
      • center: 컨테이너 중간 부분 정렬
      • flex-start, flex-end: 컨테이너 시작/끝 부분에 정렬
      • baseline: 기준선과 같은 라인에 정렬

  • position : 태그를 어떻게 위치시킬지를 정의
    -static: 기본값, 다른 태그와의 관계에 의해 자동 배치

    • absolute: 절대 좌표와 함께 위치 지정
    • relative: 원래 있던 위치를 기준으로 좌표 지정
    • fixed: 스크롤과 상관없이 좌표 고정
    • inherit: 부모 태그의 속성 값을 그대로 상속

  • margin = 바깥쪽 여백 / padding = 안쪽 여백

    • 방향 지정 가능, px, auto 등의 값으로 설정, 위쪽/오른쪽/아래쪽/왼쪽 설정 가능
     margin: 8px; /* 상하좌우 모두 8px 여백 */
  margin-top, margin-bottom, margin-left, margin-right;

  • border: 태그의 테두리

    border-width: 테두리의 두께;
 border-style: 테두리의 스타일 (solid, dotted 등);
 border-color: 테두리 색상;
 border-top, border-bottom, border-left, border-right;
 border: 1px solid #eeeeee;
 border-bottom: 3px solid gray;

  • background : 배경 지정

    background-color: black; /* 배경색 */
 background-image: url(”pic.png”); /* 배경 이미지 */
 background-repeat: repeat-x; /* 배경이미지 반복 여부 (x=가로, y=세로, no=반복X) */
 background-position: 배경 이미지 위치;

  • font : 글자의 폰트

    font-style: 글자 스타일;
font-weight: 글자 두께;
font-size: 글자 크기;
line-height: 줄 간격;
font-family: 글꼴 설정;
font-variant: 글꼴 변경 (소문자를 대문자로 등);

  • color : 글자 색상

  • text-align : 텍스트의 정렬 방향 지정

    • left: 왼쪽 정렬
    • right: 오른쪽 정렬
    • center: 중앙 정렬
    • justify: 양쪽 정렬

  • @media : CSS3에 도입된 기술인 미디어 쿼리, 특정 조건이 true인 경우에만 CSS 속성 포함

    @media only screen and (max-width:80px){
/* CSS 작성 */
/* 가로 사이즈가 80px가 되면 해당 CSS 적용 */
}

JavaScript

설명

  • 동적인 기능을 추가할 수 있음

  • 주석은 //, /* */

    프로그래밍 기능

    애플리케이션 프로그래밍 인터페이스(API)

  1. 브라우저 API : 웹 브라우저에 내장되어 있음
    • DOM (Document Object Model) API : HTML과 CSS를 조작하여 HTML을 생성, 제거 및 변경하고 페이지에 새 스타일을 동적으로 적용하는 등의 작업 수행.
    • Geolocation API : 지리정보를 가져올 수 있음
    • Canvas, WebGL API : 애니메이션 2D 및 3D 그래픽 생성 가능
  2. 3rd Party API : 기본적으로 브라우저에 내장되어 있지 않음
    • Twitter API
    • Google 지도 API 등

인터프리터

  • 코드가 위에서 아래로 실행되고 코드 실행 결과가 즉시 반환됨.

서버 사이드 코드

  • 서버에서 실행되고 그 결과가 다운로드되어 브라우저에 표시됨

JavaScript 실행

  • 내부 JavaScript 실행 시, HTML 안에서 <script> 요소 사용
  • 외부 JavaScript 실행 시, 파일 확장자는 .js
    • <script> 요소를 <script src=”script.js” defer></script> 로 대체

JS의 선택자

  1. 태그 선택자

    document.getElementsByTagName(태그명)[순서];
    • 같은 이름으로 여러 개 생성 가능
    • 태그명을 넣을 때 'div' 이런 구조
    • 순서는 index 0부터 시작

  2. 클래스 선택자

    document.getElementsByClassName(클래스명)[순서];
    • 같은 이름으로 여러 개 생성 가능
    • 클래스명과 순서는 태그와 동일

  3. 아이디 선택자

    document.getElementById(아이디명);

출력문

  • window.alert() 메소드
    • 별도의 대화 상자
    • alert("내용");
  • document.write() 메소드
    • 웹페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 출력
    • 대부분 테스트나 디버깅 위해 사용
    • HTML에 텍스트를 넣어준 것처럼 보임
  • console.log() 메소드
    • 콘솔을 통해 데이터 출력
  • HTML DOM 요소를 이용한 innerHTML property

변수

  • 변수의 선언 방법에는 3가지 존재 (var, let, const)

  • var : 함수 스코프

  • let, const : 블록 스코프

  • 스코프

    변수를 사용할 수 있는 범위

    • 전역 변수 : 모든 곳에서 사용 가능
    • 지역 변수 : { } 안에서만 사용 가능

  • let, const는 이미 존재하는 변수의 이름을 또 선언하면 에러

  • var, let은 변수 선언시 초기값 없어도 됨

  • var, let은 값을 다시 할당 가능, const는 한 번 할당한 값은 변경 불가(상수나 마찬가지)

    변수 선언 식별자

  • 이름에는 문자, 숫자, 밑줄 및 달러 기호 포함 가능

  • 이름은 문자, $, _로 시작

  • 대소문자 구분

  • 예약어는 사용 불가

    변수의 데이터 타입

  • 기본 타입 : boolean, null, undefined, number, string, symbol

  • 객체 타입 : object, array, function

  • 배열의 선언

    • 대괄호를 사용 var arr = [ '1', 2, 'Hello' ];
    • Array() 생성자 함수로 배열을 만드는 방법

  • 객체의 선언

    • 중괄호({}) 사용 - 객체 리터럴 방식 let obj = { name : '홍길동', age : 21 };
    • Object() 생성자 함수로 객체 생성

함수

  • 앞에 function을 써주고 용도에 맞는 함수명을 지어줌
  • 매개변수는 필요하면 사용, 굳이 사용안해도 됨, 데이터타입을 적지 않아도 됨
  • return값은 반환값 없을 땐, return; 하면 됨

함수 표현식 예시 

let 함수명 = function () { 수 내용 return; }

함수 호출 예시

let fnc = (a, b) => a+b;
fnc(1, 2);

웹페이지 구현

결과물

login.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>로그인</title>
        <link rel="stylesheet" href="style.css">
        <script src="action.js"></script>
    </head>
    <body>
        <div class="center">
            <div class="Login"> Login </div>
            <br>
            <div>
                <form onsubmit="return handleLogin()">
                    <input type="text" class="text-field" id="userid" placeholder="ID">
                    <input type="password" class="text-field" id="userpwd" placeholder="password">
                    <br>
                    <input type="submit" value="Login" class="submit-btn">
                </form>
                <div class="links">
                    <a href="signup.html">Sign up</a>
                </div>
            </div>
        </div>
    </body>
</html>

signup.html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>회원가입</title>
      <link rel="stylesheet" href="style.css">
      <script src="action.js"></script>
  </head>
  <body>
      <div class="center">
          <div class="signup">Sign Up</div>
          <form onsubmit="return handleSignup()">
              <input type="text" class="text-field" id="userid" placeholder="ID">
              <input type="password" class="text-field" id="userpwd" placeholder="password">
              <input type="password" class="text-field" id="userpwd_confirm" placeholder="check password">
              <br><br>
              <input type="text" class="text-field" id="username" placeholder="Name">
              <input type="email" class="text-field" id="usermail" placeholder="email">
              <input type="submit" value="Sign Up" class="submit-btn">
          </form>
      </div>
  </body> 
</html>

main.html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>Main</title>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <div class="mainheader">Welcome!</div>
  </body>
</html>

action.js

function handleSignup() {
  // 입력된 값을 가져옴
  const userid = document.getElementById('userid').value;
  const userpwd = document.getElementById('userpwd').value;
  const userpwd_confirm = document.getElementById('userpwd_confirm').value;
  const username = document.getElementById('username').value;
  const usermail = document.getElementById('usermail').value;

  // 모든 필드가 채워졌는지 확인
  if (!userid || !userpwd || !userpwd_confirm || !username || !usermail) {
      alert('모든 항목을 채워주세요.');
      return false;
  }

  // 비밀번호 확인이 맞는지 체크
  if (userpwd !== userpwd_confirm) {
      alert('비밀번호가 일치하지 않습니다.');
      return false;
  }

  // login.html로 이동
  alert("Success!")
  window.location.href = 'login.html';
  return false; // 폼이 실제로 제출되지 않도록
}
function handleLogin(){
  alert("Success!");

  window.location.href='main.html';
  
  return false;
}

style.css

 *{
   box-sizing: border-box;
}
.mainheader{
   width:100%;
   top:10px;
   position:relative;
   margin: auto;
   background-color:lightblue;
   text-align: center;
   font-size:50px;
   font-weight:bold;
}
.center{
   width:300px;
   top:200px;
   position:relative;
   padding:20px;
   margin: auto;
   border:0;
   border-radius: 5px;
   background-color:lightblue;
}
.Login{
   font-size: 30px;
   font-weight: bold;
   text-align: center;
}
.signup{
   font-size: 30px;
   font-weight: bold;
   text-align: center;
   padding-bottom:20px;
}
.text-field{
   font-size:14px;
   margin-bottom:10px;
   border:none;
   border-radius: 5px;
   padding:10px;
   width:100%;
}
.submit-btn{
   font-size: 14px;
   margin-bottom:10px;
   padding:10px;
   border:none;
   border-radius: 5px;
   width:100%;
}
.links{
   text-align: center;
}

참고

profile
연
Whatever I want | Interested in DFIR, Security, Infra, Cloud
이전 포스트

크롤링, 모니터링 도구 조사

다음 포스트

[PHP] 개념, 개발 환경 세팅

0개의 댓글