Jin

우선 섹션이란 '부분, 구분, 구획, 마디'라는 뜻으로 신문을 1면부터 마지막면까지 하나의 묶음으로 만들지 않고 '경제면', '특집면', '건강면', '교육면', '문화면', '스포츠면', 등과 같이 따로 떼내어 읽기 쉽게 8~12면 정도로 나누는 것을 '섹션화(section化)'라고 합니다. 일반 문서 또는 애플리케이션 섹션. A에는 ``일반적으로 제목 (제목)과 바닥 글도 있습니다. 긴 기사의 하위 섹션, 페이지의 주요 부분 (예 : 홈페이지의 뉴스 섹션) 또는 웹앱의 탭 인터페이스에있는 페이지와 같은 관련 콘텐츠의 덩어리입니다. 이미지출처 section HTML 문서에서 같은 맥락의 요소들을 그룹화 해주는 태그이며 섹션 주제에 주로 제목 요소 ~ 를 포함하는 것이 좋습니다. 내용이 서로 관련 되어있..

자바스크립트에서 텍스트 요소는 HTML 문서에서 사용자에게 보여지는 텍스트를 나타내는 요소입니다. 이러한 요소들은 주로 DOM(Document Object Model)에서 조작되며, 자바스크립트를 사용하여 HTML 문서의 내용을 동적으로 변경할 수 있습니다. ~ : 제목 요소로, 각각 크기와 중요도가 다릅니다. : 단락 요소로, 텍스트의 덩어리를 표시합니다. : 인라인 요소로, 텍스트를 그룹화하거나 스타일링을 적용하는 데 사용됩니다. : 강조 요소로, 굵게 표시합니다. : 강조 요소로, 이탤릭체로 표시합니다. : 밑줄 요소로, 텍스트에 밑줄을 긋습니다. : 취소선 요소로, 텍스트에 취소선을 긋습니다. : 앵커 요소로, 링크를 생성하는 데 사용됩니다. : 축약어 요소로, 축약어나 두문자어를 정의할 때 사용..

이미지 출처 우선, 마크업 언어(markup language)란 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지입니다. 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었고, 이러한 태그 방법의 체계를 마크업 언어라 합니다. 내용을 어떠한 표시나 표현을 하라는 의미로 해석 하시면 됩니다. ★시멘틱 마크업 시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있습니다. 이는 마크업을 할 때 의미를 부여하는 태그로 보면 됩니다. 또한 시멘틱 요소는 개발자와 브라우저에 명확하게 그 존재 의미를 전달하는 요소입니다. 실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 ..

☆인라인 요소(Inline Element) 인라인 요소는 마크업을 할 때 가로로 정렬이 됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다. 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다. 인라인요소로는 ,, ,,,,, 등이 있습니다. 새로운 줄을 만들지 않습니다. 필요한 너비만 차지합니다. 다른 인라인 요소를 포함할 수 있습니다. ( 인라인 요소가 블록 레벨 요소를 포함하는 건 웹 표준에 어긋납니다 ) height가 적용되지 않습니다. width가 적용되지 않습니다. 결과 값: ☆ 블록 레벨 요소(Block-level Elements) 블록 레벨 요소는 마크업을 할 때 ..

grid layout이란 SS Grid Layout을 사용하여 웹 디자인에서 사용되는 그리드 시스템입니다. CSS Grid Layout은 웹 페이지의 레이아웃을 더욱 쉽게 조정하고 배치할 수 있도록 해주는 강력한 레이아웃 시스템입니다. Grid 레이아웃은 Flexbox와 함께 사용될 수 있습니다. Flexbox는 아이템들을 수평 또는 수직으로 배치하기 위한 것이고, Grid 레이아웃은 아이템들을 그리드 형태로 배치하기 위한 것입니다. 이러한 두 가지 레이아웃 시스템을 함께 사용하면 웹 페이지 레이아웃을 더욱 정교하고 다양하게 조정할 수 있습니다. grid의 속성 grid-template-columns / grid-template-rows: 그리드의 열과 행의 크기를 정의합니다. 이 속성은 공백으로 구분된..

flex layout 이란 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. Flex는 레이아웃 배치 전용 기능으로 고안되었습니다. 그래서 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많아요. Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다. helloflex abc helloflex 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. “컨테이너가 Flex의 영향을 받는 전체 공..

font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. 표현방법 font-family: '돋움', Arial, Helvetica, sans-serif; font-size, 단위의 고찰 문자의 글자 크기를 지정한는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다. px : 해상동 따라 상대적으로 달라지는 기본 단위입니다. % : 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 입니다. em : 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단..

HTML문서에 CSS로 스타일을 주기 위해서는 선택자를 통해서 해당 요소를 선택한 뒤 해당 스타일을 줘야 합니다. CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 1. type선택자 지정된 태그명을 가지는 요소를 선택합니다. type선택자를 사용하면 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있습니다. 웹페이지 상의 모든 요소의 글꼴 색을 파란색으로 스타일하기 위한 CSS 코드는 다음과 같습니다. p { color: blue; } 2. id 선택자 html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할..

레이아웃 과 float이란 레이아웃(layout)은 웹페이지를 구성하는 요소들의 배치와 위치를 결정하는 것입니다. float는 레이아웃에서 사용되는 속성 중 하나입니다. float 속성을 사용하면 요소가 페이지의 왼쪽 또는 오른쪽에 위치하며, 주변 요소들이 그 주위를 감쌀 수 있습니다. float 속성은 CSS에서 사용되며, 값으로는 left, right가 있습니다. 이 속성을 사용하면 해당 요소는 주변 요소들과 겹칠 수 있으며, 그만큼 콘텐츠가 오버플로우(overflow)될 수 있습니다. float 속성은 예전에는 레이아웃을 구성하기 위해 많이 사용되었으나, 현재는 Flexbox, Grid 등의 새로운 레이아웃 방법이 등장하면서 float는 더 이상 권장되지 않는 방법 중 하나입니다. float 속성 ..

