까먹기 위해 기록하는 것이다

1. 배열 1. 자바스크립트 배열 자바스크립트에서 배열은 기본 자료형 중 하나로 되어있다. 배열의 길이를 지정하지 않고 가변적인 배열로 사용할 수 있다. 여러 자료형의 값을 하나의 배열에 담아서 사용할 수 있다. 2. 배열의 메소드 join: 배열의 값들을 하나의 문자열로 합쳐서 반환 reverse: 배열의 순서를 역순으로 바꿔서 반환 sort: 배열을 오름차순으로 정렬 후 반환 splice: 지정한 index 범위 만큼의 데이터 삭제 후 새로운 값 추가 slice: 원하는 구간만큼 잘라서 배열로 반환 pop: 배열의 마지막 요소 꺼내서 반환하고 원본 배열에서 꺼낸 요소 삭제 push: 배열의 마지막 요소 뒤에 새로운 요소 추가

1. 조건문 1. ifelse ifelse 자바와 동일하게 if(조건1) { //조건1이 true일 때 실행 } else if(조건2) { //조건1이 false이고 조건2가 true일 때 실행 } ... else { //위의 모든 조건이 false일 때 실행 } 2. switch ~ case ~ default 1. switch(변수) { case 값1: //변수가 값1일 때 실행 break; case 값2: //변수가 값2일 때 실행 break; ... default: //변수가 위의 모든 값이 아닌 다른 값일 때 실행 } 2. 반복문 1. for for(let(var) 초기화 식; 조건식; 증감식) { //반복 실행 } 2. while while(조건식) { //반복 실행 } 3. do~while d..

1. 연산자 1. 산술연산자 산술연산자는 Java와 모두 동일하다. +, -, *, /, %, --, ++ 연산방식은 모두 Java의 산술연산자의 연산방식과 동일하다. 2. 대입연산자 =, +=, -=, *=, /=, %= 과 같이 Java의 대입연산자와 모두 동일하다. 3. 비교연산자 ==, >, >=,

1. Variables(변수) 1. JavaScript의 변수 자바스크립트의 변수는 타입이 존재하지 않는다. 기본 자료형인 숫자형, 문자열, 논리형, 배열, 객체, undefined, null 7개의 자료형이 존재하긴 하지만 변수를 선언할 때 자료형을 지정할 수가 없다. 자료형 유추 기능을 통해서 할당되는 변수에 값에 의해 자동적으로 자료형이 정해진다. 자료형을 지정하지 않다보니까 에러잡기가 힘들어져 최근에는 타입스크립트(자바스크립트 + 타입)라는 언어가 유행한다. //ES5 var num = 1; -> 숫자형으로 사용. var numStr = "1"; -> 문자열이나 숫자형으로 사용 var sum1 = num + 2; => 3 var sum2 = numStr + 2; => 3 //ES6 const nu..

1. JavaScript 1. JavaScript란 JavaScript는 1995년에 넷스케이프에서 제작한 인터프리터 언어이다. 인터프리터가 각각의 브라우저에 내장되어 있다. OS에서 동작하는 것이 아닌 브라우저에서 동작한다. HTML이 웹 문서의 구조를 담당하고 CSS가 웹 문서의 디자인을 담당한다면 JavaScript는 웹 문서를 동적으로(다이나믹하게) 구성할 수 있게 해준다. JavaScript의 특징 HTML 웹 문서의 태그들을 제어할 수 있다. 사용자에 의해 이벤트(사용자가 행하는 동작)가 발생했을 때 스타일을 바꾼다던지 애니메이션 효과를 준다던지 등과 같은 태그 제어가 가능하다. 다양한 라이브러리나 API가 존재하여 개발 기간을 단축을 시킬 수 있다. 데이터 시각화, 차트, 그래프, 통계등에 ..

1. 반응형 웹 1. 반응형 웹이란? 요즘은 pc보다 모바일이나 태블릿으로 웹 사이트에 접속하는 경우가 많은데 모바일이나 태블릿에서 PC에서 보던 웹 사이트 화면은 글씨도 너무 작고 레이아웃도 맞지 않아서 보기 불편한 점이 있다. 따라서 모바일이나 태블릿 같은 기기들의 화면에 대응하기 위해 기기의 화면사이즈에 따라 레이아웃을 변경하거나 글자 크기를 키우는 등 기기에 알맞는 형태의 웹 사이트를 표출하는 것을 반응형 웹이라고 한다. 2. 모바일 기기를 위한 뷰포트 반응형 웹 디자인에서 기본적으로 알아야 할 것이 뷰포트다. 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다. 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 부분을 말한다. 뷰포트 지정하기 head 태그 사이에 작..

1. CSS와 애니메이션 1. 트랜스폼(변형) 특정 태그의 크기나 위치를 변경하는 것을 트랜스 폼이라고 한다. CSS에서 변형을 적용하기 위해서는 tranform속성을 지정해 줘야한다. transform: 함수(어떤 변형을 진행할 지) 2차원 트랜스폼(변형) 2차원 평면에서 웹 태그들을 변형한다. 2차원 좌표인 x축, y축을 사용하여 가로, 세로 이동을 시키거나 가로, 세로로 축소/확대 시키는 변형을 만들 수 있습니다. 2차원 변형 함수(tranform의 속성값) translate(x, y): 지정한 크기 만큼 x축, y축 이동 translateX(x), translateY(y): 각각 x축, y축 이동 scale(x, y): 지정한 크기만큼 x축, y축으로 축소/확대 scaleX(x), scaleY(y..

1. 다양한 선택자들 1. 속성 선택자 태그에 작성한 속성을 이용해서 태그를 선택할 수 있는 선택자 선택자[속성명]: 해당 속성을 가지고 있는 태그를 선택해서 사용한다. 선택자[속성명=속성값]: 해당 속성을 가지면서 속성값도 동일한 태그만 선택해서 사용한다. 2. 가상클래스 가상클래스는 사용자가 동작에 반응하는 클래스 가상클래스를 이용하면 사용자가 동하는 것에 따라 스타일을 변경할 수 있다. 대표적인 가상클래스의 종류 선택자:link : 사용자가 방문하지 않은 링크에 대한 스타일 적용 선택자:visited : 사용자가 방문한 링크에 대한 스타일 적용 선택자:hover : 사용자가 해당 태그에 마우스 커서를 올렸을 때에 대한 스타일 적용 선택자:active : 사용자가 해당 태그를 활성화 했을 때에 대한 ..

1. 표 관련 스타일 1. 표 제목의 위치를 지정하는 caption-side caption의 위치를 위인지 아래인지 정해줄 때 사용하는 속성 지정가능한 속성 값 top: 표 위에 제목 표시. 기본 값. bottom: 표 아래에 제목 표시. 2. 표 테두리 스타일을 지정하는 border 일반 태그에서 사용하는 border와 동일하게 설정 가능. 표의 바깥과 셀 모두 테두리를 지정해 줘야 된다. 3. 표 테두리를 통합해서 표출하거나 분리해서 표출하는 border-collapse 표의 테두리와 셀의 테두리를 합쳐서 하나의 테두리만 표출할 것인지 아니면 분리해서 모든 테두리를 표출할 것인지 결정해주는 속성 지정가능한 속성 값 collapse: 테두리를 하나로 합쳐서 표출 seperate: 테두리를 분리하여 따로..

1. CSS 포지셔닝 1. CSS 포지셔닝이란 CSS 속성을 이용하여 HTML 웹 문서의 태그들을 적절한 위치에 배치하는 것을 CSS 포지셔닝이라고 한다. float, position, visibility등의 속성들을 이용해서 태그들을 원하는 위치에 배치하여 웹 문서 구조를 잡는 작업 2. CSS 포지셔닝의 다양한 속성들 태그를 왼쪽이나 오른쪽 배치하는 float 속성 태그의 레이어를 바꿔서 붕 떠있게 하는 속성. 붕 떠있는 태그의 위치를 왼쪽 구석이나 오른쪽 구석으로 배치할 수 있다. 지정가능한 속성 값 left: 해당 태그를 웹 문서의 왼쪽에 배치 right: 해당 태그를 웹 문서의 오른쪽에 배치 none: 해당 태그를 좌우 어느 쪽에도 배치하지 않음 태그들의 배치 방법 지정하는 position 웹 ..