![]()
비트맵(bitmap)이란? 비트맵 방식은 '비트의 지도'(Map of bits)라는 뜻이다. 각 픽셀에 저장된 비트정보가 집합된 것이다. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교한 이미지 표현이 가능하다. 픽셀의 수가 많아질수록 뛰어나지만, 용량 또한 커지게 되고 비트맵 이미지는 크기를 확대하거나 축소하면 기본에 이루고 있던 픽셀의 수가 변해서 원본 이미지가 손상된다. 깨짐 현상과 이미지 품질 저하가 발생하게 된다. 다른표현으로 픽스맵(Pixmap)이나 레스터(Raster) 이미지로도 불린다. 대표적인 프로그램으로는 어도비 포토샵이 있다. 벡터란? 벡터 방식은 비트맵과 반대로 표현되는 그래픽의 형태들이 수학적 공식으로 이루어져 있다. 벡터 방식은 고정된 ..
![]()
결과 카드유형02 이번 유형은 카드가 추가되었습니다. 위쪽카드와 아래쪽 카드를 각각 card_top, card_bottom으로 나눠서 처리하였습니다. CSS css입니다. 폰트를 설정하고 초기 상태를 margin: 0;, padding: 0; 으로 설정합니다. img를 100%로 범위를 설정하고 container로 전체 범위를 설정하고 justify-content: space-between;로 비율대로 배열해주는 코드를 사용합니다. flex 속성과 float 속성을 같이 써 주었습니다. 전체 넓이를 정해주었기 때문에 일정한 넓이를 넘어가면 자동으로 다음 줄에 카드가 배치됩니다. 또한 카드들을 배치하고 화살표 박스를 피그마에서 불러오고 svg파일로 다운받아서 소스를 추가하였습니다. a태그는 인라인태그여서 ..
![]()
결과 카드유형02 이전보다 카드가 늘어나서 변수가 많아졌습니다. 또한 화살표박스도 생겼습니다. 추가된 소스들을 배치해 주도록 하겠습니다. CSS css입니다. 폰트를 설정하고 초기 상태를 margin: 0;, padding: 0; 으로 설정합니다. img를 100%로 범위를 설정하고 container로 전체 범위를 설정하고 justify-content: space-between;로 비율대로 배열해주는 코드를 사용합니다. .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%;..
![]()
웹 표준 정의 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있으며 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다. 웹 표준 준수 이유 국내 웹의 현실은 특정 브라우저와 사용자 등의 이용환경과 비표준 페이지 및 과도한 플러그..
![]()
퀴즈 프로그램 객관식문제 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 자바스크립트 객관식문제 ▶우선 선택자를 정합니다.(각각 선택자가 무엇을 출력할지 정해주고 알맞는 이름을 써줘서 변수에 넣어준다.). ▶문제의 정보를 가져와서 각각의 정보들을 quizInfo 변수에 대입해서 넣어줍니다. ▶문제 출력을 담당하는 메서드와 보기를 출력하는 반복문을 updateQuiz라는 함수를 만들어서로 묶어주고 실행문을 적습니다. (한눈에 보기 쉽기 때문에 묶어줍니다.) ▶이전에는 사용자의 정답과 문제의 정답만 비교해서 확인하면 되었는데 객관식에서는 사용자가 선택한 답을 문제에 답과 비교해 주어야합니다. 위에서 quiz__selects 클래스를 만들..
![]()
요소 선택 메서드 설명 getElementByld() document.getElementByld('content)일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName( 'menu' ) 일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsbyTagName() document.getElementsByName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. querySelector() 요소의 선택 방법이 css 선택 방법과 같습니다. 선택한 요소 중 첫 번째 요소만 선택합니다. document.querySelec..
![]()
퀴즈 프로그램 다중문제 표현 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 자바스크립트 다중문제 ▶우선 선택자를 정합니다.(각각 선택자가 무엇을 출력할지 정해주고 알맞는 이름을 써줘서 변수에 넣어준다.). ▶문제의 정보를 가져와서 각각의 정보들을 quizInfo 변수에 대입해서 넣어줍니다. ▶css로 틀을 만들고 각각 틀에 알맞은 정보를 넣기위해 textContent, innerText 함수를 사용해 quizInfo변수 안에 정보를 출력합니다.(이때 for문과 forEach문을 사용해서 효과적으로 출력하였습니다.) ▶사용자가 정답을 입력하기 전에 정답은 나타나있으면 안되기 때문에 quizResult[i].style.display =..
![]()
퀴즈 프로그램 웹디자인기능사 자격증을 준비하면서 퀴즈가 나오는 프로그램를 구현하였습니다. 자바스크립트-주관식 2번 문제입니다. 주관식으로 구성하였습니다. 빈칸에 알맞은 답을 입력하면 강아지얼굴이 웃으면서 정답입니다! 표시가 뜨도록 구성하였고 답이 틀리면 오답입니다! 표시가 뜨고 강아지 얼굴이 슬퍼지도록 하였습니다. JS //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 ..
![]()
퀴즈 프로그램 웹디자인기능사 자격증을 준비하면서 퀴즈가 나오는 프로그램를 구현하였습니다. 자바스크립트-객관식 "정답 확인하기" 버튼을 누르면 답이 나오도록 구성하였습니다. js //선택자 const quizType = document.querySelector( ".quiz__type" ); //퀴즈종류 const quizNumber = document.querySelector( ".quiz__question .number"); //퀴즈번호 const quizAsk = document.querySelector( ".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector( ".quiz__answer .confirm") //정답확인버..
![]()
레이아웃5 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 /* 1. 꺠지는 영역에 clear:both를 설정한다. 2. 부모 박스 영역에 overflow: hidden을 설정한다. 3. clearfix를 설정한다. (.clearfix::before) */ 1번 방법은 깨진 영역이 눈에 보여야 적용할 수 있습니다. 2번 방법은 육안상 잘 정리 되어있는 것처럼 보이지만 외부의 애니메이션 같은 효과가 제대로 표시되지 않을 수 있습니다. 3번 방법이 가장 좋은방법으로 clearfix클래스를 적용해서 가상요소 앞뒤로 설정 해주고 float를 적용한 요소의 부모박스에 claerfix 클래스를 적..
![]()
레이아웃4 레이아웃은 웹사이트의 기초공사입니다. 정확히 알맞게 배치해야 완성도가 높은 웹사이트를 만들 수 있습니다. 레이아웃을 만들자 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. *{ 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: #00897B; } /* ..
![]()
레이아웃3 이번 레이아웃은 가장 기본적인 형태입니다. 우선 칸을 분리시켜 header, nav, (aside, article1, article2, article3), footer로 나눠서 작업하겠습니다. float을 이용한 레이아웃 이번 레이아웃은 기본적인 형태로 칸을 분리시키고 aside와 article1, article2, article3를 각각 같은 영역에서 배치해주기 위해 float속성을 사용해서 배치하겠습니다. 그리고 오류로 인해서 footer이 나타나지 않아서 clear:both를 사용해서 수정해주겠습니다. * { margin: 0; padding: 0; } body { background-color: #FFFFFF; } #wrap { width: 1200px; margin: 0 auto;; ..
![]()
레이아웃2 이번 레이아웃은 한단계 더 높은 수준의 영역으로 한줄에 세가지의 영역을 나열합니다. 이번 영역은 header, nav, (aside, section, footer), article로 영역을 나누었습니다. float을 이용한 레이아웃 aside와 section,footer영역을 한줄로 배치하기 위해서 float속성을 사용해서 작업했습니다. 하지만 오류로 인해서 article부분이 없어지기 때문에 clear:both를 사용해서 버그를 수정했습니다.. * { margin: 0; } body{ background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto;; } #header { width: 1200px; height: 100px; backgr..
![]()
레이아웃1 이번 레이아웃은 가장 기본적인 형태입니다. 우선 칸을 분리시켜 header, nav, aside, section footer로 나눠서 작업하겠습니다. float을 이용한 레이아웃 aside와 section영역을 한줄로 배치하기 위해서 float속성을 사용해서 작업했습니다. 하지만 오류로 인해서 footer부분이 없어지기 때문에 clear:both를 사용해서 버그를 수정했습니다. *{ margin: 0; } #body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #FFE0B2; } #nav { width: 100%..
![]()
전역 변수와 지역 변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나누어집니다. '전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 '지역 변수'는 함수 블록{} 내에서만 사용할 수 있습니다. 전역 변수와 지역 변수 선언 위치 전역 변수 지역 변수 var 변수; function 함수 () { } function 함수() { var 변수; } 예시3-14 전역변수 var kor = 90; //함수 블록안에 있는 kor변수를 호출한다. kor의 값은 90>100으로 변경된다 function getScore() { kor = 100; //전역변수 console.log(kor); //100 } getScore(); console.log(kor); ..
![]()
데이터 타입 데이터 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다. 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다. 자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다. 데이터 종류 원시타입 문자열 불린값 Null Nndefined String Symbol 객체 타입 객체(Object) 데이터 타입 속성 설명 문자열(String) 문자열(String) : 문자열의 길이에는 상관 없이 string이라는 데이터 타입으로 값이 생성됩니다. 불린값(Boolean) Boolean 타입은 논리 요소를 나타내며 true와 false 두 가지의 값을 가질 수 있습니다.. Null Null 타입은 nul..
![]()
함수의 종류 1.선언적 함수 2.익명 함수 3.매개변수 함수 4.리턴값 함수 5.화살표 함수 선언적 함수 함수를 만드는 가장 일반적인 형식 function func(){ document.write("함수가 실행되었습니다.1 "); } func(); 결과보기 "함수가 실행되었습니다.1" 익명 함수 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다. 익명 함수는 변수 선언 이후에 호출해야 합니다. const func = function(){ //변수안에 함수가 들어가서 익명함수라 명명했다. document.write("함수가 실행되었습니다.2"); } func(); 결과보기 "함수가 실행되었습니다.2" 매개변수 함수 함수를 호출할 때 전달하는 변수를 '매개변수'라고 합니다..
![]()
조건문 중첩if문 이해하기 if문은 if문안에 또다른 if문을 중첩하여 사용할 수 있습니다. 코딩에 앞서 prompt()는 숫자로 입력한 데이터를 문자 데이터로 처리하기 때문에 '+'연산자를 사용할 경우 더하기 연산이 아니라 연결 연산이 된다. 이 문제를 해결하기 위해 숫자 변환 명령어 Number()을 사용하겠습니다. switch문 이해하기 switch(값)의 값과 case의 값들을 하나씩 비교하여 일치하는 case를 실행시켜줍니다. switch문은 if문과 다르게 특정조건에 만족 했을 때 break명령어를 사용해 블록{}을 빠져 나가도록 합니다. default는 switch의 값과 일치하는 값이 없을 때 실행합니다.
![]()
Layout 배치하기 3요소 1.float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. inherit: 부모 요소에서 상속 left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다. none - 요소를 부유시키지 않음 left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 ..
![]()
반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. for문 for ( 초기값; 조건식; 증감값 ){ 실행문 } while문 for ( 초기값; 조건식; 증감값 ){ 실행문 } do while문 for ( 초기값; 조건식; 증감값 ){ 실행문 } 0부터 99까지 출력하기 //0부터 99까지 출력하기 for ( let i=0; i
![]()
자바스크립트 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자등이 있습니다. 산술 연산자 산술 연산자는 두 개 의 숫자 값을 피연산자로 받아서 한의 숫자 값을 반환합니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구할 때 사용 합니다 % 1나머지를 구할 때 사용합니다 ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자 종류 설명 = num = 1은 우변의 1값을 좌변의 num 변수에 대입(저장)합니다. += ..
![]()
기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 떄문에 이 부분을 숙지하고 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 언어 또는 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 표준화 작업을 통해 현재..
