밍스토리

여행사 웹 사이트의 시작 화면 만들기...! ▽ 로고 : 보통 사이트의 시작 화면 왼쪽 윗부분에 배치, 이미지 파일이나 텍스트 사용 가능 ▽ 내비게이션 : 사이트 내 어느 위치에나 배치 가능, 대부분 위쪽에 배치, 내비게이션에 마우스 포인터를 올리면 하위 메뉴가 자연스럽게 펼쳐지도록 만듦 ▽ 이미지 슬라이드 쇼 : 사이트 가운데에 사용자의 눈길을 사로잡는 이미지 3개 보여줌 ▽ 탭 메뉴 : 특정 탭을 클릭하면 그 탭에 해당하는 내용으로 바꿔서 표시 ▽ 퀵 링크 : 사용자가 사이트에서 많이 사용하는 서비스를 접근하기 쉬운 곳에 모아 둔 영역 ▽ 푸터 : 사이트 하단에 회사 주소와 연락처, SNS 링크 등 여러 정보를 담아 두는 영역 index.html Dream Jeju 단체 여행 ∇ 회사 연수 수학 여행..

문서객체모델(DOM) 달리고 달려 도착한 책의 마지막 챕터 :) 웹에서 자바스크립스를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것 → 웹 문서의 모든 요소를 따로 제어할 수 있어야 함 문서 객체 모델(DOM) : 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM을 구성하는 기본 원칙 모든 HTML 태그는 요소 노드입니다. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드입니다. HTML 태그에 있는 속성은 자식 노드인 속성 노드입니다. 주석은 주석 노드입니다. DOM에 접근하기 getElementById(id) : id명으로 접근 getElements..

자바스크립트와 객체 객체 : 프로그램에서 인식할 수 있는 모든 대상 문서 객체 모델(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) 타..

3. 입력 양식 작성하기 우리는 웹에서 폼을 자주 만난다 ! 하나의 웹 페이지 안에서도 여러가지 폼을 사용 → 아이디와 비밀번호, 로그인 버튼, 회원 가입 등 웹 사이트로 정보를 보낼 수 있는 모든 요소는 모두 폼 ▽ 폼에서 사용하는 태그 종류 설명 폼의 시작과 끝 폼 요소를 그룹으로 묶음 필드셋에 제목을 붙임 사용자가 내용을 입력할 필드를 삽입 , 드롭다운 목록 삽입 텍스트를 여러 줄 입력할 수 있는 텍스트 영역 삽입 데이터 목록 삽입 ▽ 태그의 유형(type) 종류 설명 한 줄짜리 텍스트 상자 비밀번호 입력 필드 검색 입력 필드 URL주소 입력 필드 이메일 주소 입력 필드 전화번호 입력 필드 2개 이상 선택 가능한 체크 박스 1개만 선택 가능한 라디오 버튼 숫자 조절하는 스핀 박스 숫자 조절하는 슬라..