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

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 코드는 문장 끝에 세미콜론(;) 사용 - 인터프리터 언어 (Interpr..

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: 이미지의 비율을 유지한 상태에서, 부모요소의 wid..

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) -> 수..