밍스토리

자바스크립트와 객체 객체 : 프로그램에서 인식할 수 있는 모든 대상 문서 객체 모델(DOM) : 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지, 링크, 텍스트 필드도 모두 객체 브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보도 객체, navigator, history, location, image, link..... 내장 객체 : 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의 되어 있음 객체의 인스턴스 만들기 자바스크립트에서 객체는 참조 형태로 사용해야 함 즉, 객체 자체가 아니라 인스턴스 형태로 만들어 사용 프로퍼티 : 객체의 특징이나 속성 매서드 : 객체에서 할 수 있는 동작 객체 인스턴스 만들기 → new 객체명 객체의 프로퍼티와 메서드 사용하기 → ..

함수와 이벤트 자바스크립트 프로그램은 단순히 동작 하나만 실행되는 게 아니라 여러 가지 동작이 연결 됨 동작해야할 목적대로 묶은 명령을 함수라고 함 ! 자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위르 스코프라고 함 → 변수가 어디까지 유효한지 가리키는 영역이 필요해서...! 지역변수 / 로컬변수 : 한 함수 안에서만 사용할 수 있는 변수 전역변수 / 글로벌 변수 : 스크립트 소스 전체에서 사용할 수 있는 변수 호이스팅 : '끌어올린다', 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽에 끌어올리는 것 실제로 끌어올리는 것이 아니고 고그를 그런 식으로 해석한다는 의미 변수를 실행하지 전이지만 '이런 변수가 있구나'하고 기억해두기 때문에 마치 선언한 것과 같은 효..

자바스크립트 기초 HTML - 웹 문서의 내용을 구성 CSS - 웹 문서의 레이아웃이나 색상, 스타일 등을 지정 자바스크립트 - 여기에 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음 자바스크립트는 HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이거나 웹 사이트 UI 부분에 많이 활용 자바스크립트 위 텍스트를 클릭해 보세요 1. 이 문서가 웹 문서라는 것을 알게 됨 사이의 내용을 보고 HTML표준에 맞춰 읽기 시작 2. , 태그 사이에 각각 어떤 태그가 있는지 확인 태그 간의 관계는 어떻게 되어있는지 분석 3. 태그 분석 긑나면 정보 분석 4. 사이의 소스를 해석 5. 분석한 HTML, CSS정보에 따라 웹 브라우저 화면에 표시 6. 웹 브라우저에서 '자바스크립트..

트랜지션과 애니매이션 애니메이션 동작을 어떻게 만드는지에 대해 !! 애니메이션 동작을 알며 웹사이트의 메뉴를 부드럽게 열 수 있고, 웹 요소를 이동할 수 있다 웹 문서에서 CSS 변형을 이용하면 사용자의 동작에 반응해 텍스트나 이미지를 움직이게 할 수 있다 ▽ 변형 함수 translate() 함수: 요소 이동 transform : translate( tx , ty ) 지정한 크기만큼 x축과 y축으로 이동 transform : translate( tx , ty, tz ) 지정한 크기만큼 x축과 y축, z축으로 이동 transform : translateX( tx ) 지정한 크기만큼 x축으로 이동 transform : translateY( ty ) 지정한 크기만큼 y축으로 이동 transform : tran..

CSS 고급 선택자 간단한 웹 문서는 기본 선택자만으로도 스타일을 적용할 수 있지만, 소스가 길어지면 스타일을 지정할 때마다 id와 class가 계속 늘어나므로 그 이름을 모두 기억하기는 쉽지 않음 !! 고급 선택자 연결 선택자와 속성 선택자를 사용하여 소스의 위치나 속성값에 따라 특정 요소를 쉽게 선택하는 방법 ▽ 연결 선택자 종류 형식 설명 하위 선택자 상위요소 하위요소 상위 요소에 포함된 모든 하위 요소 선택 자식 선택자 부모요소 > 자식요소 부모 요소에 포함된 자식 요소만 선택 인접 형제 선택자 요소 1 + 요소 2 요소1 이후 맨 먼저 오는 형제 요소 선택 형제 선택자 요소 1 ~ 요소 2 요소1과 형제인 모든 요소 선택 ▽ 속성 선택자 종류 선택 요소 예시 [속성] 해당 속성이 있는 요소 [r..

레이아웃을 구성하는 CSS 박스 모델 블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킴 , , 인라인 레벨 요소 : 한줄을 차지하지 않고 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 , , 스타일 시트에서는 박스 형태인 요소를 박스 모델 요소라고 함 !! 박스모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩, 박스의 테두리, 그리고 여러 박스 모델 사이의 여백인 마진 등의 요소로 구성됨 ▽ 박스 모델 속성 종류 설명 width 박스 모델의 너비 지정 height 박스 모델의 높이 지정 box-sizing 박스 모델의 크기를 계산하는 기준 지정 box-shadow 박스 모델에 그림자 효과 추가 ▽ 테두리 속성 종류 설명 border..

웹 문서에 디자인 입히기 ▽ 스타일 시트 : 웹 문서 안에서는스타일 규칙을 여러 개 사용, 이런 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 스타일 시트라고 함 (1) 브라우저 기본스타일 : 웹 브라우저에 기본으로 만들어져 있음 (2)사용자 스타일 : 사이트 제작자가 만듦 인라인 스타일 : 스타일 시트를 사용하지 않고 적용할 대상에 직접 표시 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것 외부 스타일 시트 : 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 사용 ▽ CSS 기본 선택자 (1) 전체 선택자 : 스타일을 문서의 모든 요소에 적용할 때 사용 → * { 속성: 값; ........ } (2) 타..

앞장은 비주얼 스튜디오 코드 설치내용이라 스킵했다 :) 1. HTML 기본 문서 만들기 HTML (Hyper Text Markup Language) 다양한 인터넷 정보를 웹 브라우저에 보여 줄 때 사용하는 언어 → 웹 문서를 만드는 언어 Hyper Text : 문서를 서로 연결해 주는 링크 인터넷에서 → 링크만 클릭하면 다른 페이지나 사이트로 쉽게 연결 가능 Markup : '표시한다.' 웹 문서는 내용을 작성하는 프로그램과 그 내용을 확이나는 프로그램이 다르다 ! 웹 편집기에서 마크업 형식으로 작성해야 한다. (태그를 사용) 웹 문서는 보통로 시작해 , : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분 ~ : 실제로 웹 브라우저 화면에 나타나는 내용, HTML태그는 대부분 태그 안에 ..