[Front-End] html+css+javascript 6

[HTML+CSS+자바스크립트 웹 표준의 정석] 자바스크립트 (문서객체모델 DOM, getElementById, querySelector, addEventListener)

1. DOM 트리의 노드 요소 노드 : 모든 HTML 태그를 의미함 텍스트 노드: 태그의 텍스트 내용 속성 노드: 태그의 속성 주석 노드: 주석 2. DOM에 접근하기 getElementById(id) : id명으로 접근함 getElementByClassName(class) : 클래스명으로 접근하며 여러요소가 배열 형태로 저장됨 getElementByTagName(tag) : 태그명으로 접근하며 여러 요소가 배열 형태로 저장됨 querySelector() : id명이나 선택자를 사용해 접근함 querySelectorAll() : 클래스명이나 태그명의 선택자를 사용해 접근함. 여러 노드가 노드 리스트 형태로 저장. 속성 가져오기 및 수정하기 - getAttribute(속성) - setAttribute(속성..

[HTML+CSS+자바스크립트 웹 표준의 정석] 자바스크립트 (익명함수,선언적함수,가변인자함수,내부함수,자기호출함수,콜백함수,클로저,setTimeout, setInterval, 이벤트)

[자바스크립트 함수와 이벤트] 1. 선언적 함수 - 함수 재정의 가능함 - 동일한 이름의 함수 아래쪽에 있다면, 아래 함수가 실행됨. 2. var를 사용 - 지역변수 : 함수 안에서 사용 - 전역변수 : 전역에서 사용 3. var 변수와 호이스팅 - 호이스팅: 변수를 뒤에서 선언하지만, 마치 앞에서 미리 선언한 것처럼 인식함 - 뒤에 선언을 두더라도 앞으로 끌어올려 인식 4. let을 사용한 변수 특징 - 블록변수 - 블록 안에서만 사용 - 재할당 가능, 재선언 X - 호이스팅 X 5. const 사용한 변수 특징 - 상수 - 변하지 않는 값 선언할때 사용 - 재선언X, 재할당 X 6. var, let, const로 선언한 변수 비교 구분 var let const 스코프 함수 레벨 블록 레벨 블록 레벨 ..

[HTML+CSS+자바스크립트 웹 표준의 정석] 자바스크립트 기본문법

1. 자바스크립트 기능 - 웹 요소 제어 - 웹 애플리케이션 만듬 - 다양한 라이브러리 사용 가능 - 서버 개발 2. 스크립트 작성 - 내부 자바스크립트 사용 : 사이에 스크립트 소스 작성하고 앞에 위치 - 외부 스크립트 파일 연결해서 자바스크립트 작성 : js파일을 HTML파일에 연결 3. 자바스크립트 기본 입출력 방법 - 타입 : 표현식(expression), 명령(statement) - 입출력 방법 1) 알림창 출력 alert (메시지) 2) 확인창 출력 confirm (메시지) 3) 프롬프트 창에서 입력받기 prompt (메시지) 또는 prompt (메시지, 기본값) 4) 웹 브라우저 화면에 출력을 담당하는 document.write() 문 document.write() 5) 콘솔창에 출력하는 c..

[HTML+CSS+자바스크립트 웹 표준의 정석] CSS - 연결선택자,속성선택자, 가상클래스

1. 배경 이미지 관련 속성 종류 설명 background-color 배경색 지정 background-clip 배경색이나 이미지 적용 범위 지정 background-image 배경 이미지 지정 background-repeat 배경 이미지 반복 방법 지정 background-position 배경 이미지 위치 지정 background-origin 배경 이미지를 배치할 기준 지정 background-attachment 배경 이미지를 문서에 고정 background 하나의 속성으로 배경 스타일을 한꺼번에 지정 background-size 배경 이미지 크기 조절 2. 선형 그라데이션 관련 속성 종류 설명 방향 끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용. 사용할 수 있는 예약어는 ..

[HTML+CSS+자바스크립트 웹 표준의 정석] CSS 다루기 - 기본선택자, 스타일 우선순위, 박스모델, 레이아웃만들기

1. 스타일 시트 종류 설명 브라우저 기본 스타일 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일 인라인 스타일 style 속성을 사용해 필요한 요소에 스타일을 직접 지정 내부 스타일 시트 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리 외부 스타일 시트 문서에서 사용하는 스타일을 모아서 따로 파일로 저장 후 연결하여 사용 2. CSS 기본 선택자 종류 설명 작성 예시 전체 선택자 문서의 모든 요소에 스타일 적용 * { margin:0; } 타입 선택자 특정 태그 사용한 모든 요소에서 스타일 적용 p { font-style: italic; } 클래스 선택자 특정 부분만 선택해서 문서 안에 여러번 적용. 마침표를 붙여서 사용. .bg {background-col..

[HTML+CSS+자바스크립트 웹 표준의 정석] HTML 시작하기

[HTML 문서 만들기] - HTML (Hyper Text Mark up Language) : 웹문서를 만드는 언어 - 기본구조 : 로 시작해 , : 웹 브라우저가 웹문서를 해석하는데 필요한 정보 입력하는 부분. : 실제로 웹 브라우저 화면에 나타나는 내용. HTML 태그의 대부분이 태그 안에 들어감. - 시멘틱(semantic)태그 : 그 이름만봐도 의미를 알 수 있는 태그 레드향 주문하기 배송 정보 주문 상품 이름 배송 주소 이메일 연락처 배송 지정 (주문일로부터 최소 3일 이후) [웹 표출 화면] HTML 삽입 미리보기할 수 없는 소스