728x90
반응형
오늘 강의 내용
<div></div>
요소 (여는태그, 닫는태그)
<input>
태그 (<> 감싸진 모든 것을 태그)
감싸고 있는 요소를 "부모요소", 감싸진 요소를 "자식요소" 라고 합니다.
<a> </a>
웹페이지 링크 넣고 싶을때
audio 요소 자식요소 sourc 따로 필요
video 요소 자식요소 source 따로 필요
요소 선택자
id 한개지정 id는 (css에서) #~~으로 선택가능
class 여러개 묶어서 지정 (.~~~) 으로 선택 가능
cmd키 맥
cmd d로 선택 가능
윈도우는 ctrl
cmd z 실행취소
cmd 클릭 여러개 선택 윈도우 alt
리스트 li 무조건 ul, ol 안으로
.. 상위폴더 . 현재폴더
div는 대표적인 block 요소 그냥 박스
span은 대표적인 inline
p는 문단 여백이 있음
form은 submit(제출)할 떄 사용하는 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
</head>
<body>
<header>
<h1 style="text-align:center">회원가입을해주세요</h1>
</header>
<main>
<fieldset>
<legend><h3>필수입력사항</h3></legend>
<ul>
<form>
이메일
<input id="user_email" type="email" required placeholder="이메일을 입력해주세요." /><br>
이름
<input id="user_name" type="name" required placeholder="이름을 입력해주세요." /><br>
비밀번호
<input id="user_pw" type="password" required placeholder="비밀번호를 입력해주세요." /><br>
비밀번호확인
<input id="user_pw" type="password" required placeholder="비밀번호를 다시 입력해주세요." /><br>
휴대폰번호
<input id="user_number" type="text" required />
</ul>
</fieldset>
<br>
<fieldset>
<legend><h3>취미 (중복선택가능)</h3></legend>
<li><label><input type="checkbox">여행</label></li>
<li><label><input type="checkbox">게임</label></li>
<li><label><input type="checkbox">수면</label></li>
<li><label><input type="checkbox">맛집</label></li>
<li><label><input type="checkbox">운동</label></li>
<li><label><input type="checkbox">일</label></li>
</fieldset>
<br>
<select>
<option selected disabled>사는 지역</option>
<option >서울</option>
<option >부산</option>
<option >대구</option>
<option >인천</option>
</select><br>
<input type="radio" value="female" name="gender">여성
<input type="radio" value="male" name="gender">남성<br>
<input type="submit" value="가입">
</form>
</main>
</body>
</html>
728x90
반응형
'프론트엔드' 카테고리의 다른 글
| 5일차 채팅방 만들기 (0) | 2025.03.06 |
|---|---|
| 4일차 (0) | 2025.03.05 |
| 3일차 (0) | 2025.03.04 |
