YoonStudyNote

Hello World! 1. 는 띄어쓰기 문단이 그대로 출력되는걸 보여주고 싶을 때 사용한다. 2. 는 꺽쇠갈호가 화면에 그대로 출력되게 만들고 싶을 때 사용한다.

1. draggable 요소가 Drag and Drop API를 사용 가능한지 여부를 지정. The element to drag. 만약에 true 및 false를 작성하지 않으면 auto가 작동한다. 즉, 이것은 drag할수있는지 없는지 브라우저가 알아서 판단하게 하는 것이다. 2. hidden 요소를 숨김. 전송 즉 특정한 부분도 숨길 수 있지만, 실질적으로 html은 동작 할 수 있다는 걸 알 수 있다. 3. tabindex Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정. 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨. 비대화형 콘텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용. tabindex="-1"을..

1. lang 요소의 언어(ISO 639-1)를 지정. This paragraph is English 이 단락은 한글입니다. Ce paragraphe est défini en français. 2. data-* 사용자 정의 데이터 속성을 지정. HTML에 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용. Heropy 이렇게 작성하고 난 후에 다음과 같이 javascript에서 이용 할 수 있다. // dataset.customDataAttributes const $me = document.getElementById('me'); console.log($me.dataset.myName); // "Heropy" console.log($me.dataset.myAge); // "851..

****어떤한 태그에도 아무대나 다 적용 할 수 있다.**** 1. style : 요소에 적용할 CSS를 선언. 2. title : 요소의 정보(설명)을 지정. Title 2 GOOGLE DIV 다음과 같이 입력했을시, 마우스커서를 대면 title의 정보가 나온걸 웹브라우저에서 확인 할 수 있다. 그리고 title은 많이 사용하는 태그이다.

전역 속성(Global Attributes) 모든 HTML 요소에서 공통적으로 사용 가능한 속성. 1. class 공백으로 구분된 요소의 별칭을 지정. CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근. --> 다음과 같이 중복해서 사용 가능 O //스타일 지정 .section{ width : 100px; color : red; background : blue; } const section = document.querySelector('.section'); //클래스가 section인 요소를 찾는다. 2. id 문서에서 고유한 식별자(idenifier, ID)를 정의. CSS 혹은..

작업의 완료 진행률을 표시. 속성 의미 값 특징 max 작업의 총량 숫자(Number) value 작업의 진행량 숫자(Number) max속성을 생략할 경우 0~1 사이의 숫자여야 함 * 다음과 같이 max값의 기준이 없는 두번째 progress는 0~1사이의 소수점 숫자로 퍼센트를 입력해줘야한다. 70 % * 보통 progress태그는 javascript와 같이 이용해준다. 다음의 뜻은 1초에 10퍼센트씩 값이 증가하고 100퍼센터가 채워지면 interval을 멈추겠다라는 뜻이다. 70 %

옵션(, )의 선택 메뉴()나 자동완성()을 제공. 1. 옵션을 선택하는 메뉴. 속성 의미 값 기본값 autocomplete 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 on, off on disabled 선택 메뉴를 비활성화 Boolean form 선택 메뉴가 속할 하나 이상의 form의 id 속성 값 (즉 id가 form태그 안에 있지 않을 경우에 id속성값으로 연결한다.) multiple 다중 선택 여부 Boolean name 선택 메뉴의 이름 size 한 번에 볼 수 있는 행의 개수 숫자(Number) 0(1과 같음) Apple Orange Banana Mango Pineapple 2. 을 그룹화. 속성 의미 값 label (필수)옵션 그룹의 이름 disabled 옵션 그룹..

같은 목적의 양식을 그룹화()하여 제목()을 지정. Coffee Size Tall Grande Venti 다음과 같이 fieldset과 legend는 form안에서 사용이 된다. cf. 같은 목적의 양식을 그룹화 속성 의미 값 disabled 그룹 내 모든 양식 요소를 비활성화 Boolean form 그룹이 속할 하나 이상의 form의 id속성 값 name 그룹의 이름

여러 줄의 일반 텍스트 양식. 속성 의미 값 기본값 특징 autocomplete 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 on, off on autofocus 페이지가 로드될 때 자동으로 포커스 Boolean 문서 내 고유해야 함 disabled 양식을 비활성화 Boolean form form의 id 속성 값 해당 form의 후손이 아닐 경우만 maxlength 입력 가능한 최대 문자 수 Number 무한 name 양식의 이름 placeholder 사용자가 입력할 값의 힌트 readonly 수정 불가한 읽기 전용 Boolean rows 양식의 줄 수 Number 2 이러한 양식으로 이용이 된다.

선택 가능한 버튼을 지정. 속성 의미 값 특징 autofocus 페이지가 로드될 때 자동으로 포커스 Boolean 문서 내 고유해야 함 disabled 버튼을 비활성화 Boolean form form의 id 속성 값 해당 form의 후손이 아닐 경우만 name 폼 데이터와 함께 전송되는 버튼의 이름 type 버튼의 타입 button, reset, submit 1. Button태그 와 input태그의 동일한 기능 초기화 다음과 같이 입력하면 동일한 기능을 나타낸다. 2. Button태그와 자바 스크립트 이용 클릭! 주로 button은 자바스크립트와 연결해서 이용을 한다.