본문 바로가기

분류 전체보기

(65)
빌트인 생성자 Date(JS) Date는 자바스크립트에서 내장된 객체이며 , 메소드 또는 함수가 아니라 객체생성자(Constructor)다. 객체 생성자는 객체를 생성할 떄 사용되며 , 해당 객체의 인스턴스를 만들어 낸다. 이 객체를 사용하여 날짜와 시간을 다를 수 있다. date는 월만 0부터 시작함. 그래서 5로 쓰면 6월임 이건 한번 하면 끝남. 이건 정해놓은 시간마다 반복실행함.
객체(Object)와 메소드(method) 일단 컴퓨터를 예로 든다면 객체는 폴더이다.(document,window~~) 메소드는 폴더 안에 실행파일. (getElementById , addEventListner) 객체.메소드.메소드. 함수(){함수내용 } 이렇게 객체와 메소드는 객체 지향 프로그래밍에서 데이터와 기능을 하나로 묶어 관리하고 사용하는 중요한 요소임. 객체 - 데이터와 그 데이터에 관련된 동작을 포함한 개념 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다 {}를 사용해서 정의하고 키,값 쌍의 형태로 속성을 나타냄. let person = { name: 'John', age: 30 }; 이런 코드이면 person이 객체 name, age는 property 데이터 -property..
콜백함수 함수안에 인자로 함수가 들어가면 콜백함수임. 함수(콜백함수)
메소드 (forEach , map , filter ) for Each 배열의 각 요소에 대해 주어진 동작을 "실행"한다. 각 요소에 대해 반복문을 돌린다. 그러나, 배열 자체를 바꾸진 않는다. 그래서 "특정상황"에만 쓴다. (실행은 하되,새롭게 배열을 만들고 싶지 않을 때) 배열이 있으면 , 그 요소에 각각 함수나 동작을 실행하고 싶을 때 쓰는 것이다. const numbers = [1, 2, 3, 4]; // 각 숫자를 두 배로 만들어 출력하는 예제 numbers.forEach((number) => { console.log(number * 2); }); // 결과: 2, 4, 6, 8 그러니까 각각이라는게 지금처럼 1 ,2,3,4 가 콘솔로그에 각각 찍히는거지 이걸 어디에 쓰느냐? 만든 배열에 뭘 동작하고 싶을 때 쓰는거지. *, % , / , + - 등..
DOM이란? 웹문서를 객체화 한 것을 DOM이라 부름 이 DOM은 트리구조를 갖고 있다. DOM을 통해 HTML을 프로그래밍 언어(예: JavaScript)에서 다룰 수 있게 되는 것은 정확히는 HTML 문서를 객체 모델로 변환하여 프로그래밍에서 다루기 쉽게 만드는 것임. 이것은 HTML을 객체화한다기보다는 HTML 문서를 프로그래밍에서 조작 가능한 객체의 형태로 표현한다고 이해하는 것이 적합함. 이게 DOM트리이고 각각의 요소를 Node라고 부른다. 접근한다. 제어한다. 이게 끝이다 브라우저 자체를 제어하도록 모델링 한 것 CSS를 자바스크립트에서 조작할 수 있도록 한 것. DOM은 문서객체모델로 브라우저->자바스크립트로 html 요소를 제어할 수 있도록 하는 API 이건 자바스크립트 언어 자체가 아니다 . API..
박스모델(box model) 브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간이다. 브라우저를 통해 렌더링 되는 웹요소들 또한 그 안에서 개별적으로 너비와 높이를 가진다. 박스 모델은 너비와 높이를 가지는 개별요소를 가리켜 '박스'라 표현하고 , 박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델이다. 바깥쪽 여백 : margin 경계선 : border 안쪽 여백 : padding 콘텐츠 영역 : width(가로) , height 크롬에서 개발자 도구(F12)를 열면 박스모델을 확인할 수 있다. 테두리 스타일 - 테두리는 화면 상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분할 수 있는 영역 테두리 스타일을 정의할 때는 단축 속성인 border를 사용하거나 border의 하위 속성을 개별적으..
선택자 유형 스타일 선언문의 선택자를 어떻게 입력하는가에 따라 스타일이 적용 될 요소가 결정된다. 요소는 하나만 선택할 수도 있고 , 여러 개를 동시에 선택할 수도 있다. CSS는 다음과 같이 여러가지 유형의 선택자를 지원한다. (사진출처 : 유노코딩) css는 선택자 우선순위가 있다. 순위가 같다면 , 가장 마지막에 쓴 놈이 점수별로 순위를 매겨보면 1. !improtant (측정불가) 2. Inline style 선언 (1000점) 3. ID 선택자(100점) 4. class 선택자 (10점) 5. Tag 선택자 (3점) 6. *(전체) 선택자 (1점) 상세히 적어줄 수록 좋다. p { color: blue !important; } importnat 쓰는 방법이다.
CSS란 무엇인가? (CSS) 웹페이지를 꾸며주는 도구라고 보면 된다. CSS 약자부터 들어가겠다. Cascading : 폭포같은 , 계속되는 , 연속적인 Syle : 멋을 내다 Sheet : (종이나 문서) 한장. => 연속적으로 스타일을 정희하는 문서이다. CSS사용 방법은 다음과 같다. 내부 스타일 시트 (Internal Style Sheet) 외부 스타일 시트 (External Style Sheet) 인라인 스타일 (Inline Styles) 예를 살펴 보겠다. --------------------------------------- 내부 스타일 시트 (Internal Style Sheet) 문서 내에 head 태그 안에 사용하는 방법 /* CSS 스타일 정의 */ body { font-family: Arial, sans-ser..