코딩 국비 학원/Do it! HTML+CSS+자바스크립트 (15) 썸네일형 리스트형 [Do it! HTML+CSS+자바스크립트]문서 객체 모델(DOM) 22.12.23 배운 내용 정리2 문서 객체 모델(DOM) (문서 객체 모델 알아보기, DOM 요소에 접근하고 속성 가져오기, DOM에서 이벤트 처리하기, DOM에서 노드 추가·삭제하기) 문서 객체 모델 알아보기 ① 문서 객체 모델(DOM)이란 문서 객체 모델(DOM)은 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법임. HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있음. DOM은 웹 문서를 하나의 객체로 정의함. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의함. ex. 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image .. [Do it! HTML+CSS+자바스크립트]자바스크립트와 객체 22.12.23 배운 내용 정리1 자바스크립트와 객체 (객체 알아보기, 자바스크립트의 내장 객체, 브라우저와 관련된 객체) 객체 알아보기 프로그래밍 언어에서 객체는 여러 가지 의미로 해석할 수 있지만, 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다는 정도로 이해하면 됨. 흔히 자바스크립트는 모든 것이 객체라는 말이 있을 정도로 자바스크립트에서 객체는 중요한 개념임. ※ 자바스크립트에서 사용하는 객체 종류 설명 문서 객체 모델(DOM) 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체임. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있음. 브라우저 관련 객체 웹 브라우저에서 사용하는 정보도 객체.. [Do it! HTML+CSS+자바스크립트]함수와 이벤트 22.12.22 배운 내용 정리 함수와 이벤트 (함수, var를 사용한 변수의 특징, let와 const의 등장, 재사용할 수 있는 함수 만들기, 함수 표현식, 이벤트와 이벤트 처리기, DOM을 이용한 이벤트 처리기) 함수 알아보기 ① 여러 동작을 묶은 덩어리, 함수 자바스크립트 프로그램은 여러 가지 동작이 연결되는데, 이렇게 동작해야 할 목적대로 묶은 명령이 함수임. 함수를 사용하면 명령의 시작과 끝을 명확하게 구별할 수 있고, 묶은 기능에 이름은 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있음. 자바스크립트에는 여러 함수가 미리 만들어져 있어서 개발자는 가져다 사용하기만 하면 됨. ② 함수를 사용하는 이유 개발자는 프로그래밍을 할 때 알림 창을 표시하는 alert( ) 함수처럼 자바스크립트에 들.. [Do it! HTML+CSS+자바스크립트]자바스크립트 기본 문법 22.12.21 배운 내용 정리2 자바스크립트 기본 문법 (변수, 자료형, 연산자, 조건문, 반복문) 변수 알아보기 ① 변수란 변수란 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터를 가리킴. 반면에 값을 한번 지정하면 바뀌지 않는 데이터를 상수라고 함. 예를 들어 나이를 계산하는 프로그램을 만든다고 가정했을 때 나이를 계산할 때는 다음과 같은 식을 사용함. ex. 나이 = 올해 연도 - 태어난 연도 + 1 나이를 계산하는 식에서 맨 끝의 '1'은 값이 변하지 않는 '상수'임. 하지만 올해 연도와 태어난 연도는 입력하는 사람마다 다르니 '변수'가 됨. ② 변수 선언의 규칙 변수를 사용하려면 변수를 구별할 수 있도록 이름을 붙여 주어야 하는데, 이것을 변수 선언이라고 함. 프로그램에서 사용할.. [Do it! HTML+CSS+자바스크립트]자바스크립트와 첫 만남 22.12.21 배운 내용 정리1 자바스크립트와 첫 만남 (자바스크립트로 무엇을 할까, 웹 브라우저가 자바스크립트를 만났을 때, 자바스크립트 용어와 기본 입출력 방법, 자바스크립트 스타일 가이드) 자바스크립트로 무엇을 할까 ① 웹의 요소를 제어함 HTML은 웹 문서의 내용을 구성하고, CSS는 웹 문서의 레이아웃이나 색상, 스타일을 지정함. 여기에 자바스크립트를 추가하면 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음. 자바스크립트는 HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이는 것처럼 웹 사이트 UI 부분에 많이 활용함. ex. 웹 사이트에서 메인 메뉴 위로 마우스 포인터를 올리면 숨어 있는 하위 메뉴가 펼쳐지게 함. ex. 포털 사이트에서 제목이나 화살표.. [Do it! HTML+CSS+자바스크립트]반응형 웹과 미디어 쿼리 22.12.20 배운 내용 정리2 반응형 웹과 미디어 쿼리 (반응형 웹, 미디어 쿼리, 그리드 에이아웃, 플렉스 박스 레이아웃, CSS 그리드 레이아웃) 반응형 웹 알아보기 ① 반응형 웹 디자인이란 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해줌. 이러한 반응형 웹은 CSS를 지원하는 모던 브라우저에서만 사용가능함. ② 모바일 기기를 위한 뷰포트 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역으로, 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있음. ③ 뷰포트 지정하기 뷰포트는 태그를 이용해 태그 사이에 작성함. 뷰포트 작성의 기본형은 다음과 같음. 기본형 : ※ 뷰포트의 속성 종류 설명 사용 가능한 값 기본.. [Do it! HTML+CSS+자바스크립트]트랜지션과 애니메이션 22.12.20 배운 내용 정리1 트랜지션과 애니메이션(변형 알아보기, 트랜지션 알아보기, 애니메이션 알아보기) 변형 알아보기 ① transform과 변형 함수 CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야 함. 기본형 : transform: 함수 웹 요소를 이동시키는 변형 함수는 translate( )임. ex. 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자 .photo를 정의하려면 다음과 같이 사용함. .photo { transform: translate(50px, 100px); } (1) 2차원 변형과 3차원 변형 2차원 변형은 웹 요소를 평면에서 변형함. 예를 들어 수평 방향으로 이동하거나 수직 방향으로 왜곡함. 이렇게 평면에서 변.. [Do it! HTML+CSS+자바스크립트]CSS 고급 선택자 22.12.19 배운 내용 정리2 CSS 고급 선택자(연결 선택자, 속성 선택자, 가상 클래스와 가상 요소) 연결 선택자 ① 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 함. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 함. ※ 하위 선택자(자손 선택자) 하위 선택자(자손 선택자)를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택함. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용됨. 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분함. 기본형 : 상위요소 하위요소 하위 선택자를 사용하는 방법은 다음과 같이 se.. 이전 1 2 다음
