본문 바로가기

Study137

요소 선택자 요소를 직접 선택하는 메서드 전역 변수와 지역 변수의 선언 위치 메서드 설명 getElementById() 아이디 요소 선택자. document.getElementById('content')일 경우 HTML요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() 클래스 요소 선택자. document.getElementsByClassName('menu')일 경우 HTML요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsByTagName() 태그 요소 선택자. document.getElementsByTagName('ul')일 경우 HTML요소 중 태그명이 'ul'인 요소들을 선택합니다. getElementsByName() docum.. 2022. 8. 7.

퀴즈 이펙트 - 주관식 여러 유형 객관식 유형(여러문제) 원본 소스 보기 자바스크립트 1. 선택자를 설정합니다. 2. 문제 정보 데이터를 저장합니다. 2-1. 문제 출력 함수를 설정합니다. 2-1-1. 선택지를 출력합니다. 2-1-2. 문제의 해설을 숨깁니다. 3. 정답을 확인합니다. 3-1. 사용자가 쓴 정답과 문제의 정답이 맞는지 확인해야합니다. 3-2. 사용자가 고른 input 박스를 가져와야 합니다. (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.) 4. 정답을 클릭합니다. // const num = [100, 200, 300, 400, 500]; // num.forEach(function(el){ // console.log(el) // document.querySelector(".quiz__wr.. 2022. 8. 6.

퀴즈 이펙트 - 주관식 QUIZ 이펙트 만들기 퀴즈 이펙트로 웹디자인기능사 시험 문제 퀴즈를 만들어보았습니다. 열심히 공부하세요! 주관식 유형(여러문제) 원본 소스 보기 자바스크립트 1. 선택자를 설정합니다. 2. 문제 정보 데이터를 저장합니다. 3. 문제 데이터를 출력합니다. (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.) 4. 답을 입력할 때 소문자와 대문자가 상관이 없게 소문자 치환을 해주고 여백도 없애줍니다. ->toLowerCase().trim() 5. 사용자가 정답을 입력하면 정답을 입력하는 칸을 없애고 정답을 보여줍니다. 6. 클래스 like를 추가하여 정답을 확인하면 강아지가 웃는 모습이 보이게 합니다. -> quizDog.classList.add("like"); 7. 정답/오.. 2022. 8. 4.

