본문 바로가기

CODING166

자바스크립트 : 요소 선택 요소 선택 자바스크립트의 각 요소를 제어하기 위해서는 해당 요소를 선택해야 합니다. 요소 선택 메서드에 대하여 알아보겠습니다. 요소 직접 선택 메서드 메서드 설명 getElementById() document.getElementById('content')일 경우, HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName('menu')일 경우, HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsByTagName() document.getElementsByTagName('ul')일 경우, HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. getEle.. 2022. 8. 6.

자바스크립트 퀴즈 효과 : 주관식(여러 문제) 유형 자바스크립트 : 퀴즈 효과 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 여러 개의 문제에 주관식 정답을 입력할 수 있는 퀴즈 유형을 작업해 보도록 하겠습니다. 주관식(여러 문제) 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. 각 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. // 선택자 const quizType = document.querySelectorAll(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelectorAll(".quiz__question .number"); // 퀴즈 번호 c.. 2022. 8. 6.

자바스크립트 퀴즈 효과 : 주관식 유형 자바스크립트 : 퀴즈 효과 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 주관식 정답을 입력할 수 있는 퀴즈 유형을 작업해 보도록 하겠습니다. 주관식 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. // 선택자 const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); // 퀴즈 번호 const quizAsk = document.query.. 2022. 8. 4.

자바스크립트 퀴즈 효과 : 정답 확인하기 유형 자바스크립트 : 퀴즈 효과 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 정답을 입력하지 않고 정답을 확인할 수 있는 퀴즈 유형을 작업해 보도록 하겠습니다. 정답 확인하기 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. '정답 확인하기' 버튼을 누르면 문제의 정답을 확인할 수 있습니다. // 선택자 const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); // 퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask".. 2022. 8. 4.

레이아웃(Layout) 유형05 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이러한 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 overflow:hidden을 설정합니다. 3. clearfix를 설정합니다. 가장 안정적인 방법입니다.. 2022. 7. 29.

레이아웃(Layout) 유형04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이러한 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 다음의 레이아웃을 작업해 보도록 하겠습니다. 컨테이너(Container)를 이용한 레이아웃 배치할 요소들을 감싸는 부모 요소를 컨테이너(container)라고 합니다. 컨테이너를 이용해 레이아웃을 만드는 예시입니다. inherit 속성을 사용하면 자식 요소에게 스타일 속성을 상속할 수 있습니다. *{ margin: 0; padding: 0; } #header{ height: 100px; background-color: #E0F2F1; } #nav{ height: 300px; background: #80CBC4; } #section{ height: 580.. 2022. 7. 29.

레이아웃(Layout) 유형03 레이아웃03 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. CSS로 레이아웃 작업을 하는 방법에는 3가지가 있습니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 .. 2022. 7. 29.

레이아웃(Layout) 유형02 레이아웃02 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. CSS로 레이아웃 작업을 하는 방법에는 3가지가 있습니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 .. 2022. 7. 29.

자바스크립트 : 전역 변수와 지역 변수 전역 변수와 지역 변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 전역 변수와 지역 변수로 나누어집니다. 전역 변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, 지역 변수는 함수 블록{} 내에서만 사용할 수 있습니다. 전역 변수와 지역 변수 선언 위치 var kor = 90; function getScore() { kor = 100; //전역 변수 document.write(kor); //100 } getScore(); document.write(kor); //100 위의 예시에서 함수 블록{} 안에 있는 kor 변수는 전역 변수입니다. 따라서 getScor() 함수를 호출하게 되면 kor 변수의 값이 90에서 100으로 바뀌게 됩니다. var kor = 90; function.. 2022. 7. 28.

자바스크립트 : 함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어내기 위한 코드들의 집합입니다. 선언적 함수 선언적 함수는 가장 일반적인 형태로, 함수명이 있는 함수입니다. function func(){ document.write("함수가 실행되었습니다.1") } func(); 결과보기 함수가 실행되었습니다.1 익명 함수 익명 함수는 말 그대로 함수의 이름이 없으며, 변수의 이름을 쓴 함수입니다. 함수를 재사용하지 않을 경우, 익명함수를 만들어서 사용합니다. const func = function(){ document.write("함수가 실행되었습니다.2"); } func(); 결과보기 함수가 실행되었습니다.2 매개변수 함수 함수의 매개변수란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 .. 2022. 7. 26.

자바스크립트 : 데이터 타입 데이터 타입(Date Type) 데이터 타입(Data Type)은 변수에 저장되는 데이터의 유형으로 Primitive(원시) 데이터 타입과 Object(객체) 데이터 타입으로 나눌 수 있습니다. 이곳에서는 Primitive(원시) 데이터 타입에 대해서 살펴보겠습니다. number(숫자) 데이터 number 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; var num2 = 10.5; var num3 = le+2; console.log(num1); //10 console.log(num2); //10.5 console.log(num3); //100 string(문자) 데이터 string 데이터는 '' 또는 ""으로 표현할 수 있습니다. var str1 = '문자'; var s.. 2022. 7. 25.

자바스크립트 : 조건문 조건문 조건문은 주어진 조건식의 결과에 따라 별도의 명령을 수행하도록 제어하는 명령문입니다. 가장 기본이 되는 명령문은 if문이며, 그 외에도 switch문 등이 있습니다. if문 if문은 조건식의 결과가 true이면 주어진 명령문을 실행합니다. false이면 명령문을 실행하지 않습니다. 기본적인 형식은 다음과 같습니다. if (조건식) { 실행문; } if문은 if문 안에 또 다른 if문을 중첩하여 사용할 수 있습니다. 예제와 함께 살펴보도록 하겠습니다. 시험과목: HTML, CSS, JAVASCRIPT 합격기준: 100점 만점 기준, 과목당 40점 이상, 전과목 평균 60점 이상이면 합격 var html = Number(prompt('html 점수입력', '')); var css = Number(pr.. 2022. 7. 25.

레이아웃(Layout) 유형 01 레이아웃01 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. CSS로 레이아웃 작업을 하는 방법에는 3가지가 있습니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 .. 2022. 7. 25.

자바스크립트 : 반복문 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. while문 while문은 조건식의 값이 true일 경우, 계속해서 반복합니다. while문의 기본적인 형식은 다음과 같습니다. 초기 값 while (조건식) { 실행문; 증가감식; } do while문 do while문은 while문과 동작 방식이 동일하지만, do while문은 do를 먼저 실행하기 때문에 첫 번째 실행은 조건에 상관없이 실행한다는 차이가 있습니다. do wile문의 기본적인 형식은 다음과 같습니다. 초기 값 do { 실행문; 증가감식; } while (조건식) for문 f.. 2022. 7. 21.

자바스크립트 : 연산자 자바스크립트 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구할 때 사용합니다. % 나머지를 구할 때 사용합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자입니다. 대입 연산자 종류 설명 = num = .. 2022. 7. 20.

자바스크립트 : 기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법을 알아야 합니다. 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였으며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 표준화 작업을 통해 현재는 모든 브라우저에서 지원됩니다. 자.. 2022. 7. 20.

이전 1 ··· 3 4 5 6 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바