EverGiver

웹 요소를 클릭했을 때 실행할 함수를 연결하려면 다음과 같은 기본 형식으로 사용한다. 웹 요소.onclick = 함수;​ 자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있는데 그중에서 함수 querySelector( )를 사용하여 가져오는 것이 쉽다. - querySelector( )의 괄호 안에는 클래스 이름이나 id 이름 또는 다양한 선택지를 넣을 수 있다. 예시 1. querySelector( )를 사용해 버튼 요소를 가져오고 변수 changeBttn에 저장한다. 그리고 changeBttn에 onclick을 사용해 changeColor( ) 함수를 연결한다. ▷ 이때 주의할 점은 함수의 이름만 사용하고 괄호는 붙이지 않아야 한다는 것이다. 2. 웹 요소의 프로그램 안에서 여러 번 사용하지 않..

변수란 변수 (variable) - 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터 상수 (constant) - 값을 한번 지정하면 바뀌지 않는 데이터 변수 선언의 규칙 변수 선언 - 변수를 사용하기 위해 변수를 구별할 수 있도록 이름을 붙이는 과정 지켜야 할 규칙 1. 변수 이름은 영어 문자와 언더스코어(_), 숫자를 사용한다. - 변수 이름의 첫 글자는 영어 대소 문자나 언더스코어(_)만 쓸 수 있으며, 숫자나 기호, 띄어쓰기는 허용하지 않는다. 2. 영어 대소 문자를 구별하며 예약어는 변수 이름으로 쓸 수 없다. 3. 여러 단어를 연결할 변수 이름은 중간에 대문자를 섞어 쓴다. - 낙타 표기법(camel case)라고 한다. 4. 변수 이름은 의미 있게 작성해야 한다. 변수 선언하기 ..

식과 문 자바스크립트 언어의 큰 줄기는 식(expression)과 문(statement)이다. 식은 표현식이라고도 하는데, 연산식뿐만 아니라 실제 값도, 함수를 실행하는 것도 식이 된다. (어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있으며, 식은 변수에 저장된다.) 문은 명령이라고 생각할 수 있다. 문의 끝에는 세미콜론(;)을 붙여서 구분한다. 간단한 입출력 방법 알림 창 출력하기 - 알림 창(alert)은 가장 많이 사용하는 간단한 대화 상자이다. alert(메시지)​ - alert()를 입력하고 괄호 안에 따옴표(" " 또는 ' ')와 함께 메시지를 넣어 주면 된다. 확인 창 출력하기 - 사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭할 수 있다. - 그러면 선택한 결과에 맞게 프로그램이..

웹 문서 안에 태그 사이에 실행할 자바스크립트 소스를 작성한다. ​

CSS 그리드 레이아웃에서 사용하는 용어 그리드 항목을 배치할 때 가로 열(줄)과 세로 행(칼럼)을 모두 사용 CSS 그리드 레이아웃 항목을 배치하는 속성 그리드 컨테이너를 지정하는 display 속성 종류 설명 grid 컨테이너 안의 항목을 블록 레벨 요소로 배치 inline-grid 컨테이너 안의 항목을 인라인 레벨 요소로 칼럼과 줄을 지정하는 grid-template-columns, grid-template-rows 속성 - grid-template-columns 속성 ▷ 그리드 컨테이너 안에 항목을 배치할 때 칼럼의 크기와 개수를 지정 (몇 개의 칼럼으로 배치할지, 각 칼럼의 너비를 얼마로 할지 지정) - grid-template-rows 속성 ▷ 그리드 컨테이너 안에 항목을 배치할 때 줄의 크기..

1. 플렉스 컨터이너(부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소 2. 플렉스 항목(자식 박스) : 플렉스 박스 레이아웃을 적용할 대상으로 그림에서 1~6까지 작은 박스들이 모두 해당한다. 3. 주축(main axis) : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향. (기본적으로 왼쪽에서 오른쪽이며 수평 방향으로 배치한다. 플렉스 항목의 배치가 시작되는 위치를 '주축 시작점', 끝나는 위치를 '주축 끝점'이라고 한다.) 4. 교차축(cross axis) : 주축과 교차하는 방향을 말하며 기본적으로 위에서 아래로 배치한다. (플렉스 항목의 배치가 시작되는 위치를 '교차축 시작점', 끝나는 위치를 교차축 끝점'이라고 한다.) 플렉스 박스 항목을 배치하는 속성 종류 설명 ju..