본문 바로가기

분류 전체보기192

데이터 타입 📖 데이터 타입(Data Type)데이터 타입 : 변수에 저장되는 데이터의 유형* Primitive(원시) 데이터 타입  - 더 이상 나누어질 수 없는 단일 값으로 구성된 데이터 타입  - number, string, boolean, undefined, null, symbol,...* Object(객체) 데이터 타입  - 여러 값을 담을 수 있는 복합 데이터 타입. 객체는 키 - 값 쌍의 컬렉션  - function, object, array,... 1) number(숫자) 데이터정수, 소수점, 지수를 표현var num1 = 10;var num2 = 10.5;var num3 = 1e+2;     console.log(num1);   //10console.log(num2);   //10.5console... 2024. 5. 10.
상수 선언 📖 상수 선언(const)변수(var, let) : 변경되는 데이터를 선언상수(const) : 변경하지 않을 데이터를 선언let cm = 200;const DIVISION_VALUE = 100;let m = cm / DIVISION_VALUE;document.write(m); //2 1) 상수 선언시 주의사항const는 이미 선언한 상수에 대해 중복 선언 불가 & 상수 값 재지정 불가const DIVISION_VALUE = 100;const DIVISION_VALUE = 100;document.write(m); //상수 중복선언 에러const DIVISION_VALUE = 100;DIVISION_VALUE = 1000;document.write(m); //상수 값 재지정 에러     출처.. 2024. 5. 10.
변수 선언 📖 변수 선언(var, let)변수 : 데이터를 저장하는 장소 & 저장되어 있는 데이터를 호출 1) var(variable)를 이용한 변수 선언* javascript 에서는 HTML 태그를 작은따옴표('')안에 나타냄 ① 여러개의 변수를 선언할 경우 다음과 같은 방법으로 선언할 수 있음 ② 변수에 새로운 데이터가 저장되면 기존 데이터는 사라짐 2) 변수명 관련 주의사항변수명은 띄어쓰기할 수 없음변수명의 첫 글자에는 숫자 / 특수문자가 올 수 없음. * 예외) 특수문자 '_', '$'는 사용 가능예약어 : 자바스크립트에서 특별한 용도를 가진 키워드. 예약어를 변수명으로 사용할 수 없음예약어 : break, case, catch, continue, default, delete, do, else, final.. 2024. 5. 9.
자바스크립트 기초 📖 javascript 란?웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어(Java ≠ javascript, 둘은 아무 연관이 없음) 1) javascript의 기본 형식 2) javascript의 기본 규칙실행문이 끝나면 세미콜론(;)을 붙임대소문자를 구분함가독성을 위해 들여쓰기를 사용함한 줄 주석처리(//) & 여러 줄 주석처리(/* */) 3) 적용 방법① HTML 문서 내부에 적용② HTML 문서 외부에 적용 4) 적용 위치①  5) 기본 명령어입력 : prompt('입력 제목', '입력 내용')출력 : document.write('출력 내용') / alert('출력 내용') / console.log('출력 내용')확인 : confirm('확인 내용') [TIP] documen.. 2024. 5. 9.
grid [grid : 두 방향(가로, 세로) 레이아웃 시스템(2차원)] * 용어정리 - grid container : grid의 전체영역 - grid item : grid 컨테이너의 자식요소들(grid 컨테이너의 셀을 채우는 내용물) - grid track : grid의 행(row) or 열(column) - grid cell : grid의 한 칸을 의미. grid item 하나가 들어가는 가상의 칸 - grid line : grid cell을 구분하는 선 - grid number : grid line의 각 번호 - grid gap : grid cell 사이 간격 - grid area : grid line으로 둘러싸인 사각형 영역. grid cell의 집합 * display: grid; => 컨테이너에 disp.. 2024. 5. 7.
flex [flex : 한 방향 레이아웃 시스템(1차원)] * display: inline, block, inline-block, flex;  -> display는 상위개념 / flex-direction는 하위개념 ( display: flex; 로 전체 구성을 flex 선언했지만 일부는 세로정렬(column)하고싶을 때~) => 컨테이너에 display: flex; 를 설정하는 것으로 시작함 =======flex 컨테이너에 적용하는 속성들; 전체 아이템에 적용======= 1) flex-direction (배치방향) : row, row-reverse, column, column-reverse; 2) flex-wrap (줄넘김 처리) : nowrap, wrap, wrap-reverse; 3) flex-flow (f.. 2024. 5. 7.