# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 연결 선택자 1. 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 - 특정요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 함 - 기준 요소를 기준으로 한 단계 아래 요소는 자식요소, 그 요소의 한 단계 요소는 손자요소 1) 하위 선택자 - 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택함 section p { ..... } 상위요소 하위요소 2) 자식 선택자 - 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자 section > p { .... } 부모요소 > 자식요소 2. 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자 1) 인접 형제 선택자 - ..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 배경색과 배경 범위 지정하기 1. 배경색 지정 : background-color background-color : #008000 | rgb(0,128,0) | green; /*16진수, rgb값, 색상이름 가능 2. 배경색의 적용범위 조절 : background-clip 종류 설명 border-box 박스 모델의 가장 외곽인 테두리까지 적용(기본값) padding-box 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box 박스모델에서 콘텐츠 부분에만 적용 backgrond-clip : border-box | padding-box | content-box; 02 배경 이미지 지정 1. 웹 요..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 문서 객체 모델 알아보기 1) 문서 객체 보델이란 - 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹문서를 체계적으로 정리하는 방법 2) DOM 트리 - 문서 객체 모델의 구조를 나타냄 - DOM을 구성하는 기본 원칙 모든 HTML 태그는 요소(Element) 노드 입니다. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드입니다. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드입니다. 주석은 주석(comment) 노드입니다. 2. DOM 요소에 접근하고 속성 가져오기 1) DOM에 접근하기 ① id 선택자로 접근하는 getEl..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 객체 알아보기 1) 객체 - 자바스르비트에서의 객체 : 프로그램에서 인식할 수 있는 모든 대상 - 객체는 인스턴스의 형태로 만들어서 사용해야 함 ⓐ 인스턴스 만들기 new 객체명 ex) Date 객체의 인스턴스 만들기 var now = new Date(); document.write("현재 시각은 " + now); 2) 프로퍼티와 메서드 ⓐ 프로퍼티 : 객체의 특징이나 속성 ex) 제조사, 모델명, 색상, 배기량 ⓑ 메서드 : 객체에서 할 수 있는 동작 ex) 시동걸기, 움직이기, 멈추기, 주차하기 2. 자바스크립트의 내장 객체 1) Array 객체 var numbers = new Array(); //배열..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 함수 알아보기 1) 함수 선언 function 함수명() { 명령 } 2) 함수 호출 함수명() 또는 함수명(변수) ex) 함수를 이용하여 두 수 더하기 function addNumber() { var num1 = 2; var num2 = 3; var sum = num1+ num2; alert("결과값: " + sum); } addNumber(); 2. var를 사용한 변수의 특징 1) 변수의 범위 ⓐ 지역 변수 : 한 함수 안에서만 사용할 수 있는 변수 function addNumber() { var sum = 10+ 20; //함수 안에서 사용한 지역변수 } addNumber(); console.log..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 변수 알아보기 1) 변수 : 프로그램을 실행하는 동안 값이 여러번 달라 질 수있는 데이터 2) 상수 : 값을 지정하면 바뀌지 않는 데이터 2. 변수 선언 규칙 1) 영어문자와 _(언더스코어-아래다시), 숫자를 사용함 2) 영어 대소문자 구별함, 예약어 변수 이름 못 씀 3) 여러 단어를 연결한 변수이름은 중간에 대문자를 섞어쓰는게 좋음 4) 변수 이름은 의미있게! 3. 변수 선언하기 var 변수명; var a, b, c; //한꺼번에 변수 지정이 가능하다. 4. 자료형 종류 설명 예시 숫자형 따옴표 없이 숫자로만 표시(정수, 실수) var num = 1000; 문자형 작은/큰따옴표로 묶어서 나타냄 var ..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 자바스크립트의 기능 1) 웹의 요소 제어 2) 웹 어플리케이션을 만듬 3) 다양한 라이브러리 사용가능 4) 서버 개발 가능 2. ... 2) 웹 문서 외부에서 자바스크립트 작성 - 새로운 js파일을 작성한 후 확장자를 .js 로 저장한다. - js파일을 웹문서로 불러올 때는 html파일안에서 아래와 같이 작성한다. ⓔ console.log() : 콘솔 창에 출력 - 콘솔문은 괄호 안의 내용을 콘솔 창에 표시한다. - 콘솔창은 ctrl + shift + j 나 개발자도구(f11)에 들어가 콘솔탭을 클릭하면 된다. ex) 이름을 받아서 콘솔 창에 표시하기 var name = prompt("이름을 입력하세요."..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 CSS와 박스 모델 1. 블록 레벨 요소와 인라인 레벨 요소 1) 블록 레벨 요소 : 태그를 이용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 - 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며, 블록요소가 끝나는 지점에서 자동으로 줄바꿈됨 ex) , , , , , ... 2) 인라인 레벨 요소 : 한 줄 차지하지 않음 - 너비(width), 높이(height)를 조절할 수 없고, line-height(높낮이 조절) 혹은 text-align(텍스트 정렬)을 할 수 있으며, 블록 요소와 다르게 인라인 요소는 끝나는 지점에 줄..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 글꼴 관련 스타일 종류 속성 사용 방법 font-family 글꼴 지정 font-family: , , ... ex) font-family : "맑은 고딕", 돋움, 굴림, ... font-size 글자 크기 font-size: | | | ex) font-size : 10px font-style 이탤릭체 font-style: normal / italic / oblique(이탤릭체) font-weight 글자 굵기 font-weight : normal / bold / bolder(더 굵게) / lighter / 100~900 * 글꼴 이름이 두단어 이상일 땐 "맑은 고딕" 처럼 큰 따옴표로 묶어준다. * 글자..