Front (46) 썸네일형 리스트형 [JavaScript] 배열의 생성 (Array) 배열은 한번에 둘 이상의 값을 보유할 수 있는 특수한 변수이다. var car1 = "Saab"; var car2 = "Volvo"; var car3 = "BMW"; 예를들어 단일 변수에 자동차 목록을 저장하면 위와 같이 할 수 있다. 만약 위 3대가 아니라 개수가 300대이상으로 늘어나면 선언과 데이터를 찾을 때 매우 비효율적이게 될것이다. 이 때 배열을 이용하여 하나의 변수로 여러 값을 보유하고 엑세스할 수 있다. 배열 생성 1.배열 리터럴 사용 var cars = ["Saab", "Volvo", "BMW"]; 배열을 담을 때엔 대괄호로 묶어서 사용하며 이 형태를 배열 리터럴(array literal)이라고 부른다. 이 형태로 배열을 선언하는것이 제일 간단하다. 2. new 키워드 사용 var car.. [JavaScript] 함수 (Function, return) 함수 : 특정 작업을 수행하도록 여러개의 실행코드 구문들을 하나로 묶어놓은 블럭이다. 한번 짜 놓은 함수는 다른 곳에서도 다시 사용할 수 있고 코드를 구조적으로 만들 수 있어서 함수를 사용한다. (기능별로 함수를 묶어놓아 효율적이고 간결한 코드작성 할 수 있음) 함수 정의 function myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2 } JavaScript 함수는 function키워드, 이름 , 괄호 () 순으로 정의된다. 함수 이름에는 문자, 숫자, 밑줄 및 달러 기호가 포함될 수 있다. (변수 네이밍과 동일함) ( parameter1, parameter2, ... ) 함수에 의해 실행될 코드는 .. [Javascript] 자바스크립트 함수의 범위 (scope) JavaScript에는 스코프라는 유형으로 변수를 구분하여 변수에 접근한다. 스코프에는 두 가지 유형의 범위가 있다. 지역 범위(local scope) 전역 범위(global scope) -변수 스코프(적용 범위) : 전역 범위 - 코드 전체에 선언되는 변수의 범위 : 지역 범위 - 코드 중 특정 범위에서 선언되는 변수의 범위 : 함수 범위 : 함수 내부 영역에 선언되는 변수의 범위 : 블럭 범위 : if, for 같은 구문 블럭 내부 영역에 선언되는 변수의 범위 한마디로 전역범위는 어디에서든 사용할 수 있고 지역범위는 선언한 블럭에서만 사용할 수 있다는 것 let은 ES6에 추가된 변수 타입 키워드로 var과 기능면에서 다른점이 없지만 var은 호이스팅(선언을 호출 밑에다 하는 것)이 되거나 전역, 지.. [Javascript] 조건문/분기문 (Conditional Stements, if, else if/switch) IF문 기본 문법 if (조건문) { // 조건이 참일시 실행하게될 블럭 } else if (조건2){ // 첫 번째 조건이 거짓일 때 조건2가 참이면 조건2 블럭 실행 } else { // 조건들이 거짓일 때 else 블럭 실행 } 예시 if(time < 12){ console.log('좋은하루'); } else if(time < 18{ console.log('좋은오후'); } else { console.log("좋은저녁"); } 시간이 18시간 미만이면 Good day 블럭 실행 아니면 Good evening블럭 실행현재시간이 점심 12시 이전이면 '좋은아침' 문구를 표시하고 저녁 6시 이전이면 '좋은오후' 문구를 표시하고 그렇지 않으면 '좋은저녁' 문구를 표시한다. switch문 switch (변수.. [CSS]반응형 웹 (Responsive Web Design) 스마트폰이 출시되지 얼마 안되었을 때 인터넷을 접속하게 되면 모바일 환경의 웹이 없어 PC화면을 그대로 작은 모바일 디바이스를 통해 보게 되었다. 이 문제를 해결하기 위해 모바일 디바이스에 특화된 웹(모바일 웹)들이 등장했다. 초기에는 모바일 웹과 PC웹 2개를 만들어서 웹을 제공하였다. 이러한 사용자 환경별로 웹을 제공하는 기술을 적응형 웹 디자인(Adaptive Web Design)이라고 했다.(네이버, 다음 등의 모바일 환경처럼 주소창에 m이 붙어 별개의 사이트임) 하지만 해당 방식은 사이트를 2개씩 만들어야해서 비용과 효율면에서 단점이 있었고 그래서 하나의 사이트를 통해 사용자 환경에 따라(해상도에 따라) 레이아웃이 변경되는 기술을 반응형 웹 디자인(Responsive Web Design)이라고 .. [CSS] 블럭요소의 가로배치 레이아웃 (Layout - float, clear) codepen.io/jonghyun99/pen/KKgraMx?editors=1100 박스를 가로로 배치할 때는 inline 요소는 margin 문제 때문에 잘 사용하지 않아 block요소를 사용하게 된다. float float 속성은 출력물이 화면에 띄워지는 방법을 지정한다. (정보탐색필요) left - 요소를 부모 요소 기준 왼쪽에 배치 right-요소가 부모 요소 기준 오른쪽에 배치 none-요소를 옮기지 않음 (기본 값) 예시 float1과 2를 각각 left, right배치 했다. float3과 4를 둘다 left배치 해보았다. Clear속성 float속성을 사용하면 다른 출력물이 출력물 밑에 자리에 들어와 위 사진과 같이 겹쳐진다 * text는 겹쳐지지 않고 테두리에 막히는 성질이 있음 이 때 .. [JavaScript] 자바스크립트 소개 자바스크립트는 배우기 쉽고, 세계에서 가장 널리 사용되는 웹 프로그래밍 언어이다. 모든 웹 개발자가 배워야 하는 3가지 언어중 하나이다. 1. 내용을 작성하는 HTML 2. 디자인 하는 CSS 3. 동작을 프로그래밍하는 JavaScript JavaScript는 컴퓨터, 태블릿 및 스마트 폰의 브라우저에서 이미 실행 중이며 다운로드 할 필요가 없고 누구나 무료로 사용할 수 있다. JavaScript는 HTML의 내용, 속성을 변경할 수 있다. javascript는 혼자서 구동하는 언어가 아니라 html을 기반으로 구동하는 언어이다. 그러므로 html의 내용, 속성등의 값을 바꿀 수 있다. Turn on the lightTurn off the light 구성 1. 변수 2. 연산자 3. 분기문(조건문) 4... [CSS] 배경 (Backgrounds color, image, repaeat) CSS를 통해 배경을 입히는 방법 박스에 background를 적용할 때 content와 padding에 적용된다. (margin, border은 제외됨) 백그라운드는 박스 요소 중 padding에 까지만 적용되는걸 인지하고 작업하여야 한다. (배경반복)Background Repaet CSS에서는 작은 이미지를 배경으로 설정했을 때 화면을 꽉채우며 반복하는 성질이 있다. 이와 같은 배경보다 작은 이미지를 배경으로 설정하게 되면 자동으로 가로와 세로로 반복한다. 이런 그라데이션 이미지와 같은 경우는 x축으로 (가로)방향으로만 반복하는 경우 더 보기 좋아보인다. 예시 body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; }.. 이전 1 2 3 4 5 6 다음
