기록저장소

https://codepen.io/piarey/pen/gOrVdmM 양쪽정렬 원리 (text-align:justify) ... codepen.io th의 min-width (width도 무관해보임) 설정 span을 text-align:justify로 양쪽정렬 th::after로 span의 기준이 th전체의 크기값을 가지도록 th에 font-size:0으로 ::after가 높이를 차지하지않게하고 span에 별도의 폰트사이즈 설정

::selection { background-color: cyan; } https://developer.mozilla.org/en-US/docs/Web/CSS/::selection ::selection - CSS: Cascading Style Sheets | MDN The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text). developer.mozilla.org

https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=208646

5.4 배열 배열 키를 사용해 식별가능한 값을 담은 컬렉션은 객체라는 자료구조를 이용해 저장하는데 객체만으로도 다양한 작업이 가능 객체는 순서와 관련된 메서드가 없어서 불편하고 애초에 순서를 고려하지않는 자료구조이므로 '사이에' 끼워넣는 기능이 불가능, 순서가 있는 컬렉션이 필요할 때, 배열을 사용 배열 선언 //빈배열 생성 let arr = new Array(); let arr = []; let fruits = ["사과", "오렌지", "자두"]; 각 배열의 요소에는 0부터 시작하는 숫자(인덱스)가 있고, 이 숫자는 배열 내 순서를 나타냄, 배열 내 특정 요소를 얻을 때는 대괄호 안에 순서를 나타내는 숫자인 인덱스를 넣어서 확인 let fruits = ["사과", "오렌지", "자두"]; alert( ..

5.3 문자열 JS에는 글자 하나만 저장할 수 있는 별도의 자료형이 없음, 텍스트 형식의 데이터 길이에 상관없이 문자열 형태로 저장 JS에서 문자열을 인코딩 방식과 무관하게 항상 UTF-16 형식을 따름 따옴표 작은따옴표, 큰따옴표, 백틱 let single = '작은따옴표'; let double = "큰따옴표"; let backticks = `백틱`; 작은따옴표와 큰따옴표는 기능상 차이 없음, 표현식을 ${..}로 감싸고 백틱(`)으로 감싸고 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 삽입 가능 ( template literal) function sum(a, b) { return a + b; } alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3. 백틱을 사용하면 ..

5.2 숫자형 숫자형 모던 JS에서 숫자를 나타내는 두가지 자료형 1. 일반적인 숫자는 '배정밀도 부동소수점 숫자(double precision floating number)'로 알려진 64비트 형식의 IEEE-754에 저장 2. 임의의 길이를 가진 정수 BigInt, 일반적인 숫자의 범위 2-53 ~ 253 밖의 숫자 숫자를 입력하는 다양한 방법 let billion = 1000000000; //0의 갯수가 많아서 오류가 생길 수 있음 let billion = 1e9; // 10억, 1과 9개의 0 alert( 7.3e9 ); // 73억 (7,300,000,000) 'e' 의 오른쪽에 오는 수만큼 10의 거듭제곱 1e3 = 1 * 1000 1.23e6 = 1.23 * 1000000 1마이크로초(백만 ..

5.1 원시값의 메서드 JS는 원시값(문자열, 숫자 등)을 객체처럼 다룰 수 있게 함 (ex. 메서드 호출) 원시값 vs 객체 원시값 - 원시형 값 - 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 총 7가지 객체 - 프로퍼티에 다양한 종류의 값 저장 가능 - 대괄호{}를 사용해 생성, 함수도 객체의 일종 함수를 프로퍼티로 저장할 수 있다는 객체의 장점 let john = { name: "John", sayHi: function() { alert("친구야 반갑다!"); } }; john.sayHi(); // 친구야 반갑다! //객체 John //메서드 sayHi JS는 날짜, 오류, HTML 요소 등을 다룰 수 있게 하는..

4.8 객체를 원시형으로 변환하기 obj1 + obj2처럼 객체끼리 연산을 하는 경우에 객체->원시값으로 자동형변환 발생 후 연산이 수행됨 1. 객체는 논리 평가 시 true를 반환, 예외x, 따라서 객체는 숫자형이나 문자형으로만 형 변환 발생 2. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 발생 ex) 객체 Date끼리 차감할 때 (date1 - date2) 두 날짜의 시간차이가 반환됨 3. 문자형으로의 형 변환은 대게 alert(obj)같이 객체를 출력할 때 발생 - ToPrimitive 특수 객체 메서드를 사용하여 형변환을 숫자형or문자형 중 원하는대로 조절가능 객체 형 변환은 세 종류로 구분되는데 'hint'(=목표로 하는 자료형)라 불리는 값이 구분 기준 ..

4.7 심볼형 JS는 객체 프로퍼티 키로 숫자형, 불린형은 불가능하고 오직 문자형과 심볼형만 허용 심볼(symbol) 심볼은 유일한 식별자를 만들고 싶을 때 사용, Symbol()을 사용하여 심볼값 생성 // id는 새로운 심볼이 됩니다. let id = Symbol(); 심볼을 만들 때 심볼 이름이라 불리는 설명을 붙일 수 있음, 디버깅시 유용 // 심볼 id에는 "id"라는 설명이 붙습니다. let id = Symbol("id"); 심볼은 유일성이 보장되는 자료형이므로 설명이 동일한 심볼 여러개를 만들어도 각 심볼값은 다름, 심볼에 붙은 설명(심볼 이름)은 어떤 것에도 영향을 주지않는 이름표 역할 let id1 = Symbol("id"); let id2 = Symbol("id"); alert(id1 ..

4.6 옵셔널 체이닝 '?.' 추가된지 얼마되지않은 문법, 구식 브라우저는 폴리필이 필요함 - 옵셔널 체이닝이 필요한 이유 //1. 여러명의 사용자 중 주소 정보를 가지지않은 사용자가 있을 때 error 발생 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined //2. 페이지에 존재하지않는 요소에 접근해 요소의 정보를 가져오려할 때 // querySelector(...) 호출 결과가 null인 경우 에러 발생 let html = document.querySelector('.my-element').innerHTML; //?.가 추가되기 전 해결 방법 ..