입력어(중요)

sisun·2023년 3월 29일
0

HTML

목록 보기
2/16

HTML forms

HTML 양식은 사용자 입력을 수집하는 데 사용됩니다. 사용자 입력은 대부분 처리를 위해 서버로 전송됩니다.

xmlns 속성은 해당 문서를 위한 XML 네임스페이스(namespace)를 명시

ex) <html lang="en" xmlns="링크">
<head> ...

form elements

HTML 요소는 사용자 입력을 위한 HTML 양식을 만듭니다.<form>
 
 <input> <입력>요소 
 <label> <레이블>요소 (큰 소리로 읽어줍니다)
 <select> <선택>요소
 <multiple> 다중 선택 허용
 <textarea> <텍스트 영역> 요소
 <button> <단추>요소
 <fieldset> 관련 데이터를 그룹화 하는데 사용
 <legend> <fieldset> 요소에 대한 캡션을 정의
 <output> <출력>요소 (계산 결과를 나타냅니다)
 <datalist><input> <데이터 목록>요소

input types

html요소의 다양한 입력 유형입니다.

<input type="text"> 한 줄 텍스트 입력 필드를 정의
<input type="password"> 암호 필드를 정의
<input type="submit"> 양식 데이터를 양식 처리기에 전송하기 위한 단추를 정의
<input type="reset"> 모든 양식 값을 기본값으로 재설정하는 재설정 단추를 정의
<input type="radio"> 라디오 단추를 정의합니다. 
- 사용자가 제한된 수의 선택 항목 중 하나만 선택할 수 있습니다
<input type="checkbox"> 확인란을 정의
ZERO 또는 MORE 옵션을 선택할 수 있습니다.
<input type="button"> 단추를 정의합니다.
<input type="color"> 색을 포함해야 하는 입력 필드에 사용됩니다.
<input type="date"> 날짜를 포함해야 하는 입력 필드에 사용됩니다.
<input type="datetime-local"> 지정 표준 시간대가 없는 날짜 및 시간 입력 필드입니다.
<input type="email"> 전자 메일 주소를 포함해야 하는 입력 필드에 사용됩니다.
-자동으로 유효성을 검사할 수 있습니다.
<input type="image"> 이미지를 제출 단추로 정의합니다.
<input type="file"> 파일 선택 필드와 파일 업로드를 위한 "찾아보기" 버튼을 정의합니다.
<input type="hidden"> 숨겨진 입력 필드를 정의합니다(사용자에게 표시되지 않음).
<input type="month"> 사용자가 월과 연도를 선택할 수 있습니다.
<input type="number"> 숫자 입력 필드를 정의합니다.
<input type="search"> 검색 필드에 사용됩니다.
<input type="tel"> 전화 번호를 포함해야 하는 입력 필드에 사용됩니다.```

input attributes

HTML 요소의 다양한 특징입니다

<value> 값속성 
<readonly> 읽기 전용 속성
<disabled> 비활성화된 속성
<size> 크기 속성
<maxlength> 최대 길이 속성
<min max> 최소값 및 최대값 속성
<multiple> 다중 속성
<pattern> 패턴 속성
<placeholder> 힌트 속성 (텍스트, 검색, URL, 전화, 이메일 및 암호와 같은 입력 유형)
<required> 필수 속성
<step> 단계 속성
<autofocus> 자동 초점 속성 (자동으로 포커스)
<heightwidth<input type="image">
요소의 높이와 너비를 지정
list<datalist> 데이터 목록 입력 요소
<autocomplete> 자동 완성 속성  

HTML File Paths

HTML파일 경로

HTML Head

HTML<헤드>요소

<head><html><body>태그와 태그 사이에 배치
<title>제목
<style>스타일
<meta>메타데이터 (페이지, 검색, 설명, 작성자,뷰포트)
<link>링크
<script>자바스트립트
<base>기본 (url, 기본대상)```

HTML Layout ★

HTML 레이아웃 요소 및 기법

HTML Semantic

HTML 시맨틱 요소 ★
의미 없이 모양만 바꾸는게 있고, 모양도 바뀌면서 의미가 바뀌는 태그가 있다.
예시로 div를 쓰면 되지 header 태그를 쓰는 이유는 제목이나 다른 의미가 있기 때문에 사용하는것이다

비 의미 요소의 <div><블럭요소>,<span><인라인요소)(아무효과x, 특정요소를 묶어주기위해 사용됨)
의미 요소 <form>,<table>,<article>

<section> : 문서의 섹션을 정의
    챕터,소개,연락처정보 등으로 사용 
<article> : 독립적인 콘텐츠나 독립적 지정
    게시물, 의견, 기사, 제품카드 등으로 사용 
<header> : 탐색링크, 소개컨텐츠
  제목,로고,저자
<footer> : 문서 또는 섹션의 바닥글을 정의
  저자정보,저작권정보,사이트맵,관련문서
<nav> 탐색링크 집합
  탐색 링크의 주요 블록에만 사용
<aside> 배치된 콘텐츠 외에 일부 콘텐츠를 표시 | 양 사이드 부수적인 내용 | 일부 콘텐츠 정의 배치 
<figure> 그림 및 그림캡션 요소
<img> 실제 이미지/그림 정의

container 와 wrapper

둘 다 레이아웃을 위한 div이다.

네이밍시 차이점

container 여러 개의 요소를 감싸는 div
wrapper 단일 요소의 레이아웃을 위한 div

HTML Entities

HTML의 예약된 문자는 문자 Entities로 대체되어야 함

  • 텍스트에 보다 작음(<) 또는 보다 큼(>) 기호를 사용하면 브라우저에서 태그와 혼합할 수 있습니다.
  • 문자 엔터티는 예약된 문자를 HTML로 표시하는 데 사용됩니다.

HTML Symbols

HTML기호 엔터티

(10진수 또는 16진수 참조)를 기호로 지정합니다.

HTML Emojis

HTML에서 이모티콘 사용하기

  • 이모티콘은 UTF-8(유니코드) 문자 집합의 문자입니다.
  • UTF-8은 세계의 거의 모든 문자와 기호를 다룹니다.
    <meta charset="UTF-8"> 이 태그를 지정해야 함

HTML URL Encode

HTML 유니폼 리소스 로케이터 - URL

  • 웹 브라우저는 URL을 사용하여 웹 서버에서 페이지를 요청합니다.
  • URL(Uniform Resource Locator)은 웹에서 문서(또는 기타 데이터)의 주소를 지정하는 데 사용됩니다
    체계 - 인터넷 서비스 유형을 정의(가장 일반적인 것http, https)
    접두사 - 도메인 접두사를 정의합니다(HTTP의 기본값은 www)
    domain - 인터넷 도메인 이름(예: w3schools.com)을 정의
    포트 - 호스트의 포트 번호를 정의(HTTP의 기본값은 80).)
    path - 서버의 경로를 정의 (생략 된 경우 : 사이트의 루트 디렉토리).
    파일 이름 - 문서 또는 리소스의 이름을 정의
profile
풀스택 국비수강중

0개의 댓글