JudithHopps JudithHopps

I. 숫자 자료형으로 표현되는 것 1. 양과 음의 정수와 실수 // 자바스크립트에는 정수와 실수의 자료형이 따로 있지 않음 정수와 소수, 음수 모두 number! let integer = 100; let real = 1.234; let negative = -5.67; ​ console.log( typeof integer, typeof real, typeof negative ); 2. 무한대 let x = 1 / 0; console.log(x, typeof x); // 무한대에는 양음이 있음 console.log(-x, typeof -x); let y = -1 / 0; console.log(y, typeof y); let z = Infinity; console.log(z, typeof z); 3. 숫자가 ..

JS의 특징 1. 동적타입을 가진 언어이다. 정적 타입과 달리 유동적으로 자료형을 바꿀 수 있다. 특정 값이 할당된 변수에, 그와 다른 자료형의 값을 넣는 것이 가능 자유롭지만 그만큼 자료형 관련 오류들에 취약함 오늘날 TS가 뜬 이유 참고로, 자료형 확인은 typeof 명령어를 사용하면 된다. I. 기본 표기방법 작은따옴표 - ' ~ ' 큰따옴표 - " ~ " 📌 자주 사용되는 이스케이프 표현 이스케이프 표현대체 \' 작은따옴표 \" 큰따옴표 \n 줄바꿈 \t 탭 \\ 백슬래시 let word = '안녕하세요~\t\t반갑습니다!\n저는 \\홍길동\\입니다.'; console.log(word); 👉 이스케이프 표현 MDN 문서 보기 긴 문자열을 여러 줄에 표현 const longstr = ' aaaaaa..

var는 역사의 뒤안길로 let과 const를 사용할 것 var에 대해서는 이후에... 변수와 상수 값의 의미 나타냄 값의 재활용 변수 variable 담긴 값이 바뀔 수 있는 주머니 let 사용 1. x란 변수를 선언(주머니 만듦)만 한 뒤 값을 넣음 💡 브라우저 콘솔에서 줄바꿈: shift + enter undefined: '아직 값이 정해지지 않았다' 라는 값 메모리상으로는 선언과 초기화를 따로 하는 것과 동일 undefined 할당 후 재할당 같은 값이 다른 데이터 영역에 저장되지 않음 메모리절약 값 변화시 메모리상 가리키는 위치가 변경 기존 위치에 새 값을 넣는 것이 아님 차지하는 자리가 다른 크기의(자료형이 다른) 데이터가 재할당될 수 있으므로 이미 만들어진 주머니를 다시 만들(재선언) 수 없..

브라우저 콘솔창 설정 개발자 도구 열기 윈도우: Ctrl + Shift + i 맥: command + option + i\ 콘솔 설정 👈 위치 왼쪽으로 이동 콘솔 Console 탭 열기 콘솔 비우기: Ctrl + L - 윈도우, 맥 모두 윈도우 한정 - 브라우저 스크롤바 엣지 주소창에 edge://flags 입력하여 접속 scrollbar 검색 Window style overlay scrollbars 찾아 Enabled로 변경 크롬 주소창에 chrome://flags 입력하여 접속 scrollbar 검색 Overlay scrollbars 찾아 Enabled로 변경 탭 사이즈 && 자동 줄바꿈 설정 VS Code 설정 창 열기 윈도우: Ctrl + , 맥: Command + , Tab Size 항목 2로 ..

1. contact a. radio 버튼 구현 .contact__tab { display: flex; flex-wrap: wrap; justify-content: center; font-size: var(--font-size-larger); } /* 라디오 버튼 커스터마이즈 */ input[type="radio"] { all: unset; display: inline-block; padding: 0.8em 4em; background-color: white; cursor: pointer; } input[type="radio"]:checked { color: white; background-color: var(--color-main); } #ct_1 { border-radius: 12px 0 0 12px;..

1. HTML & CSS 섹션 1. 초록색 체크 표시 /* 초록색 체크표시 */ .html-css__spec dd::before { content: ""; display: inline-block; margin-right: 0.4em; width: 12px; height: 6px; border-left: 4px solid var(--color-sub); border-bottom: 4px solid var(--color-sub); vertical-align: 0.2em; transform: rotate(-45deg); } 2. 로고 아래 그림자 .html-css__thumb { position: relative; } /* 로고 아래 그림자 */ .html-css__thumb::after { content: ..

1. main /* 데스크탑 */ @media (min-width: 769px) { main { display: grid; grid-template-columns: 1fr 1fr; } } .section { padding: 64px 16px; text-align: center; } .section__tag { font-size: var(--font-size-tag); color: var(--color-sub); } .section__title { font-size: var(--font-size-title); font-weight: bold; color: var(--color-text); } 2. about a.모바일 화면 /* 미디어 */ @media (max-width: 768px) { .about {..

1. header 상단 고정 header { display: flex; /* 위에 붙도록 */ position: sticky; /* 스크롤업되는 컨텐츠 위로 올라오도록 */ z-index: 2; top: 0; height: var(--height-toolbar); justify-content: space-between; align-items: center; background-color: var(--color-main); color: white; } 2. 데스크탑 메뉴바 a. 메뉴 나열 .header__nav-item { display: inline-block; position: relative; } .header__nav-item:last-child { margin-right: 1.6em; } .hea..