가오리의 코딩일기

🧩 논리 연산자 Q1. 다음 OR 연산의 결과는 무엇일까요? alert(null || 2 || undefined); → alert 창에 2 Q2. OR 연산자의 피연산자가 alert라면? alert( alert(1) || 2 || alert(3) ); → alert 창에 1, 2 Q3. 다음 AND 연산의 결과는 무엇일까요? alert( 1 && null && 2 ); → alert 창에 null Q4. AND 연산자의 피연산자가 alert라면? alert( alert(1) && alert(2) ); → alert 창에 1, undefined Q5. OR AND OR 연산자로 구성된 표현식 alert( null || 2 && 3 || 4 ); → alert 창에 3 → &&가 ||보다 우선순위가 높다 Q..

🧩 기본 연산자와 수학 Q1. 전위형과 후위형 let a = 1, b = 1; let c = ++a; let d = b++; → a = 2, b =2, c =2, d = 1 Q2. 할당 후 결과 예측하기 let e = 2; let x = 1 + (e *= 2); → e = 4, x = 5 Q3. 형변환 "" + 1 + 0; // "10" "" - 1 + 0; // -1 true + false; // 1 6 / "3"; // 2 "2" * "3"; // 6 4 + 5 + "px"; // "9px" "$" + 4 + 5; // "$45" "4" - 2; // 2 "4px" - 2; // NaN 7 / 0; // Infinity " -9 " + 5; // -9 5 " -9 " - 5; // -14 null +..

→ 연산자 : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산을 수행해 하나의 값을 만든다 → 피연산자 : 연산의 대상, "값" 🧩 산술 연산자(arthmenc operator) → 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다 → 산술 연산이 불가능한 경우 NaN(Not a Number) 🧩 이항 산술 연산자 → 부수효과가 없다 + 할당연산자, 증가/감소 연산자 등 일부 연산자는 다른 코드에 영향을 주는 효과 → 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없다 🧩 단항 산술 연산자 → 증가/감소 연산자, 부수 효과가 있다 → 전위 증가/감소 연산자 : 먼저 피연산자의 값 증가, 감소 → 후위 증가/감소 연산자 : 나중에 피연산자의 값 증가, 감..

✏️ justify-content → 메인 축 방향 결정 → flex-start : 요소들을 컨테이너의 왼쪽으로 정렬 → felx-end : 요소들을 컨테이너의 오른쪽으로 정렬 → center : 요소들을 컨테이너의 가운데로 정렬 → space-between : 요소들 사이에 동일한 간격을 둔다 → space-around : 요소들 주위에 동일한 간격을 둔다 ✏️ flex-direction → 아이템들이 배치되는 축의 방향(가로|세로) → row : 요소들을 텍스트의 방향과 동일하게 정렬 → row-reverse : 요소들을 텍스트의 반대 방향으로 정렬 → column : 요소들을 위에서 아래로 정렬 → column-reverse : 요소들을 아래에서 위로 정렬 ✏️ flex-wrap → 줄넘김 처리 설..

✏️ Negative margins → 문서 내의 정상적인 흐름을 건들이지 않는다 → 요소를 이동하려고 음수 마진을 사용하면 그 뒤에 오는 모든 요소들도 같이 이동 → 음수 패딩 사용 시 테두리가 내용으로 축소, 내용 영역이 내용보다 작아지기 때문에 의미 없음 ✏️: active → 사용자가 활성화한 요소를 나타낸다 → 버튼을 누르는 순간부터 떼는 시점까지 → link→ visited → hover → active 순서로 디자인하기 ✏️ @import → 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓴다 @import url("bluish.css") speech; @import url("chrome://communicator/skin/"); ✏️ display: inline; → 줄을 바꾸지 않고 다른..

RED Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, corporis blanditiis earum porro maiores ratione. LAUNCH GREEN Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam dolores dolore voluptatibus odio consequatur quis? LAUNCH BLUE Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste rem ipsa natus laudantium nam amet? LAUNCH body { margin: 0; padding: 0; back..

✏️ 1과 '1'은 같을까? → 숫자 1은 산술 연산을 위해 생성하지만 문자 1은 텍스트를 화면에 출력하기 위해 생성한다 → 확보해야 할 메모리 공간의 크기도, 메모리에 저장되는 2진수도, 읽어서 해석하는 방식도 모두 다르다 💡 숫자(number)타입 → 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재 → 다른 언어들은 int, long, float, double 등 다양한 숫자 타입을 제공하지만 자바스크립트는 아니다 → 자바스크립트는 모든 수를 실수로 처리하기 때문에 정수만을 위한 타입이 없다 → 정수로 표시된다 해도 실수이기 때문에 정수로 표시되는 수끼리 나누었을 때 실수가 나올 수 있다 → 3가지 특별한 값 : Infinity(양의 무한대), -Infinity(음의 무한대), NaN(산술 연..

body { width: 100vw; height: 100vh; margin: 0; padding: 0; background-color: rgb(255, 98, 0); display: flex; justify-content: center; align-items: center; } .bigBox { background-color: rgb(226, 223, 200); width: 500px; height: 500px; display: flex; justify-content: space-around; align-items: center; flex-direction: column; } .box { width: 100px; height: 100px; background-color: rgb(19, 61, 18); ..

💡 값(value) → 표현식이 평가되어 생성된 결과 → 식을 해석해서 값을 생성하거나 참조하는 것 → 메모리에 저장된 값 : 0100 0001 == 65 =='A' → 변수 : 하나의 값을 저장하기 위해 확보된 메모리 공간 자체, 그 메모리 공간을 식별하기 위해 붙인 이름 → let sum = 10 + 20; // 메모리 공간에 저장된 것은 10+20이 아닌 할당 이전에 평가된 값인 30이다 💡 리터럴 → 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 💡 표현식(expression) → 값으로 평가(산출)될 수 있는 문, 함수의 인자로 들어갈 수 있다 → 평가되면 새로운 값을 생성하거나 기존 값을 참조 → 리터럴, 식별자(변수명, 함수명), 연산자, 함수 호출 등의 조합으..

stingray Information Kind Information 크기: 1~2m 특징: 독이 있다 천적: 상어, 돌고래, 사람 먹이: 작은 고기, 조개류, 갯지렁이, 갑각류 서식지: 서태평양 지역의 수심 10m 남짓한 얕은 바다 HOME Kind Whiptail Stingray Diamond Stingray Blue Stingray Groovebelly Stingray Common Stingray HOME /* style.css */ body { background-color: #384b60; } article { width: 300px; height: 500px; border: 5px double #384b60; border-radius: 10px; margin: 150px auto; backgro..