YoonStudyNote

1. .fruits의 첫번째 자식 요소가 p태그가 아니기 때문에 선택되지 않는다. .fruits p:nth-child(1){ color : red; } 딸기 망고 오렌지 사과 2. 후손 선택자가 모두 선택이 되기 때문에 1만 CSS처리 되지않는다. .box-group div:first-child{ color : red; font-weight : bold; } 1 2 3 3-1 3-2 3-3 3. 만약 div태그 1만 스타일링 적용하려면 수정해야 한다. 자식선택자로 수정해주면 된다. .box-group>div:first-child{ color : red; font-weight : bold; } 4. 만약 자식요소들의 태그가 다른상황인데 동시에 CSS 적용하고 싶다면? .box-group:first-chil..

1. First child 형제 요소 중 첫번째 요소라면 선택 .fruits li:fist-child{ color : red; } 딸기 망고 사과 오렌지 cf. 다음과 같이 후손 선택자를 많이 이용한다. 2. Last child 형제 요소 중 마지막 요소라면 선택 .fruits li:last-child{ color : red; } 딸기 망고 사과 오렌지 3. Nth child 형제 요소 중 n번쨰 요소라면 선택 (키워드 사용시 0부터 해석(Zero-base)) 2번째 요소만 선택 .fruits li:nth-child(2){ color : red; } 딸기 망고 사과 오렌지 2의 배수 요소들 선택 .fruits li:nth-child(2n){ color : red; } 딸기 망고 사과 오렌지 3번째 요소부..

이 선택자들은 이벤트와 느낌이 많이 비슷하지만, 이벤트와 관련이 없다. 이 3가지 케이스는 특이한 경우이다. 1. Hover 마우스(포인터)가 올라가 있는 동안에만 선택 a:hover{ font-weight : bold; font-size : 20px; } 그럼 마우스가 a태그위에 있을 시에만 CSS기능이 작동이 된다. 2. Active 마우스로 클릭하는 동안에만 선택 a:active{ font-weight : bold; font-size : 20px; } 3. Focus 포커스 된 동안에만 선택 input{ width : 100px; outline : none; border : 1px solid orange; padding : 5px 10px; transition : 0.4s; } input:focus..

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 혹은..