![]()
TypeScript 유형 타입 : value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법 Primitive types 이름 의미 string 문자열 number 숫자 값 boolean true와 false 값 null 하나의 값 null undefined 하나의 값 undefined, 초기화 되지 않은 변수의 기본 값 symbol 고유한 상수 값 Methods 이름 의미 function 함수 array 배열 classes 클래스 object 객체, 배열, 함수 TypeScript 타입 이름 의미 Any 모든 타입 허용 Union 변수, 매개변수에 대해 둘 이상의 타입 허용 Tuple 크기와 타입이 고정된 배열 Enum 특정 값을 고정하는 독립된 자료형 Void 함수에서 반환 값이 없을 때 반환 ..
![]()
Typescript 란? 자바스크립트 동적 타입 런타임에서 동작할 때 타입 오류 확인 브라우저, Node.js 환경에서 직접 동작 가능 타입스크립트 정접 타입 컴파일 타임 코드 작성 단계에서 오류 확인 브라우저, Node.js 환경에서 직접 동작 불가능 -> 컴파일 과정 필수 (브라우저에서 실행하기 위해 파일을 변환) 자바스크립트에 타입을 부여하여 더 많은 기능을 가진 확장 언어 Typescript를 사용하는 이유 자바스크립트의 코드를 단순화 하여 가독성 향상 자바스크립트를 작성 시 편리한 디버그 오픈소스 정접 검사와 같은JavaScript IDE 및 사례를 위한 생산적인 개발 도구 제공 Type System 개발 환경에서 에러 발견에 도움 오직 개발 환경에서만 활성화 타입 스크립트와 성능 향상은 관계가..
![]()
Canvas 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공 그래픽을 위한 컨테이너(container) 역할만을 수행 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용 canvas 요소의 속성 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간 반드시 style 속성을 이용하여 캔버스의 크기를 설정 canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용 이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다! 사각형 그리기 1. 사각형의 왼쪽 위 꼭짓점의 x좌표 2. 사각형의 왼쪽 위 꼭짓점의 y좌표 3. 사각형의 너비 4. 사각형의 높이 co..
![]()
비디오 웹 브라우저는 여러 개의 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용 태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 태그를 지원하지 않을 때만 화면에 표시 비디오 파일 형식 - MP4 : Moving Picture Experts Group에 의해 개발되었으며, 비디오 코덱으로는 H.268, 오디오 코덱으로는 ACC를 사용합니다. 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있어 인터넷을 통한 스트리밍에 많이 활용되는 파일 형식 - WebM : 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식이며, 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용 - OGV : Theora Ogg라고도 불리며, Xiph 재단에 의해 MP3의 대안으로 ..
![]()
의사 요소 해당 HTML 요소의 특정 부분만을 선택 하나의 HTML 요소에 여러 개의 의사 요소를 동시에 적용 가능 선택자::의사요소이름 {속성: 속성값;} ::first-letter 텍스트의 첫 글자만을 선택 블록(block) 타입의 요소에만 사용 font 속성 color 속성 background 속성 margin 속성 padding 속성 border 속성 text-decoration 속성 text-transform 속성 line-height 속성 float 속성 clear 속성 vertical-align 속성 (단, float 속성값이 none일 경우에만) ::before 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입 ::after 특정 요소의 내용(content) 부분 바로 뒤..
![]()
선택자 CSS를 적용할 위치의 HTML 요소 전체 선택자 * { margin: 0; padding: 0; } HTML 문서 내부의 모든 요소에 같은 CSS 속성을 적용 보통 margin이나 padding 등 브라우저 기본 스타일들을 초기화 할 때 사용 하지만 문서 내의 모든 요소를 읽어야 하기에 페이지 로딩 속도가 느려질 수 있으므로 최소한으로 사용하는 것이 좋음 #wrapper * { border: 1px solid #000; } 전체 선택자는 위의 경우처럼 자식 선택자에도 사용 가능 태그 선택자 태그 선택자는 HTML 요소를 직접 지칭 해당 선택자와 같은 이름을 가진 태그 전부에 속성 적용 태그이름 { 속성1: 속성값1; 속성2: 속성값2; } div { background-color: #000; c..
![]()
CSS란? 사용자에게 문서를 표시하는 방법을 지정하는 언어 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어 웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 편리 HTML - 문장 구조 CSS - 문장 디자인 CSS 사용 방법 인라인 스타일 HTML 요소 안에서 Style 속성 이용 해당 요소에만 스타일 적용 내부스타일 HTML 문서의 태그 내에 태그를 사용하여 스타일을 지정 해당 HTML 문서에만 스타일을 적용 외부스타일 별도의 CSS 파일을 분리하여 HTML 문서에 연결 웹 사이트..
![]()
브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더 input input 요소를 사용하여 사용자로부터 입력을 받음 input 요소 텍스트 입력(text) 한 줄의 텍스트 입력 받음 검색할 내용을 입력하세요 : 비밀번호 입력(password) 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시 사용자 : 비밀번호 : 라디오 버튼(radio) 사용자로부터 여러 개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있음 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성 동일 HTML CSS JAVA C++ 체크박스(checkbox) 용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있음 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 in..
![]()
From form 요소를 사용하여 사용자로부터 입력 받고 사용자가 입력한 데이터를 서버로 전송 텍스트 필드에 글자를 입력, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달 action 속성 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시 method 속성 입력받은 데이터를 서버에 전달할 방식을 명시 GET 방식 주소에 데이터(data)를 추가하여 전달 데이터가 주소 입력창에 그대로 나타남 전송할 수 있는 데이터의 크기 제한적 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용 POST 방식 데이터(da..
![]()
HTML 요소의 display 속성값 블록 새로운 라인에서 시작 해당 라인의 모든 너비를 차지 다른 HTML 요소들을 하나로 묶는 블록 요소 주로 여러 요소들의 스타일을 한 번에 적용 가상의 레이아웃을 설계 주로 CSS와 연동하여 쓰임 인라인 새로운 라인에서 시작하지 않음 해당 HTML 요소의 내용만큼 너비 차지 텍스트(text)의 특정 부분을 묶는 인라인 요소 텍스트의 특정 부분에 따로 스타일을 적용 CSS와 함께 쓰임 iframe 요소 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입 iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정 iframe 요소의 테두리 변경 기본값 - 검정색 테두리 iframe 요소의 페이지 변경하기 PHP 수업 확인하러 가기 => 태그의 t..
![]()
표 생성 , 등의 태그와 함께 작성 레이아웃 구성시 와 CSS 사용 태그 표의 행 태그 각 열의 제목, 자동으로 굵은 글씨&가운데 정렬 태그 표의 열, 태그 하위 colspan 속성 테이블의 열 합치기 rowspan 속성 테이블의 행 합치기 태그 주석, 테이블 상단에 제목이나 짧은 설명 CSS의 border 속성 border 속성 값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리 두 줄로 표현되는 테두리를 한 줄로 설정 -> border-collapse 속성값을 collapse로 설정 태그 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용 표의 제목 영역, 하위, 상위 반드시 하나 이상의 요소를 포함 태그 표의 본문 영역, 와 같은 위치 태그 표의 아래 영역, 와 같은..
![]()
목록을 만드는 태그 단독으로 쓰이지 않으며 혹은 태그 내부에 들어감 단순히 리스트 나열 뿐만 아니라 메뉴등을 만들때도 사용 이중 리스트 가능 사과 멜론 바나나 사과 멜론 바나나 순서가 있는 리스트 포함되는 각각의 리스트 요소는 태그로 시작 모든 목록 항목은 숫자로 표시 CSS의 list-style-type 속성 - decimal : 숫자 (기본설정) - upper-alpha : 영문 대문자 - lower-alpha : 영문 소문자 - lower-roman : 로마 숫자 소문자 - upper-roman : 로마 숫자 대문자 호박 - 박과의 한해살이 덩굴성 채소 상추 - 국화과의 한해살이 또는 두해살이풀 정의 리스트 태그 : 용어의 이름 태그 : 해당 용어의 정의
