data 속성

요소에 데이터를 지정

요소에 지정한 데이터를 자바스크립트에서 이용하기위해 사용한다.

사용방법

data-이름 = "데이터"
ex) data-item = "apple"

See the Pen Untitled by J-Plum (@J-Plum) on CodePen.

콘솔창에서

React와 JavaScript가 뜨는걸 볼 수 있다.

 

'html' 카테고리의 다른 글

[HTML] <input> 태그에 대해서  (4) 2023.03.03
[HTML] Doctype(DTD)  (1) 2023.02.28

input 태그

See the Pen Untitled by J-Plum (@J-Plum) on CodePen.

input 태그의 속성

  • type : input의 타입, text, checkbox, radio ..
  • value : input의 값
  • placeholder : 입력 힌트
  • checked : 체크가 되어있는 상태
  • name : radio 태그를 사용할때 그룹을 만들기위해 사용한다.

 

 

첫번재 input 태그는 일반적인 text타입의 input 박스이다 value값이 입력되어있어

기본값으로 J-plum이 들어가 있다. 

input안의 text값을 다 지우면 placeholder를 볼 수 있다. (기본적으로 placeholder은 빈칸일 때 보인다)

 

두번째 input태그는 checkbox이다. checked 로인해 미리 체크가 되어있다.

 

세번째 input 태그는 두번째와 별반 다를바 없어보이지만

react 라는 글씨를 클릭해도 체크가 되며, 두번째 input은 체크가 되지 않는다

label 태그에 의한 차이이다.

 

마지막 input 태그

radio 타입이며 name이 같은 input끼리 하나의 그룹이며, 하나의 그룹에는 하나만 체크가 가능하다

 

 

 

'html' 카테고리의 다른 글

[HTML] data  (0) 2023.03.03
[HTML] Doctype(DTD)  (1) 2023.02.28 
<!DOCTYPE html>  
<html lang="en">
   <head>

   </head>
   <body>

   </body>
</html>

 

  • 문서의 HTML 버전을 지정
  • 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도.
  • HTML1, HTML2, HTML3, HTML, XHTML, *HTML5 (표준) *

'html' 카테고리의 다른 글

[HTML] data  (0) 2023.03.03
[HTML] <input> 태그에 대해서  (4) 2023.03.03

+ Recent posts

티스토리툴바