<input type="">

 

1. type="text"

텍스트 타입의 데이터를 받겠다

 

2. type="number"

숫자만 입력받아야 하는 경우(수량, 나이...)

화살표를 클릭하면 숫자를 증가시키거나 감소시킬 수 있다.

 

3. type="password"

입력한 모든 문자가 마스킹된다.

 

4. type="tel"

전화번호 입력받는 경우 사용.

휴대폰에서 사용하는 경우 다이얼패드를 띄어준다.

 

5. type="search"

검색창에 입력하기 부적절한 줄 바꿈표시(엔터) 등의 특수문자가 제거된다.

x표시를 누르면 검색창의 내용물이 삭제된다.

휴대폰에서 사용하는 경우에는 enter버튼 대신에 검색버튼으로 활성화된다(바로 검색결과로 넘어갈 수 있게)

 

6. type="email"

이메일의 유효성을 검증하는 기능. 

 

7. type="url"

입력받은 자료가 url형태인지 검증하기 위한 기능을 제공

 

8. type="button"

button태그와 유사한 버튼을 화면에 표현

 

8-1. type="submit"

양식을 제출할 때 사용.

<form>태그와 함께 사용.

제출 버튼을 누르는 순간 다른 컴퓨터로 데이터가 전송된다.

 

9. type="file"

파일 업로드 버튼이 생겨 파일을 업로드할 수 있다.

 

accept속성을 추가

accept="image/*"  이미지 파일만 업로드 가능

accept="audio/*"   오디오 파일만 업로드 가능

accept="video/*"   비디오 파일만 업로드 가능

accept=".jpg, .png, .pdf"   입력받을 파일의 확장자를 직접 입력하는 것도 가능. 입력받을 확장자들을 (,)콤마로 구분해서 입력한다.

 

10. type="color"

사용자로부터 색상을 입력받음

 

11. type="checkbox"

 

12. type="radio"

여러 선택지 중 하나를 선택할 때 사용

name속성을 함께 사용해서 중복 선택 여부를 정한다.

같은 name끼리는 중복선택 불가

 

13. type="range"

슬라이더로 값을 선택한다

type="range" min="0" max="1000" step="10" value="10"

최솟값과 최댓값, 간격, 초기값 설정

 

14. 날짜와 시간

type="date"   날짜 입력받기

type="month"   연도와 월 선택

type="week"   연과 주를 선택

type="time"   시간을 입력받음

tpe="datetime-local"   날짜와 시간을 동시에 입력받기

 

<input>으로 입력받은 데이터는 서버에 전달된다. 

저작자표시 비영리 변경금지

'웹 개발 > HTML+CSS+Js' 카테고리의 다른 글

코드 바르게 정렬하기  (0) 2024.04.02
HTML 태그  (0) 2024.03.21
HTML <!DOCTYPE html>  (0) 2024.03.21
Ruby, jekyll설치  (0) 2024.03.21

VSC 단축키

 

Shift + Alt + F

저작자표시 비영리 변경금지

'웹 개발 > HTML+CSS+Js' 카테고리의 다른 글

input태그 type  (0) 2024.04.02
HTML 태그  (0) 2024.03.21
HTML <!DOCTYPE html>  (0) 2024.03.21
Ruby, jekyll설치  (0) 2024.03.21
<html> html코드임을 표현 <html></html>
<head> 웹 페이지 헤드 부분임을 표현 <head></head>
<body> 문서의 본문임을 표현 <body></body>
<title> 사이트 제목을 표현 <title></title>
<meta> 메타데이터 표현 <meta></meta>
<div> 콘텐츠를 담는 그릇(줄 바꿈 o) <div></div>
<a> 하이퍼링크 <a href ="url">contents</a>
<script> 자바스크립트 삽입 <script>code</script>
<link> 외부 파일을 HTML문서와 연결 <lonk rel="style.css" type="text/css"/>
<img> 문서에 이미지 삽입 <img src="이미지 경로"/>

 

 

<span> 콘텐츠를 담는 그릇(줄 바꿈 x) <span style="color:red">빨간색</span>
<p> 문단(단락) 표현 (줄 바꿈 o) <p></p>
<li> & <ul> 목록(리스트) 표현을 위해 사용 <ul>
    <li>항목 1</li>
</ul>
<style> CSS코드 삽입 <style>CSS코드 삽입</style>
<br> 줄 바꿈 줄바꿈<br/>예시

 

<h1> 가장 큰 제목 <h1></h1>
<h2> 두번째로 큰 제목 <h2></h2>
<input> 화면에 입력창 삽입 <input type="text" name="name/>
<form> 정보를 모아 한 번에 전송 <form action="서버 주소" method="POST">폼 작성을 위한 코드</form>
<h3> 세번째로 큰 제목 <h3></h3>
<iframe> 다른 콘텐츠를 현재 문서에 삽입 <iframe src="주소"/>
<nav> 하이퍼링크를 모아 두는 영역 표시 <nav>
    <a href="#">main</a>
</nav>
<strong> 글자 굵게 <strong>원하는 굵은 글자</strong>
<footer> 웹 사이트 푸터(하단의 정보 기재란) 작성 <footer>푸터 코드 작성</footer>
<header> 웹 사이트 헤더(도입부에 해당하는 영역) 작성 <header>헤더 코드 작성</header>
<button> 화면에 버튼 삽입 <button type="submit">전송하기</button>
저작자표시 비영리 변경금지

'웹 개발 > HTML+CSS+Js' 카테고리의 다른 글

input태그 type  (0) 2024.04.02
코드 바르게 정렬하기  (0) 2024.04.02
HTML <!DOCTYPE html>  (0) 2024.03.21
Ruby, jekyll설치  (0) 2024.03.21

 

이 문서는 html로 작성되었습니다.

<!DOCTYPE html>

 

 

<!DOCTYPE html>
<html>
    <head></head>
    <body>웹 프론트엔트 개발을 시작합니다.</body>
</html>

 

- html로 감싸진 부분은 html로 작성된 코드입니다.

- body 웹 프론트엔드 개발을 시작합니다.

<>는 태그.

 

저작자표시 비영리 변경금지

'웹 개발 > HTML+CSS+Js' 카테고리의 다른 글

input태그 type  (0) 2024.04.02
코드 바르게 정렬하기  (0) 2024.04.02
HTML 태그  (0) 2024.03.21
Ruby, jekyll설치  (0) 2024.03.21

https://rubyinstaller.org/downloads/

 

Downloads

Which version to download? If you don’t know what version to install and you’re getting started with Ruby, we recommend that you use the Ruby+Devkit 3.2.X (x64) installer. It provides the biggest number of compatible gems and installs the MSYS2 Devkit

rubyinstaller.org

시스템 종류에 맞는 항목으로 다운받기

 

루비 설치하면 cmd창이 뜨는데 루비에서 선택해서 설치하는 화면이다.

엔터 눌르면 알아서 다운해줬음

 

루비 설치 후에 cmd창에서

gem install jekyll bundler

 

설치 완료되면

jekyll -v

 버전 확인하기

 

저작자표시 비영리 변경금지

'웹 개발 > HTML+CSS+Js' 카테고리의 다른 글

input태그 type  (0) 2024.04.02
코드 바르게 정렬하기  (0) 2024.04.02
HTML 태그  (0) 2024.03.21
HTML <!DOCTYPE html>  (0) 2024.03.21

+ Recent posts

티스토리툴바