[기본 개념] 2 | (2.1) 객체, 자바스크립트의 내장 객체

[기본 개념] 2 | (2.1) 객체, 자바스크립트의 내장 객체1> 객체2> 자바스크립트의 내장 객체3 브라우저와 관련된 객체1 객체객체란? 문서 객체 모델(DOM) 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 것 모두 객체. document, image, link 객체 등 브라우저 관련 객체 웹 브라우저에서 사용하는 정보. navigator, history, location, screen 객체 등 내장 객체 웹 프로그래밍할 때 자주 사용하는 요소는 자바스크립트 안에 미리 정의. Data 객체 등 객체의 인스턴스 만들기 기본형new 객체명  자바스크립트에서 객체는 참조 형태로 사용해야 한다. 인스턴스의 형태로 사용해야 하는데 new라는 예약어 뒤에 만드려고 하는 객체 이름을 써주면 된다. (ex. D..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 17.
• textsms

[정리] 1 | 함수 선언 & 호출과 표현식, var let const, 이벤트와 이벤트 처리기 정리

[정리] 1 | 함수 선언과 호출, var let const, 함수 표현식, 이벤트와 이벤트 처리기 정리함수 선언하고 호출하기- 함수 선언하기function 함수명() { 명령}- 함수 호출하기함수명() 또는 함수명(변수)var, let, const로 선언한 변수 비교구분varletconst스코프함수 레벨블록 레벨블록 레벨재할당가능가능불가능재선언가능불가능불가능함수 표현식익명함수 : 이름 없이 선언한 함수function(매개변수) { 명령 }즉시 실행 함수 : 함수를 정의하는 것과 동시에 실행(function() { 명령 }());(function(매개변수) { 명령 }(인수));화살표 함수 : ES6부터 화살표 기호(=>) 왼쪽 매개변수, 오른쪽 함수 작성. 익명 함수일 경우에만 사용(매개변수) => ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 11.
• textsms

[기본 개념] 1 | (1.2) 이벤트와 이벤트 처리기, DOM을 이용한 이벤트 처리기

[기본 개념] 1 | (1.2) 이벤트와 이벤트 처리기, DOM을 이용한 이벤트 처리기1 함수 선언 및 호출2 var, let, const3 함수 표현식4 이벤트와 이벤트 처리기5 DOM을 이용한 이벤트 처리기4 이벤트와 이벤트 처리기이벤트란? 이벤트란 웹 브라우저나 사용자가 행하는 동작을 말하는데, 웹 문서 영역 안에서 이뤄지는 동작만을 말한다. 예를 들어 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. 마우스 이벤트 종류설명click사용자가 HTML 요소를 클릭할 때 이벤트 발생dbclick사용자가 HTML 요소를 더블클릭할 때 이벤트 발생 mousedown사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생mousemove사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 11.
• textsms

[기본 개념] 1 | (1.1) 함수 선언 및 호출, var let const, 함수 표현식

[기본 개념] 1 | (1.1) 함수 선언 및 호출, var let const, 함수 표현식1 함수 선언 및 호출2 var, let, const3 함수 표현식4 이벤트와 이벤트 처리기5 DOM을 이용한 이벤트 처리기1 함수 선언 및 호출기본형function 함수명( ) {    명령} 기본형함수명( ) 또는 함수명(변수)  함수 선언 위치는 프로그램의 흐름에 영향을 주지 않는다. 따라서 보통 한 파일 안에 여러 함수를 선언했을 때 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 부분을 모아놓고 필요할 때마다 함수를 호출해 사용한다.2 var, let, constvar  var 는 지역 변수로 함수 안에서 선언하고 함수 안에서만 사용한다. 이때 var 예약어를 사용하지 않으면 전역 변수가 된다.  자바스크립..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 10.
• textsms

[정리] 6 | 미디어 쿼리와 플렉스 박스 레이아웃의 속성, CSS 그리드 레이아웃의 속성과 함수 정리

[정리] 6 | 미디어 쿼리와 플렉스 박스 레이아웃의 속성, CSS 그리드 레이아웃의 속성과 함수 정리미디어 쿼리의 속성종류설명width, height웹 페이지의 가로 너비, 세로 높이min-width, min-height웹 페이지의 최소 너비, 최소 높이max-width, max-height웹 페이지의 최대 너비, 최대 높이device-width, device-height단말기의 가로 너비, 세로 높이min-device-width, min-device-height단말기의 최소 너비, 최소 높이max-device-width, max-decive-height단말기의 최대 너비, 최대 높이orientation: portrait단말기의 세로 모드orientation: landscape단말기의 가로 모드플렉스 ..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 8. 9.
• textsms

[기본 개념] 6 | (6.3) CSS 그리드 레이아웃 사용

[기본 개념] 6 | (6.3) CSS 그리드 레이아웃 사용1 반응형 웹2 미디어 쿼리3 그리드 레이아웃4 플렉스 박스 레이아웃5> CSS 그리드 레이아웃 사용5 CSS 그리드 레이아웃 사용CSS 그리드 레이아웃  CSS 그리드 레이아웃은 가로와 세로를 모두 사용한다. 따라서 플렉스 항목은 1차원이고, CSS 그리드 레이아웃은 2차원이라고 말한다.  칼럼←       칼럼 간격       →칼럼←       칼럼 간격       →칼럼줄               1                               2                               3               ↑줄 간격↓     줄               4                             ..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 22.
• textsms

[기본 개념] 6 | (6.2) 그리드, 플렉스 박스 레이아웃

[기본 개념] 6 | (6.2) 그리드, 플렉스 박스 레이아웃1 반응형 웹2 미디어 쿼리3> 그리드 레이아웃4> 플렉스 박스 레이아웃5 CSS 그리드 레이아웃 사용3 그리드 레이아웃그리드 레이아웃  반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 하는데 그 기준이 되는 레이아웃을 그리드 레이아웃이라고 한다. 그리드 레이아웃을 3가지 특징 1 시각적으로 안정된 디자인 책이나 신문 등 여러 시각 매체에서는 한 화면을 여러 개의 칼럼으로 구성하여 밑으로 늘어뜨리는 그리드 레이아웃을 사용한다.  2 업데이트가 편한 웹 디자인 구성 사이트 구조를 미리 먼저 만들어 놓고 나중에 내용을 채워 넣을 수 있다. 따라서 내용을 업데이트하기도 쉽다. 3 요소를 자유롭게 배치 한 줄에 여러 ..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 19.
• textsms

[기본 개념] 6 | (6.1) 반응형 웹, 미디어 쿼리

[기본 개념] 6 | (6.1) 반응형 웹, 미디어 쿼리1> 반응형 웹2> 미디어 쿼리3 그리드 레이아웃4 플렉스 박스 레이아웃5 CSS 그리드 레이아웃 사용1 반응형 웹반응형 웹 디자인과 뷰포트  반응형 웹 디자인이란 스마트폰이나 태블릿, TV 등 브라우저 환경에 따라 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시방법을 바꾸는 것이다.  반응형 웹 디자인에서의 기본에는 뷰포트가 있는데 이것을 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소할 수 있다. 뷰포트 지정하기 기본형name="viewport" content="속성1=값1", "속성값2=값2", . . .">  뷰포트는 태그를 이용해 태그 사이에 작성한다.  content 속성을 이용해 뷰포트 속성과 속성값을 지정하면 된다. 종..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 15.
• textsms