반응형
TO-DO LIST
⦿ HTML <input> 태그 타입 종류
⦿ HTML로 회원가입페이지 구성하기
- SUPERCODING 회원가입 페이지
⦿ CSS 적용 방식
- inline
- internal
- external
⦿ CSS 박스모델
⦿ CSS 위치
⦿ CSS 선택자
HTML <input> 태그 타입 종류
1. text: 일반 텍스트를 입력할 수 있는 텍스트 상자 생성
2. password: 비밀번호를 입력할 수 있는 텍스트 상자 생성, 입력 내용은 마스킹 됨
3. email: 이메일 주소를 입력할 수 있는 텍스트 상자 생성, 입력 값이 이메일 주소 형식여부 자동 판단
4. number: 숫자 값을 입력할 수 있는 텍스트 상자 생성, 스핀 버튼이 함께 표시되어, 사용자가 숫자 값을 더하거나 빼는 것이 가능
5. date: 날짜를 선택할 수 있는 달력 컨트롤 생성
6. time: 시간을 선택할 수 있는 시계 컨트롤 생성
7. checkbox: 다중 선택을 위한 체크박스 생성
8. radio: 여러 옵션 중 하나를 선택할 수 있는 라디오 버튼 생성
9. file: 파일 업로드를 위한 파일 선택 창 생성
10. range: 범위를 선택할 수 있는 슬라이더 생성
HTML로 회원가입페이지 구성하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SUPERCODING 회원가입</title>
</head>
<body>
<form>
<h1>이메일로 가입</h1>
<div>
<label for="email-input">이메일</label>
</div>
<input id="email-input" type="email" placeholder="이메일" required>
<div>
<label for="pw-input">비밀번호</label>
</div>
<input id="pw-input" type="password" placeholder="비밀번호" required>
<div>
<label for="pw-input-check">비밀번호 확인</label>
</div>
<input id="pw-input-check" type="password" placeholder="비밀번호 확인" required>
<div>
<label for="name-input">이름</label>
</div>
<input id="name-input" type="text" placeholder="이름을 입력해주세요" required>
<div>
<label for="tel-input">핸대폰 번호</label>
</div>
<input id="tel-input" type="tel" placeholder="핸대폰 번호를 입력해주세요" required>
<div>
<label for="checkbox">여기를 체크해주세요</label>
<input id="checkbox" type="checkbox" required>
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
CSS 적용 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- external 방식 -->
<link rel="stylesheet" href="style.css">
<!-- internal 방식 -->
<style>
div{
background-color: blue;
}
</style>
<body>
<!-- inline방식 -->
<div style="background-color: red;">
여기!!!
</div>
</body>
</html>
CSS 박스 모델
border 종류
- solid 실선
- dashed : 점선
- thick : 두줄
- ridge : 입체 실선
CSS 위치
Flex box
body {
height: 200px;
border: 1px solid black;
display: flex;
/* flex-direction: column; */ /* 세로축 기준 */
flex-direction: row; /* 가로축 기준 */
/* flex는 상위 요소에 옵션을 주게 되면 그 내부의 요소들이 특정 배치를 갖게 만드는 옵션 */
/* justify-content: center; */
justify-content: center;
align-items: center;
}
Position
CSS 선택자
- id
- class
- nth-child
오늘은 CSS에서 이해 안되었던 flex box, position 에 대해서 이해가 되기 시작했다
열심히 해보자!
반응형
'취미 공부 > Daily' 카테고리의 다른 글
| 2024. 05. 06 (월) 2주차 - Daily Coding - Day08 (0) | 2024.05.06 |
|---|---|
| 2024. 05. 03 (금) 1주차 - Daily Coding - Day05 (0) | 2024.05.03 |
| 2024. 05. 02 (목) 1주차 - Daily Coding - Day04 (0) | 2024.05.02 |
| 2024. 05. 01 (수) 1주차 - Daily Coding - Day03 (0) | 2024.05.01 |
| 2024. 04. 29 (월) 1주차 - Daily Coding - Day01 (3) | 2024.04.29 |
