working_helen
[HTML] 기본 태그 / 회원가입 폼 실습 본문
강의명 : 제임스코딩 풀스택 개발 입문 5주 완성
목차 : 섹션 2 HTML
1. HTML vs CSS vs JS
2. HTML 주요 태그
3. 회원가입 폼 만들기 실습
1. HTML vs CSS vs JS
- HTML : 웹 사이트 언어의 코드를 통해 브라우저가 이해할 수 있는 언어로 웹을 디자인
= 웹에 포함되는 컨텐츠를 설계하는 언어 = 웹 전체적인 몸체 설계하는 역할 - CSS : 웹 디자인을 담당하는 언어 = 몸체를 꾸미는 역할
- JS : 동적 컨트롤이 가능하게 해주는 언어 = 웹을 동적으로 만들어주는 역할
(위키백과) 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.
2. HTML 주요 태그
<태그 attribute>내용</태그>
1) 글자
- <h1>부터 <h6>까지
- 가장 글자 크기가 큰 HTML tag는 <h1>
<h1>사이즈 1 제목</h1>
<h2>사이즈 2 제목</h2>
<h3>사이즈 3 제목</h3>
일반 글자 크기
2) <li> 리스트 태그
- <ol>, <ul> 안에서 사용
- <ol> : orderd list, 숫자 주석
- <ul> : unorderd list, 일반 주석
<ol>
<li>Neil Armstrong</li>
<li>Alan Bean</li>
<li>Peter Conrad</li>
<li>Edgar Mitchell</li>
<li>Alan Shepard</li>
</ol>
<ul>
<li>Neil Armstrong</li>
<li>Alan Bean</li>
<li>Peter Conrad</li>
<li>Edgar Mitchell</li>
<li>Alan Shepard</li>
</ul>
3) <a> 태그
<a href="하이퍼링크 주소"></a>
(MDN) 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.
<ul>
<li><a href="mailto:m.bluth@example.com">Email</a></li>
<li><a href="haewon">Instagram/a></li>
</ul>
4) <img> 태그
<img src="이미지 경로 or url"/>
(MDN) src 특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정합니다.
<img src="이미지 경로 or url"/>
<img scr="이미지 경로 or url" alt="대체문" width="가로" heigt="세로"/>
- alt : alternative, 이미지가 표시되지 않을 때 화면에 표시할 대체 문구
- 가로 세로 길이는 px 단위로 지정 or 전체 화면에 대한 %로 지정
5) p 태그, br 태그
<p> 하나의 문단 </p>
<br> 줄바꿈
<p>
여기가 1문단
</p>
<p>
여기가 2문단
같은 문단 내에선 띄어쓰기 되지 않음
<br> 띄어쓰기 하고 싶으면 br 태그 쓰기
</p>
6) <div> 태그
사각형 영역을 가지는, 하나의 문서 그룹을 생성
(MDN) "순수한" 컨테이너로서 <div>요소는 본질적으로 어떤 것도 나타내지 않습니다. 대신, 'class' 또는 'id' 속성을 사용하여 쉽게 스타일을 지정할 수 있도록 콘텐츠를 그룹화하고, 문서의 섹션을 다른 언어로 작성된 것으로 표시하는 등의 작업을 수행할 수 있습니다.
7) input 태그
- 사용자로부터 입력을 받는, 사용자 인터페이스 상자를 만드는 태그
- type 종류가 매우 다양하며 필요한 것을 적절히 선택해서 사용
- submit(button), radio, checkbox, select, label
- textarea, text
<input type="입력 type" name="username">
## 버튼 생성 2가지 방법
<input type="submit" value="button 1"/>
<button type="button"> button 2 </button>
## 입력창 생성 2가지 방법
<input type="textarea" size="20"/>
<textarea rows="5" cols="30"></textarea>
- name : 같은 username을 사용해서 input element들을 그룹화
- placeholder : input 영역에 표시될 default 형태 지정
- value : input element에 표시할 라벨
8) label 태그
- 사용자 인터페이스 input 태그에 대해, caption을 나타내는 태그
- input에 id 속성과, label의 for 속성에 해당 id 이름을 동일하게 만들어 label과 input 태그를 연결
(MDN) 사용자 인터페이스 항목의 설명, <label> 을 <input> 요소와 연관시키려면, <input> 에 id 속성을 넣어야합니다. 그런 다음 <label> 에 id 와 같은 값의 for 속성을 넣어야합니다.
<label for = "이름">
<input id = "동일한 이름>
9) form 태그
- 여러 user input 태그 전체를 포함하는 container 역할의 태그
- 여러 input element들을 동시에 통제 가능 + input으로 입력된 모든 데이터를 한번에 웹서버에 전송 가능
<form name="form의 이름" action="전송 서버 위치" 등등>
여러개의 <input 태그>
</form>
10) span 태그
- 특별한 기능 없이, 주로 구문에 'id'나 'class'와 같은 특성을 부여하기 위해 사용
ex) style을 부여하기 위해 CSS와 함께 사용
- <div> 태그와 달리 줄바꿈이 되지 않는 인라인 display 특성을 가짐
(MDN) <span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. <span>은 인라인 요소입니다.
<p>
Add the <span class="ingredient">basil</span>, <span class="ingredient">pine nuts</span> and
<span class="ingredient">garlic</span> to a blender and blend into a paste.
</p>// ingredient class 원소들 style 지정
span.ingredient {
color: #f00;
}
11) table 태그
- <tr> : 행 지정
- <td> : 열 지정
- <th> : table header 지정
- <th>와 <td>는 <th>의 하위 tag 위치에서 사용
- <th>를 쓰면 항목명을 의미하고, <td>를 쓰면 해당 항목의 구체적인 값을 의미
<table>
<tr>
## 항목명
<th>Number</th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<th>1</th> ## 1은 항목명
<td>민아</td>
<td>여성</td>
</tr>
<tr>
<th>2</th> ## 2는 항목명
<td>민수</td>
<td>남성</td>
</tr>
</table>
3. 회원가입 폼 만들기 실습
- 다양한 type의 <label> - <input> 태그 생성
- <fieldset>, <legend>, <textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haewon</title>
<link
rel="shortcut icon"
href = "웹페이지 아이콘 사진 경로"
type="image/x-icon">
<style>
fieldset {
width : 500px;
padding : 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>회원가입 신청서</legend>
<label for="name">이름 : </label>
<input type="text" id="name" />
<br>
<label for="email">이메일 : </label>
<input type="email" id="'email" />
<br>
<textarea placeholder="회원가입 사유" rows="4" cols="50"></textarea>
<br>
<input type="checkbox"> 이메일 홍보 수신 동의
</fieldset>
</form>
</body>
</html>
'외부 수업 > React 스터디' 카테고리의 다른 글
| [React 기초] State / Props (0) | 2024.01.15 |
|---|---|
| [React 기초] Node.js와 React.js 기본개념 (0) | 2024.01.15 |
| [JavaScript 기초] JavaScript 응용 (0) | 2024.01.14 |
| [JavaScript 기초] 객체 / 배열 (1) | 2024.01.14 |
| [JavaScript 기초] 자료형 / 함수 선언 (0) | 2024.01.13 |
