WEB (11) 썸네일형 리스트형 자바스크립트 객체지향프로그래밍(OOP) Constructor Constructor 함수 정의하기 constructor 함수는 다른 함수들과는 다르게 값을 리턴하지 않고, 정의하기만 한다. 다른 함수들과 구분하기 위해 대문자로 시작한다. this 키워드 이용 인자를 받아오지 않고 정해진 값으로 지정 가능 function ConstructorName(arg1, arg2){ this.propertyName = arg1; this.propertyName2 = arg2; this.propertyName3 = value; } Constructor 이용해서 객체 생성 let obj = new ConstructorName(); 값 변경하기 다른 객체들과 마찬가지로, property에 접근하거나 값을 변경할 수 있다. ConstructorName.proper.. 자바스크립트 - 기본 자료 구조 배열 자바스크립트에서는 한 배열이 여러 가지 자료형을 요소로 가질 수 있다. 자바스크립트 object도 배열에 담길 수 있다. 자바스크립트 배열은 zero-indexed이다. 접근 방법: array[index] 배열의 길이는 정해지지 않았고, 변할 수 있다. (mutable) 자바스크립트 배열에 요소 추가하기 Array.push() 배열의 맨 뒤에 요소 추가 Array.unshift() 배열의 맨 앞에 요소 추가 자바스크립트 배열에서 요소 제거하기 pop() 배열의 맨 뒤에 있는 요소 제거 shift() 배열의 맨 뒤에 있는 요소 제거 자바스크립트 배열에서 요소 잘라내기(제거, 추가) splice() 3개의 인자 갖는다. Array.splice(startIndex, amountToDelete, addin.. Regular Expressions regular expression 찾기 . test() 메소드 이용 대소문자 구분하고, 참/거짓 리턴 let myString = "Hello World"; let myRegex = /Hello/; let result = myRegex.test(myString); //boolean 리턴OR 이용하기 let myRegex = /yes|no|maybe/;대소문자 무시 : i flag 이용 let myRegex = /IgNoreCasE/i;.match() 메소드 이용 문자열 추출 let myString = "Hello World"; let myRegex = /Hello/; myString.match(myRegex);반복적으로 찾기 : g flag 이용 let myRegex = /Repeat/g;Wildcard .. 계단식 및 상속 CSS는 Cascading Style Sheet의 약자다. 이름에서도 알 수 있듯이, CSS에서 cascading은 매우 중요하다. 계단식(cascade)과 우선순위(specificity), 상속(inheritence) 개념에 대해 알아보자 계단식(cascade) CSS에서 동일한 우선순위를 가지는 서로 다른 규칙들이 적용된다면, 마지막에 나오는 규칙이 사용된다. h1{ color: purple; } h1{ color: magenta; } h1{ color: pink; } 위와 같은 코드에서 h1은 핑크색이 된다. 우선 순위(Specificity) 동일한 요소에 대한 여러 규칙에 다른 선택자가 있는 경우, 브라우저가 어떤 규칙을 적용하는지 정하는 방법이다. 일반적으로 선택자의 선택이 구체적일수록 우선순위.. CSS 시작하기 일단 스타일을 적용하기 위한 HTML문서를 만들자. CSS를 사용하기 위해서는 HTML문서에 CSS규칙을 사용하려 한다는 것을 알려야 한다. 적용 방법에는 여러 가지가 있지만, head에서 연결하는 방법이 가장 일반적이고 유용하다. HTML문서와 같은 폴더에 파일을 만들고, styles.css라고 저장한다. styles.css파일을 링크하기 위해서 HTML문서의 안에 다음을 추가한다. HTML 요소 스타일링 요소이름1, 요소이름2 { 속성: 값; 속성: 값; } 위와 같은 형식으로 써주면 된다. 요소의 기본 동작 변경 HTML에서는 요소마다 기본으로 적용되는 서식이 있다. 하지만 이를 원하지 않을 수도 있다. 그럴 경우, 변경하려는 HTML 요소를 선택해서 CSS 규칙으로 변경해주면 된다. 예를 들어서,.. HTML 텍스트 제목과 단락 제목 heading 요소에는 6개가 있다: , , , , , . 각 제목은 heading 요소로 둘러싸여 있어야 한다. 단락 각 단락은 으로 둘러싸여 있어야 한다. 예시: Main title of this. by gartenh Subtitle 1 Subtitle 2 Subtitle 3 Subtitle 4 The smallest subtitle 구조화가 필요한 이유 유저 편의: 제목 훑어볼 수 있음 검색 순위에 영향 시각 장애인들을 위한 screen reader 서비스에서 개요 읽어준다 컨텐츠를 꾸미거나(CSS) 동적으로 만들기 위해서는(JavaScript) 컨텐츠를 감싸는 요소 필요 Semantic이 필요한 이유 a top level heading 위는 브라우저에서 기본적으로 사용하는 hea.. HTML 헤드, 메타데이터 헤드 페이지에 표시되지 않는 부분. 페이지에 대한 metadata를 포함 제목 달기 : HTML문서 전체의 타이틀. 문서의 컨텐츠 아니다. ( : 페이지 내용물의 제목) 메타데이터(요소) 데이터를 설명하는 데이터. 요소를 이용한다. character 인코딩 특정하기 "utf-8"대신에 "ISO-8859-1"처럼 직접 설정도 가능 저자와 설명 추가 name : 메타 요소가 어떤 정보의 형태를 가지고 있는가 content: 실제 메타데이터의 컨텐츠 HTML 개요 HTML이란? Hypertext Markup Langauge 문서의 특정 텍스트 영역에 의미를 부여하고, 논리적 영역으로 구조화하며, 여러 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 마크업 언어. 요소(Elements) 각 컨텐츠의 여러 부분을 감싸고 마크업 대소문자 구분하지 않는다(단, 가독성 등의 이유로 소문자로 주로 작성) 기본 구성 여는 태그(opening tag) : 닫는 태그(closing tag) : 내용(content) : 요소의 내용 내포된 요소(Nesting elements) 요소 안에 다른 요소가 들어갈 수 있다. 이 때, 중첩되지 않게 열고 닫는 것이 잘 이뤄져야 한다. 블럭 레벨 요소(Block level element) vs 인라인 요소(Inline ele.. 이전 1 2 다음