All'alba vincerò

At dawn, I will win!

전체 글 312

[JS] 논리 연산자(&& / || / !)

논리 연산자 AND 연산자 &&: 둘 다 true면 true우선순위: AND(&&) > OR(||)  ✨ AND 연산자로 첫 번째 false 찾기 AND 연산자가 여러 개인 경우, 첫 번째  falsy 반환 falsy가 없다면 마지막 값을 반환 result = value1 || value2 || value3; (1) 왼쪽부터 피연산자를 boolean형으로 변환하며 true 찾기(2) false면 연산을 멈추고 해당 피연산자의 기존값을 반환 (더 이상 진행하지 않는다.)(3) false가 없으면 마지막 피연산자 반환// 첫 번째 피연산자가 truthy이면,// AND는 두 번째 피연산자를 반환합니다.alert( 1 && 0 ); // 0alert( 1 && 5 ); // 5// 첫 번째 피연산자가 fals..

Javascript 2024.06.01

[JS] 사용자 알림창: alert / prompt / confirm

alert: 확인 버튼만 있는 모달창에 문자열 설정alert("Hello");    prompt: 확인 & 취소 버튼이 있는 모달창의 문자열과 입력창의 초깃값 설정사용자가 입력창에 입력한 문자열을 반환 (입력을 취소한 경우는 null 반환)prompt(문자열, 기본값); let age = prompt('나이를 입력해주세요.', 100);     confirm: 확인 & 취소 버튼이 있는 모달창에 질문 문자열과 버튼 결과값을 출력boolean형으로 반환: 사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false 반환let isBoss = confirm("당신이 주인인가요?");    alert, prompt, confirm을 이용한 상호작용 ko.javascript.info

Javascript 2024.06.01

[JS] if문, 조건부 연산자 ?

if 문if ( 조건식 ) {     ...} else if (조건식) {     ...} else {     ...} let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');if (year 2015) { alert( '숫자를 좀 더 내려보세요.' ); } else { alert( '정답입니다!' );}   boolean형 사용0, 빈 문자열(""), null, nudefined, NaN 👉 false (falsy 값)이 외의 값 👉 true (truthy 값)if (1) { // 1은 truthy입니다. ...}if (0) { // 0은 falsy입니다. ...}   조건부 연산자 ?: 조건식이 true면 (true일 때 실행), fal..

Javascript 2024.06.01

[JS] 연산자(Operations)

기본 연산자 피연산자: 연산을 수행하는 대상  단항 연산자: 피연산자가 1개let x = 1;x = -x;alert( x ); // -1  이행 연산자: 피연산자가 2개let x = 1, y = 3;alert( y - x ); // 2  수학 연산자덧셈: +뺄셈: -곱셈: *나눗셈: /나머지: %a % b = a를 b로 나눈 나머지를 정수로 반환alert( 5 % 2 ); // 1 (5 % 2 = ...1)alert( 8 % 3 ); // 2 (8 % 3 = ...2) 거듭제곱: **a ** b = a를 b번 곱한 값이 반환alert( 2 ** 2 ); // 4 (2 * 2)alert( 2 ** 3 ); // 8 (2 * 2 * 2)   이항 연산자 + : 문자열 병합"문자열" + "문자열" = 병합 *..

Javascript 2024.06.01

자바스크립트 확장 프로그램

변수명 변환 ctrl + shift + t translator - Visual Studio MarketplaceExtension for Visual Studio Code - translate for Koreanmarketplace.visualstudio.com 주석  단을 나누는 주석 ctrl + y Comment Divider - Visual Studio MarketplaceExtension for Visual Studio Code - Divide your code by sections with styled separators.marketplace.visualstudio.com    중첩 주석 ctrl + alt + / Nested Comments - Visual Studio MarketplaceExt..

기타 2024.05.30

[JS] 형 변환(Type Conversion)