퀴즈 이펙트 - 정답 확인하기 QUIZ 이펙트 만들기 퀴즈 이펙트로 웹디자인기능사 시험 문제 퀴즈를 만들어보았습니다. 열심히 공부하세요! 정답 확인하기 유형 원본 소스 보기 자바스크립트 1. 선택자를 설정합니다. 2. 문제 정보 데이터를 저장합니다. 3. 문제 데이터를 출력합니다. (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.) 4. 정답 버튼을 클릭하기 전까진 답을 확인할 수 없도록 정답을 숨깁니다. -> quizResult.style.display = "none"; 5. 버튼을 클릭하면 숨겨진 정답이 보이게 합니다. ->addEventListener()메서드를 사용하여 버튼을 클릭했을 때 함수를 실행하게 합니다. (※addEventListener()는 특정 이벤트가 발생되었을 때, 특정 함수를 .. 2022. 8. 4.

전역변수와 지역변수 전역 변수와 지역 변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나눕니다. '전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 지역 변수는 함수 블록{} 내에서만 사용할 수 있습니다. 전역 변수와 지역 변수의 선언 위치 전역 변수 지역 변수 var 변수; function 함수() { } function 함수() { var변수; } 예시 3-14) var kor = 90; function getScore() { kor = 100; //전역 변수 console.log(kor); //100 } getScore(); console.log(kor); //100 함수 블록 안에 있는 kor 변수는 전역 변수입니다. 그렇기 때문에 getScore()함.. 2022. 8. 3.

레이아웃 05 레이아웃3 이번 레이아웃은 section이 4개로 나누어진 레이아웃입니다. float을 이용한 레이아웃 태그를 float 속성 및 widh, height속성 등을 이용하여 레이아웃을 배치하는 방식입니다. /* float으로 인한 영역깨짐 방지법 1. 깨지는 영역에 clear:both를 설정한다. 2. 부모 박스 영역에 overflow: hidden을 설정한다. 3. clearfix를 설정한다. */ .clearfix::before, .clearfix::after{ content: ''; display: block; line-height: 0; } .clearfix::after{ clear: both; } *{ margin: 0; padding: 0; } #wrap { width: 100%; } #head.. 2022. 7. 29.

레이아웃 04 레이아웃4 이번 레이아웃은 전체 영역이 들어간 구조입니다 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 사용하여 가운데 영역을 설정합니다 float을 이용한 레이아웃 태그를 float 속성 및 widh, height속성 등을 이용하여 레이아웃을 배치하는 방식입니다. *{ margin: 0 auto; } #wrap { width: 100%; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; background-color: #26A69A; } #footer { height: 100px; background-colo.. 2022. 7. 29.

레이아웃 03 레이아웃3 이번 레이아웃은 section이 3개로 나누어진 레이아웃입니다. float을 이용한 레이아웃 태그를 float 속성 및 widh, height속성 등을 이용하여 레이아웃을 배치하는 방식입니다. * { margin: 0; padding: 0; } #body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #B3E5FC; } #nav { width: 1200px; height: 100px; background-color: #81D4FA; } #main { width: 1200px; } #aside { width: 3.. 2022. 7. 29.

레이아웃 02 레이아웃2 사이트를 만들 때 기본이 되는 레이아웃 입니다. float을 이용한 레이아웃 태그를 float 속성 및 widh, height속성 등을 이용하여 레이아웃을 배치하는 방식입니다. * { margin: 0; padding: 0; } #body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #C8E6C9; } #nav { width: 100%; height: 100px; background-color: #A5D6A7; } #main { width: 100%; overflow: hidden; } #aside { width.. 2022. 7. 29.

레이아웃 01 레이아웃1 사이트를 만들 때 가장 기본이 되는 레이아웃입니다. float을 이용한 레이아웃 태그를 float 속성 및 widh, height속성 등을 이용하여 레이아웃을 배치하는 방식입니다. * { margin: 0; padding: 0; } #body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #FFE0B2; } #nav { width: 100%; height: 100px; background-color: #FFCC80; } #aside { width: 30%; height: 780px; background-color:.. 2022. 7. 29.

소품샵 사뿐소품 2022. 7. 28.

함수 이해하기 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다. 선언적 함수 선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 의미합니다. function func(){ 실행문; } function compute(){ console.log('선언적 함수'); } 익명 함수 익명 함수는 변수에 데이터를 저장하여 변수를 함수처럼 사용할 수 있게 합니다. 익명 함수는 변수 선언 이후에 호출해야 합니다. var compute = function(){ 실행문; }; var compute = function(){ console.log('익명 함수'); }; 즉시 실행 함수 일회성으로 사용되는 함수입니다. 선언과 동시에 함수가 실행되고 함수명이 없기 때문에 재호출이 불가합니다. (fu.. 2022. 7. 28.

데이터 타입 자바스크립트에서의 데이터 타입 데이터 타입은 변수에 저장되는 데이터의 유형으로 '(Primitive)원시 데이터 타입'과 '(Object)객체 데이터 타입'으로 나눌 수 있습니다. 분류 데이터 타입 원시(Primitive) number, string, boolean, undefined, null, symbol 객체(Object) function, object, array number(숫자)데이터 number 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; var num2 = 10.5; var num3 = le+10; console.log(num1); // 10 console.log(num2); // 10.5 console.log(num3); // 100, le + 2는 1.. 2022. 7. 26.

조건문 이해하기 조건문 조건문은 지정한 조건에 따라 명령문의 실행 여부를 결정하는 문법을 말합니다. 조건문의 조건으로는 비교 연산자나 논리 연산자가 사용됩니다. if문 조건식이 참일 때만 결과를 표현해주는 구문입니다. if (조건식){ 실행문; } if...else문 if-else의 경우 조건식이 참일 때 if 블록의 실행문이 실행되고 거짓일 때 else블록의 실행문이 실행됩니다. if (조건식){ 실행문1; }else { 실행문2; } 다중 if문 여러가지 조건에 따라 조건문을 설정하는 구문. 조건에 계속 설정할 수 있으며 마지막에는 조건식을 쓰지 않습니다. if (조건식) { 실행문1; } else if (조건식) { 실행문2; } else { 실행문3; } 중첩 if문 조건문(if문) 안에 조건문(if문)이 있는 .. 2022. 7. 26.

반복문 이해하기 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문 do while문 for문이 있으며 for 문을 가장 많이 사용합니다. while 문 조건문이 참일 때 실행되는 반복문입니다. 초기 값 while ( 조건식 ){ 실행문; 증감값; } do while 문 조건식이 거짓으로 판별될 때까지 반복하는 반복문입니다. 조건식을 계산하기 전, do 이하의 명령문이 실행됩니다. 초기 값 do { 실행문; 증감값; } while (조건식) for 문 조건식이 거짓으로 판별될 때까지 실행문을 반복하는 구문입니다. for ( 초기값; 조건식; 증감값 ){ 실행문 } 01.0부터 99까지 출력하기 //0부터 99까지 출력하기 for( l.. 2022. 7. 26.

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

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

이전 1 2 3 4 5 다음

728x90

HTML

자세히보기

CSS

자세히보기

JAVASCRIPT

자세히보기

티스토리툴바