선택자란 우리가 html 파일을 만들었다면 각각의 태그에 다르게 css 를 설정 할 것입니다. 이 때, 어느 요소에 스타일을 적용할지 알려주는 방식이 바로 css 선택자 입니다. 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. id 선택자 html 문서에서는 같은 요소라도 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. html 요소에서는 id로 하나의 이름만 지정할 수 있습니다. 다른 요소라도 같은 id는 부여할 수 없습니다. css에서는 #을 붙여 이름을 지정합니다. id는 주로 영문자로 시작합니다. HTML 규정상 같은 id 값을 중복적으로 사용은 불가능합니다. 안녕 class선택자 html 문서의 여러 요소 중 같은 이름을 ..

우선 CSS언어란!! html을 통해 작성된 콘텐츠 내용에 색상, 폰트, 크기, 정렬방식, 테두리 등과 같은 스타일을 부여할 수 있는 코드들을 말합니다. 마크업언어(ex:HTML )가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있습니다. 즉, HTML구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있습니다. 1. 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다. 모든 스타일 정보는 태그 안에서 정의해야 하고 태그 사이에 작성합니다. 2. 외부 스타일 시트 외부 스타일 시트는 말 그대로 외부 스타일 시트를 외부 파일로 저장하여 그 파일을 html 페이지로 불러오는 방법으로 많은 ..

문자열 메서드 자바스크립트 문자열 메서드를 이용하면 다양한 문자열 조작 작업을 간단하게 수행할 수 있습니다. 예를 들어, 문자열을 검색하거나, 일부 문자열을 추출하거나, 문자열을 대/소문자로 변경하거나, 문자열을 분리하거나, 문자열을 변환하거나 등의 작업을 수행할 수 있습니다. 또한, 문자열 메서드를 사용하여 문자열의 형식을 지정하거나, 문자열을 다른 데이터 유형으로 변환하는 것도 가능합니다. 이는 다양한 작업에서 매우 유용합니다. 또한, 자바스크립트는 문자열 메서드뿐만 아니라 정규 표현식(regular expression)도 지원합니다. 이를 사용하여 더욱 복잡한 문자열 작업을 수행할 수 있습니다. at() 메서드 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니..

문제 풀이 사이트를 cbt 형식으로 만들어 보았습니다. 제출하기 버튼을 클릭하면 채점하고 문제를 풀기 시작하면 시간이 카운팅 되는 기능은 다음시간에 넣을 예정입니다. Quiz 객관식 CBT 유형 1 2 3 4 5 5-1 6 7 7-1 2015년 4월 4일 웹디자인 기능사 기출문제 1. 객체지향 프로그램에서 데이터를 추상화하는 단위는 ? 클래스 메서드 상속 메시지 객체지향 언어는 ___입니다. 객체지향언어 2. 다음 빈칸을 채우시오. 객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다. 클래스 메서드 상속 메시지 객체지향 언어는 ___입니다. 객체지향언어 수험자 : 장진용 59분 10초 제출하기 문..

01. 다음 결과값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } // 정답 : 0 풀이 : num은 전역변수이고 while문의 조건이 false 이므로 while문 안의 값은 출력되지 않습니다. 따라서 변수 num=0이 그대로 출력됩니다. 02. 다음 결과값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } // 정답 : 20, 21 03. 결과값을 작성하시오 { function func()..

마무리 문제 1. 이미지에서 마우스 포인터를 다른 곳으로 이동하면 그림이 바뀌는 소스를 작성해 보세요. 마우스 오버하면 이미지 바꾸기 이름이 container인 div박스 안에 화면에 표시될 이미지를 넣었습니다. 스타일 태그 안에는 각각의 스타일을 지정하였습니다. 스크립트 코드 선택자를 지정하고 마우스 오버했을 때 선택자에 이벤트 메서드인 addEventListener("mouseover") 를 했을 때 변경 될 이미지가 나오게 설정합니다. 마우스 아웃했을 때 선택자에 이벤트 메서드인 addEventListener("mouseout") 를 적용하여 마우스가 그림에서 떨어졌을 때 그림이 원래대로 변하는 효과를 넣었습니다. 마무리 문제 2. 이벤트를 활용하여 필요에 따라 메뉴가 나타나고 감추어 지도록 만들어..

자바스크립트에서 number와 boolean,string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 '래퍼 객체'라고 부릅니다. 문자열에서 길이를 찾을 때는 배열에서처럼 length 프로퍼티를 사용합니다. let str = ""Good morning!" let a = "안녕하세요?" str.length// 14 a.length // 6 공백도 문자열에 포함 됩니다. chatAt(), indexOf() 메서드를 활용하여 문자열에서 문자의 위치를 찾을 수 있습니다. 문자열에서 특정 위치의 문자를 가져오려면 charAt() 함수를 사용합니다. 위치는 인덱스로 표시되는데, 인덱스는 0부터 시작합니다. let..

오늘은 수업을 배우면서 어려웠던 내용을 다시 한번 복습하겠습니다. 자바스크립트 요소(Element) 객체는 HTML 요소를 나타내는 객체입니다. 이 객체를 사용하여 HTML 요소의 속성, 스타일, 클래스 등을 변경하거나 이벤트를 처리할 수 있습니다. 요소 객체는 다음과 같은 속성과 메서드를 가지고 있습니다. 속성 id: 요소의 고유 식별자를 나타냅니다. className: 요소의 클래스 이름을 나타냅니다. innerHTML: 요소의 내부 HTML 코드를 나타냅니다. outerHTML: 요소의 외부 HTML 코드를 나타냅니다. textContent: 요소의 내부 텍스트를 나타냅니다. value: 입력 요소의 값(value)을 나타냅니다. style: 요소의 스타일을 나타내는 객체입니다. attributes..

