<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Hello, artists!</p>
</body>
</html>
<!DOCTYPE html> : HTML 문서를 읽을 때, 이 문서는 HTML 문서이고 어떤 버전을 사용했으며 그 버전에 맞는 방법으로 해석하라고 브라우저에게 알려주는 선언문.
<html>: HTML이 작용하는 범위를 지정하는 태그로 위의 DTD를 제외한 전체를 이 태그로 둘러싼다.
<head>: HTML 문서의 속성 범위를 지정하기 위한 태그이다. 이 태그 안에 타이틀이나 메타 태그 등을 넣는다.
<body>: HTML 문서의 본문 범위를 지정하기 위한 태그이다. 표시될 문서의 레이아웃을 이 태그 안에 넣으면 된다.
<a>: 링크 넣는거. Next.js의 <Link>랑 비슷하다. <a href="naver.com">네이버</a>
<img>: 이미지 넣는거. Next.js의 <Image>랑 비슷하다. <img src="파일경로" alt="대체텍스트" width="픽셀단위">
<form>: 입력값을 받는 영역을 지정한다. 한 페이지에 여러 개가 들어갈 수는 있지만, 영역 안에 영역이 들어가는 것은 불가능하다.
<input>: 입력값 요소를 지정한다. type에 따라 다른 입력값을 취한다.
<form action="/submit" method="POST">
<!-- 텍스트 입력 -->
<div>
<label for="username">아이디:</label>
<input type="text" id="username" name="username" required />
</div>
<!-- 비밀번호 입력 -->
<div>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required />
</div>
<!-- 이메일 입력 -->
<div>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" />
</div>
<!-- 숫자 입력 -->
<div>
<label for="age">나이:</label>
<input type="number" id="age" name="age" min="0" max="120" />
</div>
<!-- 체크박스 (복수 선택 가능) -->
<div>
<label>
<input type="checkbox" name="agreeTerms" />
약관에 동의합니다
</label>
</div>
<!-- 라디오 버튼 (단일 선택) -->
<div>
<p>성별:</p>
<label>
<input type="radio" name="gender" value="male" />
남성
</label>
<label>
<input type="radio" name="gender" value="female" />
여성
</label>
</div>
<!-- 파일 업로드 -->
<div>
<label for="profile">프로필 사진:</label>
<input type="file" id="profile" name="profile" />
</div>
<!-- 숨겨진 데이터 (사용자는 못 봄) -->
<input type="hidden" name="userType" value="basic" />
<!-- 제출 버튼 -->
<div>
<input type="submit" value="회원가입" />
</div>
</form>
<textarea>: 여러 줄의 문자열 값을 받는다.
<button>: <input type="button">와 대동소이하다. 차이점은 태그 내에도 HTML 지정이 가능해서 표현의 폭이 넓다. type="submit"을 쓰면 <input type="submit">과 같은 기능을 한다.
<output>: input 태그처럼 입력값이지만 문자열이라서 수정할 수 없다.
<datalist>: 검색어에 들어갈 목록을 지정한다.
<select>: 선택 목록.
<option>: 선택 목록에 들어갈 항목. <input type="radio">와 대동소이하다.
<fieldset>: 폼 요소를 그룹으로 묶어준다. 브라우저에는 이 태그 시작부터 끝까지의 모든 요소를 사각형 박스 안에 묶는 방식으로 렌더링된다.
<legend>: 나는 전설이다 <fieldset>으로 묶어준 그룹에 제목을 지정해 준다. 브라우저에서는 사각형 박스 왼쪽 상단에 나타난다.
<label>: 해당 요소의 이름을 지정한다. 해당 이름을 클릭하면 요소가 자동으로 선택된다.
자세한 건 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input 여기서 참고할 것
'코딩' 카테고리의 다른 글
| Adobe 웹사이트 클론 코딩 - 이미지와 텍스트 (0) | 2025.07.25 |
|---|---|
| HTML JS CSS에서의 media query (0) | 2025.07.24 |
| 5월을 돌아보며........ (1) | 2025.05.30 |
| 스크롤 속도를 컴포넌트마다 다르게 하는 법 (0) | 2025.03.20 |
| props를 하위 컴포넌트에서 상위 컴포넌트로 보내는 방법 (0) | 2025.03.10 |
댓글