본문 바로가기

Dev. Front-End

(29)
[Javascript] 배열 (Array) / length, push ​ ● 배열 : 여러개의 변수를 한꺼번에 선언해 다룰수있는 자료형 입니다. 자바스크립트에서는 문자열, 숫자, 불(bool), 객체, 함수, undefined의 총 여섯가지 자료형이 있습니다. 배열은 객체 자료형중 하나입니다. 기본적으로 위 소스처럼 배열을 선언합니다. array변수에 저장해주었습니다. 배열에는 문자열, 숫자, 불(bool), 객체, 함수, undefined의 총 여섯가지 자료형을 넣을수 있습니다. 배열을 선언하고, 배열 기호 안에 들어간 숫자를 인덱스(index)라고 합니다. 인덱스는 특별히 별도로 지정해주지않는한 위처럼 소스를 입력하면, 0부터 시작됩니다. 123의 값은 인덱스 0 에 저장되고, 32의 값은 인덱스 1에 저장되고, 102의 값은 인덱스2 ........ 에 저장됩니다. ..
[Javascript] 클로저 (Closure) ● 클로저란? : 지역변수를 남겨두는 현상이라고 부르기도하고, 리턴된 함수 자체를 클로저라고도하며, 정의가 워낙 다양하기에 아래 예제를 통해 설명드리겠습니다. ​ ​ ​ ● 클로저 조건 - 반환되는 내부 함수는 외 부 함수의 실행환경에서 실행됩니다. - 내부 함수가 익명 함수로 되어 외부 함수의 return값으로 사용되어야 합니다. - 내부 함수에서 사용되는 변수는 외부 함수의 변수 스코프에 있어야 합니다. function test(name){ var output = 'Hello ' + name +'!'; } console.log(output); 아마 출력에서 오류가 발생하게 됩니다. 함수안에 있는 output변수는 지역변수이므로 함수 외부에서 사용할수없기에 오류가 발생합니다. 지역변수는 함수가 실행 될..
[Javascript] let, const, var (var과 let의 차이점) ES6와ES5 ● 식별자에 값을 넣을 때 사용하는 키워드 ES5까지는 var키워드밖에 없었습니다. ES6부터 let과 const 키워드의 개념이 추가되었습니다. 모두 기본적인 사용방법은 같지만, 위의 표와같이 변수와 상수 그리고 스코프,재선언을 구분하며 사용합니다. ES6에서 상수가 생긴 이유는 성능 향상때문입니다. 상수는 변할 가능성이 없기에 처리해야 할것이 줄어들었습니다. ( 변수는 저번편에서 자세히 말씀드렸기에 간단하게 말씀드리겠습니다. ) * 변수 : 변할 수 있는 값 (변경가능) * 상수 : 변하지 않는 고정값 (즉, 변경 불가) ● var와 let의 차이 ​ 예시 1) //전역 스코프 { // 스코프 A { //스코프 B } } ​ ​ 예시 1을 보면 일반적으로 특정 스코프 안에서 선언한 변수는 해당 스코프..
[Javascript] 변수 (복합대입연산자, 증감연산자, typeof, undefined) ● ​변수 : 값을 저장할 때 사용하는 식별자 입니다. 숫자 자료형 뿐만 아니라 모든 자료형을 저장할수있습니다. "var"키워드 뒤에 식별자를 쓰면 해당 식별자는 변수가 됩니다. var라는 키워드 뒤에 pi라는 식별자를 두면 그게 변수가됩니다. 그리고 alert 출력으로 pi변수를 매개변수 안에넣으면 해당 값이 출력됩니다. ● ​복합 대입 연산자 : 대입 연산자와 다른 연산자를 함께 사용하는 연산자입니다. num변수를 선언해주고, 10의 값을 저장해줍니다. num+=10은 num=num+10과 같은 식입니다. 그렇기에 현재 num변수에 10의 값이있기에 10+10이 되서 20이 출력됩니다. ● 증감 연산자 : 복합 대입 연산자를 약간 간략하게 사용한 형태입니다. var키워드를 사용해서 num변수에 10을..
[Javascript] 기본문법 ( 표현식, 주석, 출력-alert, 각종 자료형, 이스케이프문자 ) 자바 스크립트를 실습하기 위해서 editor가 필요합니다. 아래 링크를 클릭하고 설치방법을 통해 설치하고 실습하시면 됩니다! (아래 아톰 에디터 설치방법 참고) https://choseongho93.tistory.com/entry/HTML-아톰atom설치방법-및-설정-출력해보기-무료-웹-에디터 [HTML] 아톰(atom)설치방법 및 설정 & 출력해보기 (무료 웹 에디터) ▶ 아톰(atom)설치방법 및 설정 & 출력해보기 (무료 웹 에디터) ● 아톰(Atom)이란? : 다양한 프로그래밍 언어의 편집이 가능한 편집기입니다. 패키지를 통해 사용자 편의에 맞도록 커스터마이징할 수 있습니다. (.. choseongho93.tistory.com ● 기본 용어 - 표현식 : 값을 만들어 내는 간단한 코드 - 문장 :..
[CSS] 가상 클래스 선택자(link, visited, active, hover, text-decoration) ▶ 가상 클래스 선택자(link, visited, active, hover, text-decoration) ● 가상 클래스 선택자 : 선택자라는 것은 태그, id, class등과 같이 html문서에 존재하는것들을 지정하는것입니다. 반면에, 가상클래스 선택자는 어떤상태를 의미하고 이런 상태에는 태그, id, class처럼 html문서 상에 있는 것이 아닙니다. 예를 들어서 상태를 지정하는 가상 선택자에는 hover선택자, link선택자, visited선택자, active선택자가 있습니다. - link : 웹 문서에서 사용자가 방문하지 않았던 곳을 표시합니다. - visited : 웹 문서에서 사용자가 방문한 곳을 표시합니다. - hover : 웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간을 나타..
[CSS] id와 class(아이디와 클래스)의 개념 및 차이점 ▶ id와 class(아이디와 클래스)의 개념 및 차이점 ● class : 자주 사용되는 스타일에 적용하는 것이라고 생각하시면됩니다. 예를 들어서 빨강색 or 파란색 등 색상을 미리 지정하고 HTML에 적용시키는 방법입니다. css에서 정의하는 방법은 .class_name{속성명:속성값; 속성명:속성값;} 이런식으로 적용합니다. ● id : id는 class와 다른 형태입니다. css에서의 정의 방법은 #id_name{속성명: 속성값; 속성명:속성값;} 이런식으로 적용합니다. id 사용할때 중요한것은 class와 다르게 한페이지에서 한번만 사용이 가능합니다. id는 페이지 내에서 특정 위치나 태 그를 지정하는 것이기 때문에 오직 페이지내에서 한번만 사용할 수 있습니다. ● id와 Class의 차이점 : ..
[CSS] CSS의 개념이해 및 사용법 ( 간단한 실습 ) ▶ CSS의 개념이해 및 사용법 ( 간단한 실습 ) ● CSS란? : CSS라는 언어는 HTML이 기반입니다. HTML을 모른다면 CSS를 사용할 수 없습니다. 설명을 들으면서 찾아서 배운다면 문제가 안되지만, HTML의 기본적인 지식이 있으면 이해하기 수월합니다. HTML은 정보를 담고, CSS는 HTML의 정보들을 꾸며주는 디자인이라고 생각하시면 됩니다. 예를들어, 제목은 글자 크기도 크고 두껍게 표시하고 내용은 작은 글씨크기와 얇게 표시하고싶다면 HTML로 제목과 내용을 작성하고 CSS로 제목과 내용의 style을 꾸며줄수있습니다. ● CSS의 사용법 CSS는 기본 구조가 딱히 없기에, HTML의 사이에 을 넣어주고 꾸며주면 됩니다. 밑에 실습들을 통해 배워보겠습니다. Universal Select..