👩🏻💻 완성
👩🏻💻 html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Form Vlidator</title>
</head>
<body>
<!-- .container / '.' : class, '#' : id-->
<div class="container">
<form id="form" class="form">
<h2>Register With Us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter username" />
<small>Error message</small>
</div>
<!-- 특정 단어 shift로 선택 후 ctrl + d 해서 선택 -->
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password</label>
<input
type="password"
id="password2"
placeholder="Enter password again"
/>
<small>Error message</small>
</div>
<button>Submit</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>🏆 What I learned today
거의 대부분 프로젝트를 리액트로 하다보니 자바스크립트의 기본 구현 과정을 알아야할 것 같아서 바닐라 자바스크립트 미니 프로젝트를 시작하게 되었다! 클린코딩이지만, 바닐라 자바스크립트 코드를 하나씩 배워가고 있는 것 같다.
✔️ HTML 태그 - 기본 구조
<html> : HTML이 작용하는 범위를 지정하는 모든 태그를 감싸는 가장 큰 단위의 태그
<head> : HTML 문서의 속성을 지정하기 위한 태그. 타이틀이나 메타 태그 등이 포함
<body> : HTML 문서의 본문 범위를 지정하기 위한 태그
<title> : HTML의 제목을 선언하는 태그
<meta> : HTML의 부가 정보를 선언하는 태그
<link> : 외부 css파일, 파비콘 등을 연결하는 태그
<style> : css 사용
✔️ HTML 태그 - 텍스트 관련
<H[1-6]> : 제목을 표시할 때 사용하는 태그 / h1이 가장 크고, h6이 가장 작음
<p> : 새 문단을 여는 태그
<small> : 텍스트를 조금 더 작게 표시하는 태그
<br> : 문단 내 줄 바꿈하는 태그 / 강제 개행 태그
<hr> : 가로줄을 넣는 태그
✔️ HTML 태그 - 목록 관련
<ul> : 순서 없는 목록을 표시하는 태그
<li> : 목록에서 각 항목을 표시하는 태그
✔️ HTML 태그 - 링크, 이미지 관련
<a> : 하이퍼링크를 생성하는 태그
<img> : 페이지에 이미지를 추가하는 태그
<svg> : 페이지에 svg 형식의 그래픽을 추가하는 태그
✔️ HTML 태그 - 폼 관련
<form> : <input>을 담는 태그
<input> : 입력값을 받는 태그
✔️ HTML 태그 - 레이아웃 태그
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하는 태그
<nav> : 사이트를 안내하는 요소인 상단바를 만드는 태그 / <ul>태그와 보통 같이 사용
<main> : 문서의 주된 콘텐츠를 표시하는 태그 / 두 개 이상은 나오면 안됨!
<article> : 웹 페이지의 내용에 해당하는 태그
<section> : 웹 페이지의 섹션에 해당하는 태그
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 태그
<footer> : 페이지나 해당 파트의 가장 아랫 부분에 위치하는 태그
✔️ HTML 태그 - 프레임
<iframe> : 이미지, 동영상, 지도, 사이트 등을 삽입할 때 사용하는 태그
✔️ HTML 태그 - 그 외
<div> : 박스 또는 레이어, 테이블 태그 대신 레이아웃을 만드는데 많이 사용되는 태그
<span> : <div>의 인라인 버전
<script> : 스크립트 타입을 지정해서 사용하는 태그
✔️ class 속성과 id 속성의 차이
class: 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 사용하는 속성 (그룹화)id: 중복될 수 없으며 전체 페이지에서 단 하나의 요소에만 지정이 가능한 속성 (딱 한개)