01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 풀이 : lastIndexof는 텍스트의 제일 마지막 부분을 가져 옵니다. 결과 확인하기 1, 3, true 02. 다음의 결괏값을 보고 빈칸을 채우시오. { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document.write("함수1가 실행되었습니다..

마우스 이펙트 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 A man is known by the company he keeps. 사람은 그가 사귀는 친구로 알 수 있다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screeny : 0px body의 클래스 img01 bg01 font01는 각 배경, 배경색, 폰트 종류를 의미 합니다. header태그에는 각각의 list를 만들어 숫자를 넣어주었습니다. 링크가 연결되어 있어 클릭하면 다른페이지로 이동합니다. mouse__text에 2개의 p단락을 넣고 text를 작성 후 글..

1. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 결과 확인하기 함수가 실행되었습니다. 2. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 결과 확인하기 함수가 실행되었습니다. 3. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } 결과 확인하기 73

변수 : 지역변수 + 전역변수(스코프) 함수 내부에서 선언된 변수는 지역 변수(local variable)라고 하며, 해당 함수 내에서만 접근할 수 있습니다. 반면에 함수 외부에서 선언된 변수는 전역 변수(global variable)라고 하며, 프로그램의 어느 곳에서든지 접근할 수 있습니다. { let x = 100; //전역 변수 let y = 200; //전역 변수 function func(){ let x = 300; //지역 변수 x앞에 let이 없으면 전역변수로 변경 let y = 400; //지역 변수 z = "javascript"; //전역 변수로 취급 string모드 선언하면 에러 console.log("함수 안"+x); //함수 안의 x값은 지역변수이기 때문에 사용가능 console.lo..

오늘은 시험문제 오답노트를 작성하겠습니다. 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } 풀이 : 변수 num의 초기값은 0입니다. while문 안의 num++에서 num값이 1로 변하고 if문의 num이 3인 경우 continue 즉 3 을 제외하고 계속 된다는 뜻입니다. 다음 if문에서는 num이 6을 초과하는 경우 break가 실행되므로 while문은 6에서 끝이납니다. 따라서 1,2,4,5,6이 출력 됩니다. 정답 : 1,2,4,5,6 07. 결괏값을 작..

JavaScript에서 데이터를 불러오는 방법은 여러 가지가 있습니다. 여기에는 일반적으로 사용되는 몇 가지 방법을 설명하겠습니다. 01. 변수 : 데이터 불러오기 변수안에 저장된 데이터를 불러오는 방법입니다. let x =100, y = 200, z = "javascript"; console.log(x, y, z); // 결과 : 100 200 javascript 02. 상수 : 데이터 불러오기 상수안에 저장된 데이터를 불러오는 방법입니다. 상수 const로 지정한 변수안에 저장된 데이터를 console log 안에 차례로 넣어 값을 냅니다. const x = 100, y = 200, z ="javascript"; console.log(x, y, z); // 결과 : 100 200 javascript ..

오늘도 공부하면서 어려웠던 부분을 복습 하겠습니다. switch문 switch문은 특정 값에 따라 다른 코드 블록을 실행하는 조건문입니다. switch문은 다음과 같은 구조를 가집니다. switch(expression) { case value1: // value1과 일치하는 경우 실행할 코드 break; case value2: // value2와 일치하는 경우 실행할 코드 break; default: // 모든 case와 일치하지 않는 경우 실행할 코드 break; } expression은 switch문에서 평가할 표현식입니다. case 키워드 다음에 나오는 value1, value2 등은 expression과 비교할 값입니다. case 키워드 뒤에 오는 값과 expression이 일치하는 경우 해당 c..

오늘은 공부하면서 헷갈린 부분을 정리 하겠습니다. for문과 if문을 이용하여 25칸 테이블을 만들고 홀수는 파란색 짝수는 빨간색으로 나타내 보세요 let table = ""; for(let i=1; i { return str; } document.write(func("실행되었습니다.")); const func = (str) => { ... }는 func라는 이름의 상수를 선언하고, 화살표 함수를 할당하는 구문입니다. 이 화살표 함수는 매개변수 str을 받아들이고, return을 통하여 str을 반환하는 함수입니다. document.write(func("실행되었습니다."))는 func 함수를 호출하고, 매개변수로 "실행되었습니다." 문자열을 전달합니다. func 함수는 전달받은 문자열을 반환하므로, 이 ..

오늘은 수업시간에 테스트를 보고 틀린 문제를 정리하겠습니다~ 01. 다음의 출력값을 보고 빈칸을 채우시오! var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 풀이 : 결과값이 100, 200, 300 이므로 첫번째 console.log안에는 변수 x, 두번째는 y, 세번째는 x + y입니다. 정답 : x, y, x+y 04. 다음의 출력값을 보고 빈칸을 채우시오! const arr = ________(); arr[0] = 100; arr[1] = 200; arr[2] = "javascript"; console.log(arr[0]); console...

오늘은 자바스크립트의 역사에 대해 알아 보곘습니다!! 탄생 배경 거의 최초의 상용 웹 브라우저인 Netscape Navigator가 처음에 생겼을 때는 HTML과 CSS로 그냥 정적인 웹사이트 밖에 만들 수 없었습니다. 자바스크립트(JavaScript)는 1995년 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)가 개발한 프로그래밍 언어입니다. 당시 넷스케이프는 웹 브라우저의 시장을 지배하고 있었는데, 브라우저에 동적인 기능을 추가하기 위해 자바스크립트를 개발하게 되었습니다. 초기에는 "라이브스크립트(LiveScript)"라는 이름으로 출시되었지만, 당시 자바가 인기 있었던 관계로 "자바스크립트(JavaScript)"라는 이름으로 바뀌었습니다. 1996년에는 마이크로소프트(Micro..

문제 1) 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여주는 프로그램을 작성해 보세요. function isPositive(n) { if (n > 0) { alert(`${n}은 양수입니다.`); } else if (n < 0) { alert(`${n}은 음수입니다.`); } else { alert(`${n}은 0입니다.`); } } const number = parseInt(prompt('숫자를 입력하세요.')); // parseInt() 는 숫자가 아닐 경우 NaN을 반환함 if(!isNaN(number)) { // 숫자일 경우에만 실행 isPositive(number); } 함수 isPositive..

데이터 제어하기 자바스크립트는 데이터를 제어하고 조작하는 데 사용할 수 있는 다양한 내장 함수와 객체를 제공합니다. 이를 통해 데이터를 필터링, 검색, 정렬, 변환 등 다양한 방법으로 제어할 수 있습니다. 01.if문 조건문은 프로그래밍에서 가장 기본적인 제어문 중 하나입니다. 조건문을 사용하면 조건에 따라 프로그램이 다른 동작을 하도록 할 수 있습니다. // false : 0, null, undefined, false, "" //숫자 0과 null, undefined, false, ""만 false가 나옵니다. ""은 빈문자열입니다 // true : 1, 2, 3, "0", "1", "ABC", [], {}, true //배열, 객체도 true가 나옵니다 if(""){ document.write("실행..

자바스크립트에서 함수란 자바스크립트 함수는 재사용 가능한 코드 블록으로, 입력 매개변수를 받아들이고 출력 값을 반환할 수 있습니다. 함수를 사용하면 코드를 모듈화하고, 코드의 중복을 줄이며, 유지보수성을 향상시킬 수 있습니다. 함수는 하나 이상의 문(statement)을 그룹화하여 이름을 붙이고, 필요할 때 호출하여 실행할 수 있습니다. 함수는 일급 객체로 취급되며, 변수나 객체의 속성으로 할당될 수 있고, 매개 변수로 전달될 수 있습니다. 또한 함수 내에서 다른 함수를 정의하여 중첩된 함수를 만들 수도 있습니다. 함수는 자바스크립트에서 매우 중요한 개념 중 하나입니다. 많은 기능을 수행하기 위해 함수를 사용하며, 함수를 이용하여 코드를 재사용하고 모듈화할 수 있습니다. 화살표 함수(arrow funct..

자바스크립트에서 데이터를 저장하는 방법은 여러 가지가 있습니다. 변수(variables): 자바스크립트에서 변수는 데이터를 저장하기 위해 가장 일반적으로 사용되는 방법입니다. 변수를 선언하고 값을 할당할 수 있습니다. 변수는 숫자, 문자열, 불린 값, 배열, 객체 등 다양한 데이터 타입을 저장할 수 있습니다. 01. 변수 : 데이터 저장 변수는 데이터를 저장하는 저장소입니다. var x = 100; //변수 X에 숫자 100을 저장함 var y = 200; //변수 y에 숫자 200을 저장함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); // 결과 : 100, 200, jav..

자바스크립트 배운 내용 책에서 예시 풀어보기 예제 1. 주어진 배열에서 10보다 큰 값을 찾아 화면에 표시하기 길라잡이 배열 요소의 개수만큼 for문을 반복합니다. if 문을 사용해서 요소의 값과 10을 비교합니다. document.write 문을 사용해서 화면에 표시합니다. const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; // const 키워드를 사용하여 배열 arr을 상수로 선언하고, 대괄호([]) 안에 각 원소를 쉼표로 구분하여 지정합니다. for(let i=0; i10){ // if 조건문을 사용하여 현재 원소가 10보다 큰 경우에만 실행되는 코드 블록을 만듭니다. 만약 현재 원소가 10보다 작거나 같다면, document.write() 함수가 실행되지 않으..

조건문 자바스크립트에서 조건문은 프로그램의 실행 경로를 제어하는 구문입니다. 조건문은 특정 조건에 따라 다른 코드 블록이 실행되도록 합니다. 조건문이란? 지정된 조건을 Ture, false로 판별하여 각 상황에 맞게 명령을 실행하도록 만드는 것을 뜻합니다. 조건문은 주어진 조건에 따라 실행할 코드를 결정하는 데 사용됩니다. 자바스크립트에서는 if문, switch문, 삼항 연산자,if else, else if 등이 있습니다. if문 조건식은 참(true) 또는 거짓(false) 값을 갖는 표현식(expression)입니다. 조건식이 참일 때 코드 블록({ }) 안에 있는 코드가 실행됩니다. if (조건식) { // 조건식이 true일 때 실행되는 코드 블록 } if else 문 if문은 else문과 함께 ..

See the Pen Untitled by jinyongjang (@jinyongjang) on CodePen. prompt 함수를 사용하여 사용자로부터 숫자를 입력받습니다. prompt 함수는 사용자에게 알림창으로 메시지를 보여주고, 입력받은 값을 반환합니다. 이때 입력값은 문자열(string) 형태로 반환됩니다. if 조건문을 사용하여 입력값이 null이 아닌 경우에만 실행할 코드 블록을 지정합니다. null은 값이 없음을 나타내는 자바스크립트 특수한 값 중 하나입니다. parseInt 함수를 사용하여 입력받은 문자열 값을 정수형으로 변환합니다. 이때 parseInt 함수는 문자열을 정수형으로 변환할 수 없는 경우 NaN 값을 반환합니다. 삼항 연산자를 사용하여 userNumber 변수가 짝수인지 홀..

반복문이란 반복문은 말그대로 같은 동작을 여러 번 실행하기 위해 사용하는 문입니다. 반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다. 특정 구문을 여러번 반복해서 처리하는 방법을 이야기 합니다. 이를 구현하기 위해 자바스크립트에서는 for 나 while 문이 존재합니다. for문 javascript에서 가장 많이 사용하는 반복문은 for문 입니다. for문은 자체적으로 초기식, 표현식, 증감식을 가지고 있습니다. for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리합니다. 기본형 for (초기식; 조건식; 증감식){ 조건식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문 } ex) for (i=0; i

연산자란 1+2, 6 TRUE A || B -> TRUE B || A -> TRUE B || B -> FALSE // 둘 다 FALSE이므로 FALSE ! (not연산자) : Boolean값 역전 !A && !A -> FALSE !A && !B -> FALSE !B && !A -> FALSE !B && !B -> TRUE // ||와 반대 개념으로 둘 다 FALSE 이므로 TRUE

[자바스크립트에서 자료형의 의미] 자료형(data type)은 프로그래밍 언어로 조작할 수 있는 값의 유형을 나타냅니다. 숫자나 문자열처럼 프로그램에서 처리할 자료의 유형을 지정해야 하는데, 이러한 자료의 형태를 '자료형'이라고 합니다. 자바스크립트의 자료형으로는 숫자,문자,논리형(불린),객체,심벌, 널(Null), 미정의(Undefined) 값이 있습니다. 원시 유형은 하나의 값만 지정할 수 있습니다. 원시 유형 외에는 전부 객체입니다. 자료형 문자열: 큰따옴표나 작은 따옴표 모두 앞뒤에 붙는 따옴표는 같아야 합니다. String()은 숫자를 문자열로 변환하는 함수입니다.문자열 자료형은 자바스크립트 내의 텍스트를 표현하며, 문자열은 유니코드 문자의 나열입니다. typeof("안녕하세요") // 'str..

html 구조입니다. Javascript Parallax Effect08 패럴랙스 이펙트 : 가로 효과 1 2 3 4 5 6 7 8 9 10 01 02 03 04 05 06 07 08 09 css 입니다. #header { position: fixed; z-index: 10000; } .parallaxs__wrap { position: fixed; left: 0; top: 0; display: flex; } .parallaxs__item { width: 100vw; height: 100vh; position: relative; } #section1 {background-color: #111;} #section2 {background-color: #222;} #section3 {background-colo..

패럴랙스 이펙트 01 Section1 슬픔은 병이잖아, 고치기 위해서 살기로 했어 분명, 살아가는게 낫게 해 줄거야.-보노보노 02 Section2 무엇이든 사랑하는 방법은 잃어버릴 수 있다는 것을 깨닫는 것입니다. 03 Section3 성공하는 사람이 되지 말고 가치 있는 사람이 되십시오. 04 Section4 언제나 현재에 집중할수 있다면 행복할것이다 05 Section5 인생에서 가장 큰 후회 중 하나는 자신이 아니라 다른 사람들이 원하는 모습이 되는 것이다. 06 Section6 진짜 어려움은 자신에 대해 생각하는 방식을 극복하는 것입니다. 07 Section7 신은 용기있는자를 결코 버리지 않는다. 08 Section8 단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살..

완성된 사이트 입니다. const allMusic = [ { name :"1. 마마마마", artist : "Easda sas", img : "music_view01", audio : "music_audio01" },{ name :"2. 마마마마", artist : "Easda sas", img : "music_view02", audio : "music_audio02" },{ name :"3. 마마마마", artist : "Easda sas", img : "music_view03", audio : "music_audio03" },{ name :"4. 마마마마", artist : "Easda sas", img : "music_view04", audio : "music_audio04" },{ name :"5..

완성된 화면 입니다. html코드 입니다. GAME Effect JIN GAME WORLD 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 스크립트 입니다. $(".icon1").draggable({ containment: ".icon__box", scroll: false, start: function() { $(".cursor img").attr("src", "img/game_mouse01.png"); $("#header").css("background-color","red"); $("#footer .info").html("현재 빨간 뮤직듣기를 클릭했습니다.") }, stop: function() { setTimeout(function() { printAgent(); }, 1000); // 1초 후에 실행 ..

교육 관련 사이트를 조사 하였습니다. 대부분의 교육 사이트들은 깔끔하고 차분한 디자인을 채택하였습니다. 제작하려는 사이트는 문제를 문제를 푸는 사이트로 사용자가 사이트에 들어왔을 떄, 쉽고 빠르게 문제를 풀 수 있도록 최신 기출문제 영역을 사이트의 상단 바로 밑에 배치 하였습니다. 보기 쉬운 UI로 접근성이 용이하게 하였습니다. https://www.momntalk.com/main.mnt 커뮤니티 부분은 맘톡이라는 사이트의 커뮤니티 영역을 짜집기 하였습니다. https://www.intraxkorea.kr/intrax_intrax/ 공지사항 부분은 인트락스라는 사이트의 공지사항 부분을 짜집기 하였습니다. https://creverse.com/ 푸터 부분은 크렌버스라는 사이트의 푸터부분을 참고 하였습니다...

https://jinyongjang.github.io/web2023-PHP/html/board.html

패럴렉스 효과는 웹사이트의 시각적인 효과를 증대시켜주는 역할을 합니다. 또한 사용자에게 더욱 동적이고 생동감 있는 웹사이트 경험을 제공해줄 수 있습니다. 하지만, 과도하게 사용하면 사용자에게 불편함을 줄 수 있으므로 적절히 활용하는 것이 중요합니다. 패럴랙스 효과를 사용하여 사이트를 제작 하였습니다. 완성된 화면 Skrollr Skrollr은 자바스크립트 라이브러리 중 하나로, 스크롤 이벤트에 반응하여 웹 페이지 요소의 애니메이션을 제어할 수 있게 해줍니다. 이 라이브러리를 사용하면 스크롤 위치에 따라 웹 페이지의 요소를 동적으로 조작하여 다양한 효과를 구현할 수 있습니다. Skrollr을 사용하기 위해서는 먼저 skrollr.js 파일을 다운로드하고 웹 페이지에 포함해야 합니다. 그리고 요소에 data..

패럴랙스(Parallax)는 웹 디자인에서 많이 사용되는 효과 중 하나로, 여러 레이어를 겹쳐 놓고 스크롤링에 따라 각각의 레이어가 서로 다른 속도로 움직이는 것으로 화면 전환 효과를 만드는 방식입니다. Javascript Parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 Section2 산다는것 그것은 치열한 전투이다. 03 Section3 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 04 Section4 언제나 현재에 집중할수 있다면 행복할것이다. 05 Section5 진정으로 웃으려면 고통을 참아야하며 ,..

이번 시간은 슬라이드 버튼을 이미지 내부에 보이도록 하고, 닷 버튼 대신 썸네일 이미지를 추가하였습니다. Javascript Slider Effect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next ebmdols@naver.com object-fit object-fit 속성은 이미지나 비디오와 같은 대체 콘텐츠를 표시할 때, 해당 콘텐츠를 포함하는 요소의 크기에 맞게 조정하거나 자르는 방법을 제어하는 데 사용됩니다. 이 속성은 CSS의 background-size 속성과 유사한 역할을 합니다. fill: 대체 콘텐츠를 요소의 크기에 맞게 늘리거나 축소합니다. 가로세로 비율이 유지되지 않으며, 콘텐츠가 찌그러질 수 있습니다. contain: 대체 콘텐츠가 ..

Javascript Slider Effect04 슬라이드 이펙트 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next 다음 슬라이드로 넘어가기 위한 버튼을 만들고 이미지 밑부분에 닷 메뉴 버튼을 추가였습니다. 닷 메뉴와 양 옆 슬라이드로 움직이기 위한 버튼을 선택자로 추가 하였습니다. slider.forEach(() => dotIndex += "이미지");는 slider 배열의 이미지 갯수만큼 .dot 클래스를 가진 a 태그를 생성하고 dotIndex 변수에 추가합니다. sliderDot.firstChild.classList.add("active") 는 .slider__dot 클래스를 가진 요소의 첫 번째 자식인 a 태그 중에서 첫 번째 이미지의 닷 메뉴가 활성화되도록 합니다. ..

저번 시간과 비슷하지만 슬라이드 방향이 위로 향하도록 제작 하였습니다. Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 6 ebmdols@naver.com 이번에는 슬라이드가 윗방향으로 움직여야 하므로 width가 아닌 height 값을 변경해 주어야 합니다. 개별적은 이미지의 height 값을 520px로 변경하였고 움직이는 영역의 총 height 길이를 2600으로 변경해 주었습니다. 슬라이더를 포함하는 클래스가 "slider__wrap"인 컨테이너 요소가 있습니다. 컨테이너 요소 내에 "slider__img" 클래스가 있는 요소가 있습니다. 이는 슬라이더의 보이는 영역을 나타냅니다. 보이는 영역 요소 내에 "slider__inner" 클래스가 있는..

이미지가 자동으로 자연스럽게 왼쪽 방향으로 슬라이드 되는 것처럼 보이는 효과입니다. Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 6 구성은 저번 시간과 비슷하지만 움직이는 영역 부분의 총 width 값을 불러와야 하기 때문에 4800px로 변경해 주었습니다. 마지막 이미지를 복사하여 앞으로 불러와주는 형식입니다. sliderInner 요소에 sliderClone 요소를 추가한 후, sliderEffect 함수를 setInterval 함수를 사용하여 일정 시간 간격으로 실행합니다. sliderEffect 함수는 슬라이드를 이동시키는 역할을 합니다. currentIndex 변수는 현재 보여지고 있는 슬라이드의 인덱스를 저장하며, 이 값이 증가함에 따라 ..

저번 시간과 다르게 슬라이드가 위/아래로 움직이도록 제작하였습니다. html 코드입니다. Javascript Slider Effect01 슬라이드 이펙트 : 위/아래로 움직이기 1 2 3 4 5 6 ebmdols@naver.com 구성은 저번시간과 같습니다. 이미지 슬라이더에 필요한 요소들을 선택합니다. (sliderWrap, sliderImg, sliderInner, slider) 현재 보여지는 이미지의 인덱스와 전체 이미지 갯수, 이미지 변경되는 시간&간격을 변수로 지정합니다. setInterval() 함수를 사용하여 일정 시간마다 이미지가 변경되도록 합니다. jQuery를 사용하여 슬라이더가 일정한 속도로 움직이도록 합니다. animate() 메서드를 사용하여 슬라이더가 부드럽게 움직이도록 합니다...

html 코드입니다. Javascript Slider Effect01 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 6 ebmdols@naver.com 구성은 저번 시간과 같습니다. 이미지만 다른 이미지를 사용하기 위해 바꾸어 주었습니다. .slider__wrap 클래스는 슬라이더 전체를 감싸는 영역을 설정합니다. 이 영역은 화면 전체를 차지하며, 내부의 요소들을 수직 가운데 정렬합니다. .slider__img 클래스는 이미지가 보이는 영역을 설정합니다. 이 영역은 이미지를 보여주는 화면의 크기를 정의하며, overflow 속성을 통해 이미지 영역을 벗어나는 부분은 잘리도록 설정합니다. .slider__inner 클래스는 이미지가 움직이는 영역을 설정합니다. 이 영역은 display: flex 속성..

이번 시간은 저번에 제작한 마우스 이펙트 내용과 비슷하게 제작하였습니다. Javascript Slider Effect01 슬라이드 이펙트 : 트랜지션 효과 1 2 3 4 5 6 ebmdols@naver.com 구조는 이미지 5장이 겹친 상태로 짜두었습니다. .slider__wrap: 슬라이더를 감싸는 div 요소로, 전체 화면을 차지하며 가운데 정렬되어 있습니다. .slider__img: 실제 이미지가 보여지는 영역을 나타내는 div 요소입니다. width와 height 속성으로 이미지의 크기를 지정하고, overflow 속성으로 이미지가 div의 영역을 넘어갈 경우 숨기도록 설정합니다. .slider: 실제 이미지가 배치되는 div 요소입니다. position: absolute 속성으로 .slider_..

어제에 이어서 오늘도 제작중인 사이트에 기능을 추가하였습니다. 타이머 기능에 ??분 ??초가 나오도록 추가 하였고, 이용자가 모달창의 이름 입력란에 이름을 입력하면 omr창의 윗쪽에 이용자의 이름이 나오도록 하는 기능과 답을 제출하면 점수가 나오는 기능을 추가하였습니다. ??분 ??초에서 초의 앞자리가 10미만이 되면 십의 자리에 0을 추가하기 const displayTime = () => { if(questionTimeRemain { const value = cbtViewName.value; cbtName.innerHTML = value; } value는 input 요소의 값을 가져옵니다. 모달창 부분의 이름 입력란의 선택자는 cbtViewName, omr 창 부분의 이용자 이름이 들어갈 영역은 cbt..

어제 제작한 사이트에 이어서 몇가지의 기능을 더 추가 하였습니다. html 코드입니다. Quiz 객관식 CBT 유형 1 2 3 4 5 5-1 6 7 7-1 2020년 1회 정보처리기능사 기출문제 1. 객체지향 프로그램에서 데이터를 추상화하는 단위는 ? 클래스 메서드 상속 메시지 객체지향 언어는 ___입니다. 객체지향언어 2. 다음 빈칸을 채우시오. 객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다. 클래스 메서드 상속 메시지 객체지향 언어는 ___입니다. 객체지향언어 수험자 : 장진용 전체 문항 : 60 문항 남은 문항 : 59 문항 59분 10초 제출하기 기능사 시험 도전하기 정보처리기능사 2..

헤더(메뉴) 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지 / 텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 슬라이드 영역 event 사막여우를 알아가는 사이트 사막여우의 생태, 특징, 생활 습관, 보호 활동 등에 대한 정보를 제공하는 사이트 입니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 여우의 생활 사막여우는 사막에서 생활 합니다. 사막여우 털의 특징 털은 갈색 또는 회색으로 된 부드러운 모피를 가지고 있으며, 눈동자는 크고 밤에 더 잘 보이도록 도와주는 반사체를 가지고 있습니다 자세히보기 사막 여우의 서식처 사막여우는 북아프리카와 아시아의 사막 지역에 서식하는 ..

6번째 퀴즈 이펙트 사이트 제작입니다. 저번 시간에 이어서 다른 방식으로 퀴즈 사이트를 제작하였습니다. 한 문제씩 풀 때마다 다음 문제로 넘어가는 방식입니다. html 코드입니다. Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 5-1 6 정답입니다!🤦‍♂️ 틀렸습니다!🤬 다음 문제 ??점 ?? ebmdols@naver.com quiz__main 영역에 총 몇 문제가 남았는지 표시하기 위해 quiz__main 클래스 밑으로 태그를 넣어 주었습니다. quiz__info와 quiz__check 이름의 div 박스는 각각 총 점수와 총 맞힌 갯수를 풀력하기 위해 넣었습니다. 또한 태그를 넣었습니다. 스크립트 코드입니다. // 선택자 부분 quizCount: 현재 퀴즈 질문을 추적하는 카운터 변수입니..

정보처리 기능사 2006년 문제 풀이 사이트를 만들었습니다. 번호를 선택한 후 정답 확인 버튼을 누르면 정답과 해설이 출력 됩니다. Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 웹디자인 기출 헤더와 푸터는 저번에 제작한 방식과 동일합니다. 문제 정보에 대한 스크립트 코드 입니다. 배열안에 객체가 있고 그 안에 객체가 있는 방식입니다. 선택자 부분은 querySelector 메소드를 사용하여 quiz__wrap 클래스를 가진 요소를 선택한 후, 그 결과를 quizWrap 변수에 저장합니다. 이는 나중에 동적으로 생성될 HTML 코드를 quiz__wrap 요소의 자식 요소로 추가하기 위해 사용됩니다. 또한, let을 사용하여 quizScore 변수를 선언하고, 초깃값을 0으로 할당합니다. 이 ..

"Search Effect"는 인터넷 검색 엔진에서 검색어를 입력할 때 나타나는 결과와 관련된 용어로 사용됩니다. 1 2 3 4 5 6 ❤자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 설정합니다. animation-direction :..

html 코드입니다. 푸터 사막여우 사이트 소개하기 사막여우 이야기 사막여우 도움주기 사막여우와 함께살기 사막에 사는 종류 Fennec fox Pale fox Cape fox Blanford's fox 사막여우 노하우 충분한 운동하기 같이 갈 수 있는 곳 산책하기 좋은 곳 관련 커뮤니티 사막여우 먹이 강아지 사료 당근과 양배추 전용 물병 낮보다는 밤 주의해야할 음식 사막여우 냄새 자체적인 냄새 배설물 냄새 처리 방법 전용 탈취제 같이 오래 살기 사막여우의 수명 야생에서의 수명 사람과 같이살 때의 수명 사막여우 접종하기 2023 진블로그 사막여우 사이트 Portfolio is power All Right Reserved 6개의 영역으로 나누어 주기 위해 6개의 div박스를 footer__menu 클래스 안..

마우스가 이동하는 방향에 따라 2개의 동그란 커서가 따라 다니는 효과입니다. html 코드 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Success usually comes to those who are too busy to be looking for it. 성공은 보통 바빠서 찾아갈 시간이 없는 사람들의 것이다. ebmdols@naver.com mouse__cursor와 mouse__cursor2 div 박스를 만들어 마우스를 따라 다니는 2개의 원을 만들 것입니다. p태그 안의 단어를 span으로 감싸서 단어 영역에 마우스가 들어가면 커서 모양이 변화하게 만들 것입니다. 이번 시간에는 헤더 부분과 푸터 부분에도 마우스 효과를 줄 것입니다. ..

마우스가 이동하는 방향에 따라 뒷배경이 보이는 마우스 효과를 만들었습니다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Behind the cloud is the sun still shining. 구름 뒤엔 여전히 태양이 빛나고 있다. ebmdols@naver.com header의 6개의 li태그는 각 페이지의 번호를 의미 합니다. mouse__cursor는 마우스의 모양을 만들기 위함이고 mouse__text는 화면 중간에 글씨를 적기 위해 만들어 주었습니다. 스타일 코드 입니다. .mouse__wrap의 cursor: none으로 커서를 보이지 않게 작업했습니다. overflow: hidden는 요소의 내용이 자신의 경계를 벗어나면 해당 요소..

웹 사이트를 구성할 때 텍스트 영역은 매우 중요합니다. 텍스트 영역은 사용자가 사이트에서 읽을 수 있는 모든 텍스트를 포함하는 영역을 말합니다. 주요 텍스트 영역은 다음과 같습니다. 헤더(Header): 사이트 상단에 위치한 영역으로 로고, 메뉴, 제목 등의 텍스트를 담습니다. 푸터(Footer): 사이트 하단에 위치한 영역으로 저작권 정보, 연락처 등의 텍스트를 담습니다. 본문(Content): 헤더와 푸터 사이에 위치한 중요한 텍스트 영역으로, 사이트의 핵심 정보를 담습니다. 사이드바(Sidebar): 주요 본문 영역 옆에 위치한 영역으로, 부가적인 정보나 링크 등을 담습니다. 모달창(Modals): 페이지 내에서 팝업 형태로 떠오르는 작은 창으로, 주로 사용자에게 추가 정보나 알림을 제공하기 위해 ..

자바스크립트 퀴즈사이트 만들기 저번시간은 여러개의 주관식 문제를 만들었지만 이번 시간은 radio 버튼을 이용한 객관식 퀴즈 사이트를 만들었습니다. html 코드 입니다. Quiz 객관식 확인하기 유형 1 2 3 4 5 웹디자인 기출 정답입니다! 틀렸습니다! 정답 확인하기 ebmdols@naver.com quiz__choice 클래스를 만들어 주었습니다. input type = "radio"는 여러 개의 선택지 중에서 하나를 선택할 수 있도록 하는 라디오 버튼을 생성합니다. 각 라디오 버튼은 고유한 값을 가지고 있으며, 사용자는 이 중 하나를 선택할 수 있습니다. 라디오 버튼은 하나의 그룹으로 묶여 있으며, 그룹 내에서는 한 번에 하나의 버튼만 선택할 수 있습니다. id="choice1" : 라디오 버튼..

저번과 같이 기준선을 잡고 각각의 영역에 맞는 text와 image를 넣어줍니다. 배경 이미지는 피그마의 plugin에서 'unsplash' 룰 통해 적용하였습니다. 배경 이미지를 어둡게 하기 위해 전체 범위를 rectangle로 덮어주고 배경색을 검정색으로 채워준 뒤, layer의 pass through를 50%로 낮추어 줍니다. 다음은 이 이미지를 코드로 만들어 보겠습니다. html코드 입니다. 메인 슬라이드 영역 event 사막여우를 알아가는 사이트 사막여우의 생태, 특징, 생활 습관, 보호 활동 등에 대한 정보를 제공하는 사이트 입니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 태그는 외부 CSS 파일을 연결할 때 사용합니다. "Nex..

저번 시간에는 주관식을 한문제만 확인하는 유형이었지만 오늘은 한 페이지에서 여러 문제의 주관식을 확인하는 유형의 사이트 입니다. html 코드입니다. Quiz 주관식 확인하기 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 ebmdols@naver.com javascript 코드 입니다. 선택자로 각 영역의 상수 이름을 선언하고 문제 정보를 배열안의 객체로 표현하여 총 3개로 나누었습니다. querySelectorAll() 메서드를 사용하여 클래스가 quiz인 3개의 div태그를 한번에 묶어줄 수 있습니다. querySelectorAll() 메서드는 문서 내에서 주어진 CSS 선택자와 일치하는 모든 요소를..

자바스크립트 이미지 유형 페이지는 HTML, CSS, 자바스크립트를 사용하여 이미지 파일을 로드, 표시, 제어하는 웹 페이지입니다. 피그마에서 프레임을 1920*800으로 설정후 다음 레이아웃 그리드 설정을 columns를 12개로 설정하고 margin 값을 380으로 설정합니다. 다음은 이 그림을 코드로 작성해 보겠습니다. 여우의 생활 사막여우는 사막에서 생활 합니다. 사막여우 털의 특징 털은 갈색 또는 회색으로 된 부드러운 모피를 가지고 있으며, 눈동자는 크고 밤에 더 잘 보이도록 도와주는 반사체를 가지고 있습니다 자세히보기 사막 여우의 서식처 사막여우는 북아프리카와 아시아의 사막 지역에 서식하는 작은 크기의 개과 동물입니다 자세히보기 태그 위의 태그는 외부 파일을 문서에 연결하는데 사용합니다. 웹폰..

정답을 맞추면 강아지가 웃고 틀리면 우는 방식의 사이트를 제작 하였습니다. 먼저 html 코드입니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 ebmdols@naver.com 다음은 자바 스크립트 코드 입니다. css 스타일 시트는 어제 만든 사이트와 똑같이 적용됩니다. 어려운 용어를 정리해 보겠습니다. querySelector : 웹 개발에서 사용하는 JavaScript의 메서드 중 하나로, 문서 객체 모델(DOM)에서 특정 CSS 선택자로 요소(element)를 찾아 반환하는 역할을 합니다. 메서드: 객체(object)에 속한 함수(function)입니다. 객체는 자바스크립트에서 데이터와 해당 데이터를 조작하는 함수를 하나의 단위로 묶어 놓은 것을 말하며, 메서드는 이러한..