카테고리170 QUIZ Effect 04 퀴즈 효과04 웹디자인기능사 필기 기출문제를 이용한 객관식(한 문제) 유형입니다. 객관식 보기와 해설도 함께 볼 수 있습니다. 원본 소스 보기 자바스크립트 퀴즈를 만들기 위한 자바스크립트 작성법입니다. 자세한 설명은 아래에 있습니다. //01. 선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(.. 2022. 8. 8. [HTML]웹표준, 웹접근성, 웹호환성 01. 웹표준이란? 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미합니다. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, Javascript 등에 대한 규정을 담고 있으며 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것입니다. - 웹표준 준수 이유 국내 웹의 현실은 특정 브라우저와 사용자 등의 이용환경과 비표준 페이지 및 과도한 플러그인 .. 2022. 8. 8. [웹 사이트 제작]카드유형 01 카드유형01 모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI 패턴입니다. 수 많은 컨텐츠를 사용자에게 제공하는 서비스가 인기를 끌면서 카드 UI에 대한 관심이 지속적으로 높아지고 있으며, 뉴스나 커머스까지도 카드형 디자인이 다양하게 적용되고 있습니다. 카드 유형 중 첫 번째 카드 유형 제작 방법에 대해 알아보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. section태그는 보통 제목태그를 포함합니다. 내용을 한꺼번에 넣는 것.. 2022. 8. 8. QUIZ Effect 03 퀴즈 효과03 웹디자인기능사 필기 기출문제를 이용한 주관식(여러 문제) 유형입니다. 단일 문제가 아닌 여러 문제이기 때문에 다중 선택을 위해 querySelectorAll을 사용하였고, 문제는 여러 정보를 담기 위해 객체 속에 데이터를 저장하였습니다. 원본 소스 보기 자바스크립트 퀴즈를 만들기 위한 자바스크립트 작성법입니다. 자세한 설명은 아래에 있습니다. //01. 선택자 : 다중 선택을 위해 querySelectorAll 사용 const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const q.. 2022. 8. 5. [javascript]요소선택 요소 선택 자바스크립트의 요소 선택에 대해 알아보겠습니다. 요소를 직접 선택하는 메서드 메서드 설명 getElementByld() document,.getElementsByld('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsByTagName() document.getElementsByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. getElementsByName() document.getElementsBy.. 2022. 8. 5. QUIZ Effect 02 퀴즈 효과03 웹디자인기능사 필기 기출문제를 이용한 주관식(여러 문제) 유형입니다. 단일 문제가 아닌 여러 문제이기 때문에 다중 선택을 위해 querySelectorAll을 사용하였고, 문제는 여러 정보를 담기 위해 객체 속에 데이터를 저장하였습니다. 원본 소스 보기 자바스크립트 퀴즈를 만들기 위한 자바스크립트 작성법입니다. 자세한 설명은 아래에 있습니다. //01. 선택자 : 다중 선택을 위해 querySelectorAll 사용 const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const q.. 2022. 8. 4. QUIZ Effect 01 퀴즈 효과01 자바스크립트를 이용하여 퀴즈를 만들 수 있습니다. 이번 퀴즈는 정답확인하기를 클릭하면 정답을 확인할 수 있습니다. 원본 소스 보기 자바스크립트 퀴즈를 만들기 위한 자바스크립트 작성법입니다. 변수선언을 통해 선택자와 문제 정보를 저장합니다. innerText를 이용하여 문제정보를 출력할 수 있는데, innerText외에 textContent도 사용할 수 있습니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector.. 2022. 8. 4. [LAYOUT]레이아웃 유형05 레이아웃05 이번 레이아웃 역시 가운데 영역이 들어간 구조입니다. float을 이용한 레이아웃 'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, 여기서는 clearfix;를 사용하였습니다.. * { margin: 0 auto; padding: 0; } #wrap { width: 100%; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #EEEBE9; .. 2022. 7. 29. [LAYOUT]레이아웃 유형04 레이아웃04 이번 레이아웃은 실제 사이트에서 많이 사용하는 전체 영역이 들어간 구조입니다. 컨테이너를 만들어 영역을 설정합니다. 컨테이너 구조 이번 레이아웃은 전체 영역이 들어간 구조입니다. 복잡하지 않기 때문에, float이나 flex, grid를 사용하지 않고 레이아웃을 만들 수 있습니다. * { margin: 0; padding: 0; } #header { height: 100px; background-color: #e0f2f1; } #nav { height: 300px; background-color: #80cbc4; } #section { height: 580px; background-color: #26a69a; } #footer { height: 100px; background-color: #.. 2022. 7. 29. [LAYOUT]레이아웃 유형03 레이아웃03 이번 레이아웃은 가운데 영역이 다소 복잡해진 구조입니다. float을 이용한 레이아웃 'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, clearfix 또한 사용 가능합니다. * { margin: 0; } body { background-color: #e1f5fe; } #wrap { width: 1200px; margin: 0 auto; } #header { height: 100px; background-color: #b3.. 2022. 7. 29. [LAYOUT]레이아웃 유형02 레이아웃02 이번 레이아웃은 가운데 영역이 하나 더 추가된 구조입니다. float을 이용한 레이아웃 'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, overflow: hidden;도 사용 가능합니다. * { margin: 0; } body { background-color: #e8f4f5; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; .. 2022. 7. 29. [LAYOUT]레이아웃 유형01 레이아웃01 이번 레이아웃은 제일 기본적인 구조입니다. 단순한 구조이기 때문에 간편하게 만들 수 있습니다. float을 이용한 레이아웃 'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, clear:both;를 사용하면 요소를 다시 볼 수 있습니다. * { margin: 0; } body { background-color: #fff3e0; } #wrap { width: 1200px; margin: 0 auto; } #header { wi.. 2022. 7. 29. [javascript]자바스크립트 지역변수/전역변수 지역변수와 전역변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역변수'와 '지역변수'로 나눌 수 있습니다. 전역변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 지역변수는 함수 블록{} 내에서만 사용할 수 있습니다. 01. 전역변수와 지역변수 선언 위치 전역변수 지역변수 var 변수; function 함수() { } function 함수() { var 변수; } [예시1] var kor = 90; function getScore() { kor = 100; //전역변수 값이 바뀜 document.write(kor); // 100 } getScore(); document.write(kor); //100 결과보기 [예시1]에서 함수 블록{}안에 있는 kor 변수는 전역변수입니다. .. 2022. 7. 28. [javascript]자바스크립트 함수 함수 함수는 자바스크립트에서 기본적인 구성 중의 하나입니다. 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야 합니다. 01. 선언적 함수 함수를 정의 후, 호출하는 일반적인 함수입니다. 다음은 선언적 함수의 형식입니다. function func(){ document.write("함수가 실행되었습니다.1"); } func(); 결과보기 02. 익명 함수 익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다. 익명 함수는 변수 선언 이후에 호출해야 합니다. 다음은 익명 함수의 형식입니다. const func = function(){ document.write("함수가 실.. 2022. 7. 26. [javascript]자바스크립트 데이터타입 데이터타입 변수에 저장되어 있는 데이터의 유형으로 Primitive(원시)와 Object(객체)로 나눌 수 있습니다. Primitive(원시)타입으로는 number, string, boolean, undefined, null, symbol 등이 있으며, Object(객체) 타입으로는 function, objet, array 등이 있습니다. number(숫자)데이터 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; var num2 = 10.5; var num3 = le+2; console.log(num1); //10 console.log(num2); //10.5 cibsike.log(num3); //100, le+2는 1*10의 2승을 의미합니다. string(문자) 데이터 '' 또는.. 2022. 7. 25. [javascript]자바스크립트 조건문 if문 if문은 지정한 조건이 true(참)인 경우 명령문을 실행합니다. 조건이 false(거짓)인 경우 다른 명령문이 실행 될 수 있습니다. 예시1 if (조건식) { 실행문; } 예시2 if (조건식) { 실행문1; } else { 실행문2; } 예시3 if (조건식1) { 실행문1; } else if (조건식2) { 실행문2; } else { 실행문3; } if문은 if문 안에 또 다른 if문을 중첩하여 사용할 수 있습니다. if (조건식1) { if (조건식2) { 실행문2; } } //중첩 if문 var html = Number(prompt('html 점수입력', '')); var css = Number(prompt('css 점수입력', '')); var javascript = Number(pr.. 2022. 7. 25. [CSS]레이아웃 만들기 레이아웃(LAYOUT) 레이아웃이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것을 말합니다. 레이아웃 방법 01. float 방법 'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, clear:both;를 사용하면 요소를 다시 볼 수 있습니다. float: left; 버그로 나타나지 않는 요소에는 clear: both; 사용예시 See the Pen float 레이아웃 by Kim-chanmi (@kim-chanmi).. 2022. 7. 25. [javascript]자바스크립트 반복문 이해하기 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. while문 while문이란 조건문이 참일 때 실행되는 반복문입니다. 조건은 문장 안이 실행되기 전에 참, 거짓을 판단합니다. 초기값 while (조건식) { 실행문; 증가감식; } do while문 while문과 do while문은 비슷하지만 다릅니다. do while문은 조건문을 판단하기 전에 do 블록의 코드를 먼저 실행합니다. 그리고 조건문을 판단하여 조건문의 결과가 true이면 do 블록의 코드를 다시 실행합니다. 초기값 do { 실행문; 증가감식; } while (조건식) for문 .. 2022. 7. 21. [javascript]자바스크립트 연산자 자바스크립트 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 종류 속성 + 더하기 연산을 할 때 사용 문자와 문자, 문자와 변수 등을 연결할 때 사용 - 빼기 연산을 할 때 사용 * 곱하기 연산을 할 때 사용 / 몫을 구할 때 사용 % 나머지를 구할 때 사용 ++ 1씩 증가시킬 때 사용 -- 1씩 감소시킬 때 사용 대입 연산자 대입 연산자는 변수에 값을 대입할 때 사용하는 이항연산자이며, 대입하는 방향은 오른쪽에서 왼쪽입니다. 대입 연산자 종류 설명 = num = 1은 오른쪽의 1값을 왼쪽의.. 2022. 7. 20. [javascript]자바스크립트 기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부하세요! 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 표준화 .. 2022. 7. 20. 이전 1 ··· 3 4 5 6 다음 728x90
