1. display: block; 또는 display: inline-block; 설정한다. 2. 가로 길이 width/max-width를 명시한다. 3. white-space: nowrap; 공백 문자가 포함된 경우 줄바꿈 없이 한 줄 처리한다. 4. overflow: hidden; 해당 가로 길이를 초과하는 텍스트에 대해 잘라낸다. 5. text-overflow: ellipsis; 해당 가로 길이를 초과한 부분에 대해 줄임표(...) 표시한다.
수업시간에 CSS 선택자(Selector) 연습용으로 추천해주신 게임이었다. 총 32단계 레벨로 구성돼 있어 입문자 입장에서 게임 통해 자연스럽게 접하고 정리하기에 좋았다. CSS Diner CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io
목차 마우스 이벤트 1-1. 마우스 이벤트 종류 1-2. 마우스 이벤트 관련 속성 1-3. 마우스 이벤트 예시 키보드 이벤트 2-1. 키보드 이벤트 종류 2-2. 키보드 이벤트 관련 속성 2-3. 키보드 이벤트 예시 스크롤 이벤트 3-1. 스크롤 이벤트 종류 3-2. 스크롤 이벤트 관련 속성 3-3. 스크롤 이벤트 예시 폼 이벤트 4-1. 폼 이벤트 종류 4-2. 폼 이벤트 관련 속성 4-3. 폼 이벤트 예시 1. 마우스 이벤트 1-1. 마우스 이벤트 종류 mousedown 요소 위에서 마우스 버튼을 누를 때 mouseup 요소 위에서 마우스 버튼을 누르고 있다가 뗄 때 mouseover 마우스 커서가 요소 바깥으로부터 안으로 움직일 때 mouseout 마우스 커서가 요소 위에 있다가 요소 밖으로 움직일..
목차 이벤트 이벤트 핸들러 2-1. HTML 속성 핸들러 1개 할당 가능 2-2. DOM 프로퍼티 핸들러 1개 할당 가능 2-3. addEventListener 표준 이벤트 모델, 핸들러 n개 할당 가능 이벤트 객체 버블링과 캡쳐링 이벤트 전달/차단 4-1. 버블링 4-2. 버블링 차단 event.stopPropagation() 4-3. 캡쳐링 true 기본 이벤트 제거 5-1. event.preventDefault() 5-2. return false; 1. 이벤트 DOM 이벤트(Document Object Model event)는 마우스 이벤트(click, mouseover, mouseout, mousemove), 폼 요소 이벤트(submit, focus), 키보드 이벤트(keydown, keyup),..
목차 window 객체 1-1. window.open('주소', '이름 또는 open 방식', '형태'); 1-2. window 객체 타이머 메소드 1-3. window 객체 메소드 1-4. window.onload 속성 BOM 2-1. location 객체 2-2. navigator 객체 2-3. history 객체 2-4. screen 객체 1. window 객체 ❗ alert, prompt 등 현재까지 자바스크립트에서 사용해온 메소드들은 사실 window 객체에 속한 것들이다. 이들을 사용할 때 window.메소드명처럼 접근하진 않았지만, 그 최상위에는 window 객체가 있음을 짚어보자. window 객체는 자바스크립트(JavaScript)의 최상위 객체이며, BOM(Browser Object M..
목차 노드 생성/복제 메소드 1-1. document.createElement(tag) 1-2. document.createTextNode(value) 1-3. element.cloneNode(deep) 1-4. 텍스트가 있는 노드 생성 예시 1-5. 텍스트가 없는 노드 생성 예시 1-6. 노드 복제 예시 cloneNode(deep) 노드 삽입 메소드 append/prepend, before/after 2-1. 요소 위치 바꾸기 잘라내기 → 붙여넣기와 같은 효과 노드 대체/삭제 메소드 3-1. 노드 대체 예시 replaceWith(노드 또는 텍스트 문자열) *인자에 HTML 문자열 취급X 3-2. 노드 삭제 예시 remove() 추가 HTML 삽입 메소드 4-1. 노드 대체 수정 insertAdjacen..
목차 주요 노드 프로퍼티 1-1. innerHTML 읽기 가능, 변경 가능 1-2. outerHTML 읽기 가능 1-3. textContent 태그 제외 텍스트만 추출, 일반 텍스트 취급 1-4. hidden 숨김 처리 1-5. value input, select, textarea 값 저장 DOM 프로퍼티와 HTML 속성 2-1. 비표준 속성 메소드 2-2. 사용 예시 1. 주요 노드 프로퍼티 innerHTML 요소 안 HTML을 문자열 형태로 반환 또는 요소 안 HTML을 수정 outerHTML 요소 전체 HTML을 문자열 형태로 반환 ※ innerHTML에 요소 자체를 더한 것 textContent 요소 안 태그 제외 텍스트만 추출하여 반환 또는 요소 안 텍스트만 추출하여 설정 hidden 요소를 보..
목차 요소 검색 메소드 1-1. document.getElementById(id) 1-2. getElementById(id) 사용 예시 버튼 클릭 시마다 색상 변경 1-3. document.getElementsByTagName(태그명) querySelector(선택자)로 대체 1-4. document.getElementsByClassName(클래스명) querySelector(선택자)로 대체 1-5. document.getElementsByName(name) querySelector(선택자)로 대체 요소 검색 메소드 2-1. document.querySelector(선택자)/querySelectorAll(선택자) 2-2. element.querySelector(선택자)/querySelectorAll(선택..
목차 DOM 1-1. 문서 객체 1-2. 노드 요소 노드, 텍스트 노드 DOM 노드 탐색 텍스트 노드, 요소 노드 모두 탐색 2-1. DOM 컬렉션 NodeList 2-1. DOM 탐색 프로퍼티 , , 2-2. 자식 노드 탐색 2-3. 형제 노드 탐색 2-4. 부모 노드 탐색 DOM 요소 탐색 요소 노드만 탐색 3-1. 자식 요소 탐색 HTMLCollection(숫자) 3-2. 형제 요소 탐색 3-3. 부모 요소 탐색 1. DOM 1-1. 문서 객체 DOM(Document Object Model)은 문서 객체 모델을 의미한다. HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있도록 만든다. 모든 노드 객체에 접근할 수 있는 요소 및 메소드를 제공한다. 1-2. 노드 요소 노드, 텍스트 노드 ❗..
목차 Number 객체 메소드 1-1. isNaN(value) 1-2. isFinite(value) 1-3. parseInt(value) 또는 parseFloat(value) Math 객체 메소드 String 객체 메소드 3-1. 백틱(`) ${} 3-2. 문자열[인덱스] 글자 추출 3-3. substr(start index, length) 부분 문자열 추출 3-4. substring(start, end) 부분 문자열 추출 3-5. slice(start, end) 부분 문자열 추출 3-6. indexOf(값) 해당 인덱스 반환 3-7. includes(값) 포함 여부 반환, true/false 3-8. startsWith(값) 그 값으로 시작 여부 반환, true/false 3-9. endsWith(값)..
