YoonStudyNote

1. 전체 선택자(Universal Selector) (요소 내부의)모든 요소를 선택 * { color : red; } 2. 태그 선택자(Type Selector) 태그 이름으로 요소 선택 li { color : red; } 3. 클래스 선택자(Class Selector) HTML class속성의 값으로 요소 선택 .hey { color : red; } 4. 아이디 선택자(ID Selector) HTML id속성의 값으로 요소 선택 #hey { color : red; } 1. 일치 선택자(Basic Combinator) 동시에 만족하는 요소 선택 span.orange { color : red; } 오랜지 2. 자식 선택자(Child Combinator) 자식 요소를 선택 (실질적으로 스타일링이 적용되는거..

1. CSS @import를 이용하여 외부문서로 CSS를 불러와 적용하는 방식 즉, 는 html에서 외부 링크를 가져오는것이지만, @import는 CSS에서 외부 CSS를 가져올때 사용하는것이다. /* common1.css */ @import url("./common2.css"); /* common2.css */ div{ color : red; font-size : 20px; } 다음과 같이 입력이 된다면, common1.css는 common2.css의 내용을 들고왔다는 것이다. @import html에서 외부 링크를 가져오는것 CSS에서 외부 CSS를 가져오는것 병렬방식 호출 직렬방식 호출 한꺼번에 호출하기 때문에 시간이 단축됨 CSS에서 작업이 끝난 후에 다음 CSS가 호출이 되기때문에 시간이 오래 ..

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 옵션 그룹..