[2020-여름 WEB] 8주차
2020. 9. 10. 00:45
Study/Web
1. 객체 자바스크립트 객체는 속성(Property)와 메소드(Method)를 가진다. ① 속성 : 객체와 관계된 변수, 다른 객체와 구별할 수 있는 특징 ② 메소드 : 객체의 행위를 정의하는 함수, 객체가 수행할 수 있는 기능(또는 행위) 2. 자바스크립트 내장 객체 다루기 2.1 자바스크립트 내장 객체 자바스크립트에서 기본적으로 제공되는 객체에는 Date, Math, Array, Number, String 등이 있다. 객체 생성시에는 new연산자를 사용해야 한다. ex) var today = new Date(); ① Date 객체 컴퓨터에서 제공되는 날짜/시간을 얻거나 설정 메소드 기능 getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), ..
[2020-여름 WEB] 7주차
2020. 9. 10. 00:45
Study/Web
1. 객체 1.1 객체의 구조 객체는 서로 연관된 변수와 함수들을 묶어 둔 수납공간으로 비유할 수 있다. 배열을 선언한 방법과 비슷하게 객체를 선언할 수 있다. var coworkers = {“programer” : “haesa”, “designer” : “haesa”}; var coworkers = {“programer” : “haesa”, “designer” : “haesa”}; 위와 같이 “programmer”와 “designer”를 key라고 부르며, key를 통해 객체에 저장된 값에 접근할 수 있다. 즉, coworkers.programmer는 haesa을 나타내고, coworkers.designer는 haesa을 나타낸다. 객체에 새로운 데이터를 추가할 때는 [객체명.key=data]와 같은 ..
[2020-여름 WEB] 6주차
2020. 9. 10. 00:45
Study/Web
1. 비교 연산자 & boolean ① === : 좌항과 우항의 값이 같은 지 비교하는 연산자다. ② >=, , < : 좌항과 우항의 값이 큰 지 작은 지 비교하는 연산자다. ④ bool true또는 false두 가지 값만을 가지고 있는 데이터 타입으로 조건문에서 조건식이 참인지 거짓인지 나타낼 때 많이 사용한다. 2. 조건문 ① if문 if(){ 명령문; }else{ 명령문; } 의 형태를 가지고 있다. ()안에 있는 조건식이 참일 경우 if문의 중괄호 안에 있는 코드를 실행하고, 거짓을 경우 if문을 실행하지 않고 else문의 중괄호 안에 있는 코드를 실행한다. ② switch문 switch(variable){ case 1: 명령문; break; … } 의 형태로 소괄호 안에 있는 변수의 값을 확인해..
[2020-여름 WEB] 5주차
2020. 9. 10. 00:44
Study/Web
1. script 태그 HTML에서 script태그 안에 JaveScript 문법을 사용하기로 약속했기 때문에 script태그 안에 있는 내용을 JaveScript 문법으로 해석한다. 2. event HTML은 웹페이지를 동적으로 만들 수 없다. 사용자와 상호작용을 하는 동적인 웹페이지를 만들기 위해서는 event를 만들어야 한다. 이 이벤트는 on~속성으로 만들 수 있다. (ex. onclick) ex) 위 코드는 hi버튼을 누르면 hi라는 메시지가 뜨도록 동작한다. ex) 위 코드는 text창에 입력된 내용이 변경되면 change라는 메시지가 뜨도록 동작한다. ex) 위 코드는 keydown하면 key down!이라는 메시지가 뜨도록 동작한다. 3. console 간단한 정보처리 작업을 할 때 콘솔창..
[2020-여름 WEB] 4주차
2020. 9. 10. 00:44
Study/Web
1. 목록과 표 장식하기 1.1 목록 목록의 글머리 기호 설정 : list-style-type 속성 ① 순서 없는 목록 disc : ●, circle : ○, square : ■ ② 순서 있는 목록 decimal(1, 2, 3,…), lower-roman(ⅰ, ⅱ, ⅲ, …), upper-roman(Ⅰ, Ⅱ, Ⅲ, …), lower-alpha(a, b, c, …), upper-alpha(A, B, C, …) 목록의 글머리 기호에 이미지 사용 list-style-image : url(“이미지 파일 주소”) 글머리 기호 위치 지정 : list-style-position 속성 inside, outside(기본값) 1.2 표 표 또는 셀의 폭 지정 방법 : width, table-layout ① width 속성..
[2020-여름 WEB] 3주차
2020. 9. 10. 00:44
Study/Web
0. CSS의 등장 배경 기존 html은 웹페이지를 시각적으로 꾸밀 수 없었다. 이에 html에 웹페이지를 시각적으로 꾸밀 수 있게 도와주는 태그를 새로 추가했다. 하지만 이는 웹페이지를 시각적으로 아름답게 꾸미는데 한계가 있었다. html은 기본적으로 효율적인 정보 전달을 목적으로 하고 있기 때문에 content의 정보를 한눈에 알아볼 수 있도록 도와주는 태그만이 존재했다. 그러다가 웹페이지의 디자인을 도와주는 태그들이 생겨나고, 기존 태그들과 같이 사용하면서 웹페이지는 정보의 가독성을 잃게 되었다. 이 때문에 사람들은 효율적인 정보 전달과 디자인을 따로 분리하고자 하였고, html에서 디자인을 분리하여 CSS를 만들게 되었다. 따라서 CSS는 오직 웹페이지의 디자인을 위해 만들어진 언어라고 할 수 있..
[2020-여름 WEB] 2주차
2020. 9. 10. 00:44
Study/Web
1. 링크 달기 1.1 하이퍼텍스트와 링크 하이퍼텍스트 : 순차적인 자료가 아닌 순서가 없는 자료로, 서로 연관된 문서나 텍스트 조각들이 연결돼 있다. 하이퍼미디어 : 텍스트 뿐 아니라 멀티미디어 정보도 서로 연결돼 있다. 노드 : HTML 문서나 멀티미디어 정보를 표현하는 기본 단위다. 링크 : 노드를 연결하여 내비게이션이 가능하도록 하는 길이다. 앵커 : HTML 문서 내에서 링크의 출발점이나 도착점이다. (앵커 영역 : 앵커가 설정되어 있는 영역) 1.2 문서간 이동 태그 : 링크의 시작점 앵커를 표현한다. 링크 텍스트 ① href 속성 : 이동하고자 하는 목적지 문서의 파일 주소(URL)를 지정한다. - 절대 주소 : http://로 시작하는 URL 형식의 인터넷 주소 홈W3C 홈페이지 방문 - ..
[2020-여름 WEB] 1주차
2020. 7. 7. 21:20
Study/Web
1. 태그 약속된 특정한 기능을 하는 기호를 말한다. 를 이용해서 태그를 열고, 을 이용해서 태그를 닫는다. ex) creating web pages : strong은 글씨를 더 두껍게 하는 태그다. creating web pages : u는 밑줄 긋는 기능을 하는 태그다. creating web pages : h1은 제목 태그다. 뒤에 오는 숫자가 작을수록 글씨가 더 크고, 두껍다. creating web pages : br은 줄바꿈하는 태그다. creating web pages : p는 단락을 나타내는 태그다. 2. 속성 태그만으로는 어떻게 동작할지에 대한 정보가 부족한 경우가 있다. 태그의 이름만으로 정보가 부족할 때, 속성을 사용해서 구체적인 정보를 추가한다. ex) : img만으로는 어떤 이미지..