본문 바로가기

Programming

(111)
DAY 88. JavaScript - 객체, 내장 객체 객체 객체를 만들기 전에는 class를 먼저 만들고, new 연산자를 사용해서 객체를 만든다. 자바 스크립트는 프로토 타입 기반의 객체 지향 언어이다. 따라서 클래스 기반 언어와는 다르게 객체 생성 방법이 여러 개가 있는데 객체 리터럴을 사용하는 방법 : 변수에 객체 리터럴이 할당되는 순간에 변수의 타입이 정해진다. let 변수명 = {}; 속성 만들기 - 자바의 인스턴스 필드, 메소드와 같은 것들을 속성 = 프로퍼티라고 부른다. - 속성은 키와 값으로 구성이 된다. - 키(KEY)는 일반적으로 문자 데이터이지만 식별자를 지정하는 네이밍 규칙을 만족하면 '키 이름' 에 ' '를 생략할 수 있다. - 키를 숫자 형태로 지정할 수 있는데, 실제 저장될 때는 내부적으로는 문자로 변환되어 인식한다. - 값(VA..
DAY 87. JavaScript - 함수 함수 객체 타입의 값이다. 소스코드의 집합으로써 메소드, 모듈, 기능, 프로시저 등을 말한다. 자바스크립트에서는 function 자료형이다. 함수는 인자(입력되는 값)/매개변수(입력되는 값을 받는 변수), 리턴 값을 가질 수 있다. 코드 블록으로 만들어서 함수 자료형으로 만들어서 재사용, 코드 중복을 줄여 유지보수를 용이하도록 사용한다. ▪️ 함수 선언 반환 값 선언 없이 function 키워드만 사용한다. 선언적 함수 : function 키워드에 함수명을 작성하여 사용하는 방법 익명 함수 : function 함수명 작성하지 않고 변수에 대입하는 방법, 변수명을 통해서 함수 호출한다. ⇒ callback 형태 스스로 동작하는 함수 : 호출 없이 바로 사용 (function(){ 처리 로직 })(); //..
DAY 86. JavaScript - 배열 배열 배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있다. 다양한 타입의 데이터를 보관하는 변수 모음이자 객체이다. [ ] 를 통해 생성과 초기화를 동시에 처리가 가능하다. 자료형 지정이 없기 때문에 모든 자료형 데이터로 저장이 가능하다. ** 숫자, 문자열, 함수, Boolean, undefined, 객체 let 변수명 = [값1(숫자), 값2(숫자), 값3(객체), 함수 ...]; 값 입력시 index 번호 활용한다. 배열에 요소가 추가되면 .length 프로퍼티도 자동으로 갱신된다. 배열 선언 (Array Declaration) new 연산자와 Array 객체를 통해 배열을 선언한다. ▶️ 크기를 정하지 않은 배열의 선언 : var 변수명 = new Array(); ▶️ 크기를 정한..
DAY 85. JavaScript - 기본 개념, 변수, 자료형, 연산자 JavaScript 웹 브라우저에서 많이 사용하는 인터프리트 방식의 객체지향 프로그래밍 언어 ECMA(European Computer Manufacturers Association) 스크립트 표준을 따르는 대표적인 웹 기술이다. (EC5 버전으로 배울 것) 자바스크립트 작성 방식 inline 방식 html 태그의 on이벤트 속성을 이용하여 내장 메소드를 호출하거나 개발자가 선언한 사용자 정의 함수를 호출할 때 사요한다. 자바스크립트 양이 한 두 줄 정도로 소량일 때 사용한다. 태그에 이벤트 핸들러 속성을 이용하여 직접 실행 코드를 작성한다. internal 방식 가장 일반적인 방식 html 파일 내 나 안에 자바스크립트 소스 작성한다. 자바스크립트 코드 작성, 함수 단위로 소스코드를 작성하고 html 태..
DAY 84. CSS - 색상, 배경, 애니메이션 스타일 04. 색상/배경 스타일 색상 스타일 배경 스타일 background-clip 배경 크기 조절 background-position 배경 이미지 위치를 조정하는 속성이다. 수평 위치 수직 위치 background-attachment scroll : default, 배경 이미지가 움직이게 설정한다. fixed : 화면이 스크롤 되더라도 배경 이미지는 움직이지 않게 설정한다. background 배경 이미지 한 번에 설정하는 속성 선택자{background: image값 repeat값 attachment값 position값 clip값 origin값 size값;} 애니메이션 ✔️ 변형 단순히 요소가 페이지에 출력만 되는 것이 아니라 사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회전하는 것 ✔️ 애니메이션 ..
DAY 83. CSS - 레이아웃 스타일 03. 레이아웃 스타일 기본 스타일 height/width 콘텐츠가 차지하고 있는 영역의 크기를 조절할 수 있는 속성 선택자{width/height:숫자(단위) or auto(default)}; ** 상대 크기(%)를 입력하면 창 크기에 따라 변경되고, 절대 크기(px)를 입력하면 창 크기에 따른 변화가 없다. ** 실제크기 : (height/width) + padding + margin 블록/인라인 레벨 요소 블록 레벨 요소 한 줄 전체 차지하는 요소(a.k.a 박스 모델) 한 줄에 여러 요소가 올 수 없다. ( 너비가 100% ), 블록간에 겹치는 일이 없다. 자동으로 줄바꿈이된다. EX. , , , , , , , , , , 인라인 레벨 요소 한 줄에서 일부분만 차지하는 요소, 컨텐츠 영역만큼만 차지..
DAY 82. CSS - 글자, 문단, 목록 태그 02. 텍스트 스타일 CSS 단위 구성 px : 똑같은 px 사이즈여도 기기마다 크기가 다르게 보일 수 있다. pt : 1 ~ 71 point 까지 지정할 수 있다. 상대크기는 어떤 대상을 보고 상대적인 크기를 가지고 단위로 나타낸다. em : 부모의 크기를 1em으로 따진다. 1배 = 1em = 100%, 1.5배 = 1.5em = 150% 부모 요소의 크기가 기준이 된다. 상속되면서 자식에서 더 커지는 경우가 발생한다. rem : root 최상위 태그() 의 크기를 기준으로 배수된다. % : 백분율로 상위 요소에 대한 상대적인 비율을 나타낸다. 초기설정 값 100% 텍스트 스타일 font-family 폰트 글꼴 설정, 웹 문서에서 사용할 폰트를 지정한 것 실제로 사용자 pc에 해당하는 폰트가 설치가 ..
DAY 81. CSS - 선택자 01. 기초선택자 style과 stylesheet style은 정해진 속성을 입력하여 웹 페이지를 꾸미는 것 stylesheet는 웹 페이지에서 반복적으로 쓰는 style을 모아놓은 것 p{text-align:center;} CSS 적용 분류 내부 스타일 시트 내부에 스타일 정보를 지정하는 방법 스타일을 적용할 대상에 직접 태그를 표시하는 방법 부분을 실행하기 전에 읽어야 하기 때문에 태그 안에 있다. 외부 스타일 시트 부분을 실행하기 전에 읽어야 하기 때문에 태그 안에 있다. 태그를 활용해서 css 파일을 읽어와서 스타일 적용하는 방법 .css 확장자를 가지는 파일이다. 인라인 스타일 시트 태그 내부에 스타일 정보를 지정하는 방법 태그 하나에만 적용할 때 사용한다. CSS 선택자 CSS 우선순위 위에서..