3일만에 끝내는 HTML, CSS, JS 기초

HTML 도표 도표 형태를 태그로 표현할 수 있습니다. 이 테이블은 다시 태그로 테이블 열로 나뉘고, 그 안에서 태그로 테이블 데이터를 표현합니다. td 는 '테이블 데이터'를 의미하는데, 이는 모든 HTML 요소들 즉, 문자, 이미지, 목록 또는 다른 테이들도 포함합니다. 테이블 열에서 태그 대신에 태그를 사용하면 도표의 머리글로 표현됩니다. 성 이름 나이 장 나리 30 박 봄에 32 성 이름 나이 장 나리 30 박 봄에 32 테두리는 border 속성으로 표현합니다. boder 속성은 표준 문법이 아니기 때문에, CSS 스타일을 사용하는 것이 좋습니다. 이와 같이 CSS 스타일을 적용하면 테이블 뿐아니라 테이블 안의 셀까지도 테두리가 적용됩니다. 셀에 패딩(안쪽 여백)을 적용하면 셀의 내용과 테두리 ..

자바스크립트 객체 실제 생활에서의 객체 (Objects), 프로퍼티 (Properties), 그리고 메서드 (Methods) 의 의미를 먼저 알아보겠습니다. 예를 들어 실제 생활에서, 의자가 하나 있다고 해보겠습니다. 이 의자가 무겁다 거나, 또는 색깔이 파란색 이라거나 하는 것은, 이 의자의 프로퍼티 들 (properties) 입니다. 한편, 이 의자가 사람의 엉덩이를 받칠 수 있다거나, 또는 심지어 날아다니는 기능이 있다거나 이런 것은 메서드 들 (methods) 입니다. chair.color = 파란색//프로퍼티 chair.weight = 무겁다//프로퍼티 chair.fly()//메서드 chair.sit()//메서드 일반적으로 의자들은 동일한 프로퍼티 들을 가지고 있습니다. 그러나 프로퍼티의 값들은..

자바스크립트 함수 자바스크립트 함수 (JavaScript Functions) 는 정해진 임무를 수행하기 위해 작성된 코드 들의 블록 입니다. 자바스크립트 함수는 (JavaScript function) "무언가가" 호출할 때 실행됩니다. 자바스크립트 함수 (JavaScript function) 는 함수 키워드 (function keyword), 그 다음 이름 (name), 그 다음 소괄호 (parentheses, () ) 로 구성됩니다. 함수의 이름은 문자 (letters), 숫자 (digits), 언더스코어 (underscores), 그리고 달러 표시 (dollar signs) 를 포함할 수 있습니다. (즉 변수 때 규칙과 동일 합니다). 소괄호 (parentheses, () ) 에는 파라미터 들이 콤마..

자바스크립트 자료형 자바스크립트 자료형 (JavaScript Data Types) 은, 문자열 (String), 숫자 (Number), 불리언 (Boolean), 배열 (Array), 객체 (Object) 등이 있습니다. 자바스크립트 배열 (JavaScript Arrays) 은 대괄호 (square brackets, [] ) 로 씁니다. 배열 항목 들은 콤마 (commas, , ) 로 구분합니다. var myPhone = ["아이폰", "갤럭시", "옵티머스"]; // 배열 배열의 번호 (Array indexes) 는 0 부터 시작합니다. 따라서 첫번째 항목은 [0], 두번째 항목은 [1], 이렇게 계속 됩니다. 자바스크립트 객체 (JavaScript Objects) 는 중괄호 (curly braces,..