형 변환 1. 문자형으로 변환 명시적  String(값) alert 메서드는 문자열 매개변수를 받음 (다른 형의 값을 받으면 문자형으로 자동 형 변환) let value = true;alert(typeof value); // booleanvalue = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.alert(typeof value); // string  암시적 빈 문자열('') 더하기 덧셈(+)만 문자열로 변환 가능'10' + '5'= '105''10' - '5'= 5'10' * '5'= 50     2. 숫자형으로 변환 명시적 Number(값) let str = "123";let num = Number(str); // 문자열 "123"이 숫자 123으로 변환   암시..

Javascript 2024.05.30

[JS] 자료형(Data type) & typeof 연산자

자료형(Data type)  1. 숫자형(Number)정수한계값: 2**53 -1소수특수 숫자값 (Infinity, NaN)let n = 123;n = 12.345;alert("문자열" / 2); // NaN (문자열을 숫자로 나누면 에러)   2. BigInt: (253-1)(9007199254740991)보다 큰 값 / -(253-1)보다 작은 정수를 표현정수 리터럴 끝에 n을 붙이면 만들 수 있다.암호 관련 작업에서 사용const bigInt = 12n;   3. 문자형(String)큰따옴표: "Hello"작은따옴표: 'Hello'역 따옴표(백틱, backtick): `Hello` * `${Template literals}` : 백틱으로 변수/식을 감싼 후 ${…}안에 넣으면 문자열 중간에 변수/식..

Javascript 2024.05.30

[코딩 영어] 프로그래밍 단어

Loop Statement: 반복문   Conditional Statement: 조건문   Inheritance: 상속   Object-oriented : 객체 지향   Parameter: 매개변수   Argument : 인자   Local Variable: 지역 변수    Function Call: 함수 호출   Command: 명령어   Asynchronous: 비동기적인    Regular Expression (RegEx): 정규식   Syntax: 구문   Declaration: 선언 [데클러레이션]  Error handling: 예외 처리   Iteration: 반복 [이터레이션]  Operator: 연산자    Abstarction: 추상화 [업스트렉션]  Recursive function: ..

[CSS] 숨김 컨텐츠와 접근성

📌 숨김 컨텐츠마크업은 숨기되 스크린 리더가 접근하고 읽을 수 있어야 함 속성화면스크린 리더기타 사항display: none;❌❌사용 지양 👎aria-hidden ⭕❌ overflow: hidden;❌⭕ visibility: hidden;❌❌ width / height / font-size : 0px;❌스크린 리더에 읽히긴 하나 ⭕ 빈 객체에 초점이 갈 수도 있음 (사용자에게 혼돈을 줌) 👎 black hat의 원인 👎text-indent: -9999px;❌스크린 리더에 읽히긴 하나 ⭕ 요소와 초점이 맞지 않음 ⚠검색 엔진 최적화에 좋지 않음(black hat) 👎opacity: 0;❌스크린 리더 활동에문제가 많음 👎사용 지양 👎clip: rect(0, 0, 0, 0);❌⭕더 이상 권장되지 ..

CSS 2024.05.12

[CSS] flex와 inline-flex

flex : flex container(부모 요소)가 block 요소 부모 요소가 한 줄을 차지하고, 다음 부모 요소는 그 아래에 배치 부모 컨테이너의 크기에 맞게 자동으로 확장되어 가로로 채워진다. 컨테이너 안의 자식 요소들이 반응형으로 동작 ⭕  inline-flex : flex container(부모 요소)가 inline 요소 부모 요소가 다른 인라인 요소와 같은 줄에 배치 부모 컨테이너의 크기에 맞게 자동으로 확장되지만, flex와 달리 한 줄을 차지하지 않는다는 점에서 차이가 있다. 컨테이너 안의 자식 요소들이 반응형으로 동작하지 않음 ❌See the Pen iiinlineflexxx by nadia kwon (@nadia-kwon) on CodePen.  참고  display - CSS: C..

CSS 2024.05.10