누워서 떡먹기 코딩

자바 스크립트에서 함수 선언 방식 function 함수명 ( 매개변수1, 매개변수2, ..){ 기능 구현을 위한 코드 작성 } 함수명(입력값1, 입력값2, ....); 로 함수를 사용한다. 함수가 결과값을 반환하는 경우 자바처럼 return으로 반환한다. 자바스크립트 함수 특징 매개변수와 입력값의 데이터 타입이 동일한지 검사하지 않는다. 이유: 데이터 타입을 지정하지 않아서 매개변수와 입력값의 개수가 같은지 검사하지 않는다. 이유: 내부적으로 arguents객체가 호출되어 인자들을 배열형태로 저장한다. 입력값의 개수가 매개변수의 개수보다 적다면 매개변수의 값은 undefined로 설정된다. (자바스크립트 자료형 참고) 객체(Object) 객체지향 프로그래밍에서 데이터(속성)과 그 데이터에 관련되는 동작(..

배열(array) : 같은 타입의 여러 변수를 하나의 묶음으로 다루는것 인덱스와 인덱스에 대응하는 데이터들로 이루어진 자료구조 - 배열에 데이터를 추가할 때 자동으로 공간이 할당된다. 자바스크립트의 배열은 모든 타입을 저장할 수 있는 구조 - 한배녈의 요소가 모두 같은 타입일 필요는 없음 - 다른 배열이나 객체 포함 배열 인덱스 - 인덱스는 배열의 시작 위치에서부터 데이터가 있는 상대적인 위치(0부터 시작) 자바스크립트에서의 배열선언 방식은 2가지가 있다. len nameList = []; let nameList = new Array(); 가로안에는 자바처럼 데이터를 몇개 할당할건지 숫자를 적는다. 자바 스크립트의 배열 크기는 동적이다. 배열의 크기가 지정되어 있어됴 데이터를 추가하면 저장공간이 자동으로..

자바 스크립트에서는 일반적으로 변수를 var로 선언한다. 변수의 의미 사전적의미는 "변화를 줄수있는" 또는 "변할 수 있는 수" 프로그래밍에서의 의미는 데이터를 담을 수 있는 공간이다. 자바에서 변수는 var, let으로 선언하고 상수는 const로 선언한다. 변수 재선언 재할당 var 가능 가능 let 불가능 가능 const 불가능 불가능 변수의 재선언이란 var name = 10; 이렇게 선언하고 또다시 var name = 5; 로 선언하면 재선언이고 변수의 재할당이란 var name = 10; name = 5; 로 쓰면 재할당이다. 자료형 설명 number 정수,실수등 산술연산이 가능한 자료형 string 문자열로 이루어진 자료형 boolean 참/거짓으로 표현되는 논리 형태의 자료형 undefin..

JavaScript 웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 모든 웹 브라우저에서 동작한다. 웹 브라우저에서 실행 결과를 즉시 확인한다. 다양한 용도의 프로그램 개발 다양한 자바스크립트 공개 API 다양한 라이브러리와 프레임워크 웹페이지를 만들때 JavaScript를 가장 많이 사용한다. 그리고 최근에 JavaScript 기반인 TypeScript도 크게 증가하는 추세이다. 따라서 JavaScript를 배워두면 웹페이지를 개발할때 많이 도움이 될거다. HTML내에서 자바스크립트를 쓰려면 을 쓴후 그안에 코드를 작성해야한다. 내부방식은 검사에서 다보이기 때문에 다른사람들이 접근하기 쉬워서 회사 내에서나 쓰지 그밖에는 외부 방식을 사용한다. 인라인 방식은 접근은 간단하지만 코드..

background-image: url('이미지 주소'); 로 이미지를 넣는다. background-repeat : 배경 이미지 패턴 repeat : 가로 세로 반복적으로 배열, 기본값 repeat-x : 이미지가 가로로만 반복 repeat-y : 이미지가 세로로만 반복 no-repeat : 이미지가 반복 배열되니 않는다. background-size 속성 : 배경이미지 크기 지정 auto : 기본값으로 배경 이미지 원래의 폭과 너비 그대로 표시한다. cover : 배경지역이 배경이미지로 완전히 덮이도록 이미지를 최대한 크게해서 표시한다. 따라서 이미지의 일부분이 안보일 수 있다. contain : 너비와 높이가 내용 안쪽에 알맞은 방식으로 이미지를 가장 크게 조절한다. inital : 기본값으로 초기화..

float속성 정렬을 하기 위해 사용된다. none : 정렬X left : 왼쪽 정렬 right : 오른쪽으로 정렬 inital : 기본값으로 설정함 inherit : 부모요소로부터 상속한다 *절대 위치 요소는 float속성을 무시한다.* clea속성 : float속성값의 영행을 받지않는 속성 left : left만 무시 right : right만무시 both: 둘다 무시 float 예시1 See the Pen float by 정혜선 (@Diligent-milk) on CodePen. float 예시2 See the Pen float2 by 정혜선 (@Diligent-milk) on CodePen. float 예시3 See the Pen RwpjdpV by 정혜선 (@Diligent-milk) on Co..

position 속성 static : 모든 태그들의 기본 상태 relative : 태그의 위치를 살짝 변경하고 싶을 때 사용, static인 상태를 기준으로 주어진 픽셀만큼 움직인다. absolute : position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이다. fixed : 항상 특정 위치에 고정 position 예시1 See the Pen position by 정혜선 (@Diligent-milk) on CodePen. position 예시2 아래 예시에서 다음과 같은 코드를 썼는데 right: 0 ----> 오른쪽 끝으로 배치 bottom: 0 --->..

line-height 속성 줄 간격 지정 한줄일 경우에만 가운데 정렬을 한다. 속성 값 nomal : 기본값 보통 1.0~1.2 숫자 : 현재 글꼴 크기 * 배수이다. 예를 들어 현재 글꼴 크기가 10px이고 line-height:1.5이면 줄간격은 15px가 된다. 길이 : px, pt, cm등 고정된 간격 % : 현재 글꼴 크기의 백분율로 높이를 지정 상속 여부 : 상속 됨 음수값은 지정되지 않는다. font 속성과 동시에 줄간격 속성을 지정할 수 있다. 이때는 font: 1px/1.5 이런식으로 표시한다. line-height 예시 See the Pen line-height by 정혜선 (@Diligent-milk) on CodePen.

border-radius 속성 요소의 속성중 모서리를 둥굴게 하는 속성이다. border-top-left-radius : 왼쪽 위 모서리를 둥굴게 border-top-right-radius : 오른쪽 위 모서리를 둥굴게 border-bottom-left-radius : 왼쪽 아래 모서리를 둥굴게 border-bottom-right-radius : 오른쪽 아래 모서리를 둥굴게 border-radius 예시 See the Pen border-radius by 정혜선 (@Diligent-milk) on CodePen.

box-sizing속성 요소의 크기를 화면에 표시하는 속성 content-box: 가로, 세로 크기에 안쪽여백이 더해져서 표현 border-box: 가로, 세로 크기에 영향을 주지 않도록 표현 box-sizing 예시 See the Pen box-sizing by 정혜선 (@Diligent-milk) on CodePen.