1. Document API 1) 하나의 요소(Element) 선택 : id로 접근 - [window.]document.getElementById("Id명"); - 해당되는 id의 요소에 접근한다 ​ 2) 다중 요소 선택 : class, tag로 접근 - document.getElementsByClassName("") - document.getElementsByTagName("") - document.getElementsByName("") - 결과물은 모두 배열 (결과물이 한 개이더라도 배열임) ​ 3) form태그 선택 시 name속성의 값으로 선택 4) CSS Selector 사용 - document.querySelector("css selector") : 선택자에 걸리는 요소 중 첫번째 것만 가져옴..

1. Window 1) Window 객체 - 브라우저의 요소들과 자바스크립트 엔진, 그리고 모든 변수를 담고 있는 객체 - window는 모든 객체의 조상으로 전역객체(글로벌객체)라고 한다. - 모든 객체를 다 포함하고 있기 때문에 window는 생략가능하다. - 속성(property, 변수)과 메서드가 있다. ​ 2) 사용법 [window.]속성명또는메서드명() ​ 3) window 객체의 대표적 메서드 - alert("msg") : 메세지를 가지고 있는 대화상자를 띄운다 - prompt("msg") : 텍스트를 입력할 수 있도록 안내하는 선택적 메세지를 갖고 있는 대화 상자를 띄운다 - conform("msg") : 확인과 취소 버튼으로 구성된 모달창을 화면에 보여준다 - open() : 새 창 만들..

1. Print - console.​log("출력할 내용"); - Web browser의 개발자모드의 console에서 출력 결과 확인 가능 ​ 2. 변수 선언 - var 변수명; - 자바스크립트는 var라는 키워드 하나로 변수를 선언한다 ​ 3. 데이터타입 - number : 숫자, 자바의 double과 동일 - string : 문자열은 '' 또는 ""으로 감싸서 표현 - boolean : true, false - undefined : 선언하지 않았거나, 선언했지만 값은 지정하지 않은 경우의 값 - null : 명시적으로 값이 비었음을 나타낼 때 사용하지만, null을 할당한 변수의 typeof는 object - 문자 타입(char)은 없음 ​ 4. 연산자 - 산술연산자 : +, -, *, /, % -..

우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다. 1. JavaScript란 - HTML 문서 내에 동적 요소를 담당 DOM, Event 등을 활용하여 정적인 HTML 문서를 동적으로 운영할 수 있게 해줌 - HTML, CSS 생성, 수정, 삭제 - js 코드는 문장 끝에 세미콜론(;) 사용 - 인터프리터 언어 (Interp..

1. background-color 속성 배경색 지정, 색상 단위 입력 (디폴트: 하얀색) 2. background-image 속성 배경 이미지 지정, url 단위 입력 1) background-repeat : 배경 이미지의 반복형태 지정 - repeat-x : x축으로 반복 - repeat-y : y축으로 반복 - repeat : x, y축으로 반복 - 디폴트 repeat, 싫으면 no-repeat 2) background-position: 배경이미지의 위치 지정 - x축위치 y축위치 - 키워드: top, bottom, right, left, center 3) background-size : 배경 이미지의 크기 지정 - width height - cover: 이미지의 비율을 유지한 상태에서, 부모요소의..

1. Font 1) font-size : 글자의 크기 지정 속성 2) font-family : 글꼴 지정 속성 - 글꼴 이름이 2단어 이상이면 ""으로 묶어줘야한다 - 되도록 모든 컴퓨터에 있는 폰트를 사용하는 것이 좋다 - 사용자의 컴퓨터 환경에 따라 글꼴이 없을 수 있으므로 여러 글꼴을 지정해 대비해 놓을 수 있음 font-family: "Times New Roman", Times, serif; -> "Times ~"이 없으면 Times, Times도 없으면 serif 사용 3) font-style : 글자 기울기 조절 (italic, ..) 4) font-weight : 글자 굵기 조절 (bold, ..) ​ 2. Text 1) text-align: 글자 정렬 (center, right, left)..