자바스크립트 연산자 산술 연산, 등호 연산, 문자열 연산, 논리 연산 으로 구분하여 자바스크립트의 연산자에 대해 알아보겠습니다. 자바스크립트 산술 연산자 (JavaScript Arithmetic Operators) 는 상수나 변수의 산술 연산에 사용됩니다. +덧셈 -뺄셈 *곱셈 /나눗셈 (나누기하여 몫을 구함) %나누기 하여 나머지를 구함 ++증가 --감소 자바스크립트 할당 연산자 (JavaScript Assignment Operators, = ) 는 값을 변수에 할당하는데 사용됩니다. =x = yx = y +=x += yx = x + y -=x -= yx = x - y *=x *= yx = x * y /=x /= yx = x / y %=x %= yx = x % y 자바스크립트 문자열 연산자 (JavaS..

자바스크립트 지시문 HTML 에서, 자바스크립트 지시문 (JavaScript statements) 은 웹 브라우저가 실행 해야할 명령들 입니다. 대부분의 자바스크립트 프로그램은 여러개의 자바스크립트 지시문 을 가지게 됩니다. 지시문 은, 쓰여진 순서대로, 하나씩 실행됩니다. 자바스크립트 프로그램과 자바스크립트 지시문 은, 종종 자바스크립트 코드라고 불립니다. 자바스크립트의 지시문 은, 세미 콜론 (Semicolons, ; ) 으로 구분합니다. 세미 콜론은 실행할 수 있는 각 지시문 의 끝에 추가되어야 합니다. 세미 콜론으로 구분되어 있기만 하다면, 여러개의 지시문 을 한줄에 써도 됩니다. 웹에서는 가끔 세미 콜론이 없는 예를 볼수도 있었을 텐데, 반드시 세미 콜론으로 끝나야 하는 것은 아니지만, 강력하게..

자바스크립트 구문 자바스크립트 구문 (JavaScript syntax) 은 어떻게 자바스크립트 프로그램을 만들 것인지에 관한 규칙의 집합입니다. 자바스크립트 프로그램 (JavaScript Programs) 이란 컴퓨터에 의해 실행되어야 할 "일련의 명령 (a list of instructions)" 입니다. 프로그래밍 언어에서 프로그램 명령 (program instructions) 들은 지시문 (statements) 이라고 불립니다. 자바스크립트는 프로그래밍 언어입니다. 자바스크립트 지시문 (JavaScript statements) 은 세미콜론 (semicolons, ;) 으로 구분됩니다. var numA = 100; var numB = 200; var totalC = numA + numB; HTML 내..

자바스크립트 출력 자바스크립트는 어떤 내장 프린트 (built-in print) 또는 디스플레이 (display) 기능 (functions, 함수)을 가지고 있지 않습니다. 자바스크립트에서 데이터를 "화면에 표시 (display)" 하는 방법은 아래와 같이 몇 가지가 있습니다. (1) window.alert() 을 사용하여, 경고 상자 (alert box) 를 띄우는 방법 (2) document.write() 를 사용하여 HTML 로 출력하는 방법 (3) innerHTML 로 HTML 태그 안에 쓰는 방법 (4) console.log() 를 사용하여 브라우저 콘솔 (browser console) 에 보여주는 방법 (1) window.alert() window.alert() 을 사용하여 경고 박스를 표시하..

자바스크립트 태그의 위치 자바스크립트 태그의 위치는 어디에 두어야 할까요? HTML 페이지 내에서 태그에 둘수도 있고, 헤드 태그에 스크립트를 넣은 경우 바뀌기 전의 문장 클릭하세요. 아래는 태그의 바닥에 스크립트를 넣었는데, 이 경우는 페이지 로드 (load) 가 빨라질 수 있습니다. 스크립트를 맨 위에 놓으면, 순차적으로 로드 되기 때문에, 화면에 표시는 늦어질 수 있기 때문입니다. 바디 태그에 스크립트를 넣은 경우 바뀌기 전의 문장 클릭하세요. 외부 자바스크립트 (External JavaScript) 는 스크립트가 외부 파일에 있는 경우입니다. 외부 스크립트 (External scripts) 는 여러 웹 페이지에 동일한 코드가 사용되는 경우에 유용합니다. 자바스크립트 파일의 확장자는 .js 입니다...

자바스크립트 소개 자바스크립트 (JavaScript) 는 모든 웹 개발자가 배워야 할 3가지 언어 중 하나 입니다. 1. HTML 은 웹 페이지의 내용을 정의합니다. 2. CSS 는 웹 페이지의 배치를 지정합니다. 3. 자바스크립트 (JavaScript) 는 웹 페이지의 동작을 프로그램 합니다. 자바스크립트는 지구상에서 가장 인기있는 프로그래밍 언어 입니다. 자바스크립트로 뭐하죠? 자바스크립트는 HTML 내용을 바꿀 수 있습니다. 여기를 한번만 클릭해 주세요. 자바스크립트로 무엇을 할 수 있을까요? 자바스크립트는 HTML 내용을 바꿔치기 할 수 있습니다. 메소드 중에 getElementById() 라는 것이 있는데, 아래 예에서와 같이 특정 id 를 갖는 HTML 태그를 찾습니다. 그리고 내용을 inne..