코린이 공부장

html은 웹페이지를 만드는데 사용되는 표준언어로 태그와 속성을 사용하여 웹 페이지 구조와 내용을 나타낸다. 이미지링크 가장 기본적인 큰 틀은 △ 아래 표는 각 구조에관한 세부내용이다. , , , , , 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 있다. 2. 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없다. 1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목요소(~)를 포함하는 것이 좋다. 2. 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있다. 1. HTML문서의 푸터 영역을 의미하는 태그로 섹션 작성자..

선택자란 CSS로 UI의 어느 부분을 디자인 할지 , 즉 표현할 대상이 되는 부분이다. △CSS로 속성을 부여하는 형식 ※ 이 예문은 h1요소에 배경색을 노란색으로, 글자색을 빨간색으로 지정한다는 의미를 담고 있다. { } 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; '로 구분해주며 마지막 속성 끝에는 구분 생략가능하다. 속성은 가로로 붙여 써도 되고 한 줄씩 따로 기술해도 된다. type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있다. ex) p {color: blue;} id 선택자 - HTML 문서 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있다. - id로 이름을 붙일 때는 유일한 이름을 부여해야한다. - CSS에서는 id 선택자 앞..

텍스트 관련요소 요소 유형 태그명 태그의 의미 및 특징 인라인 요소 강조하고 싶은 텍스트를 정의하기 위한 태그이며 기울임체로 표시. 중요한 텐스트를 정의하기 위한 태그이며 굵은체로 표시. 주의 깊게 볼 텍스트 부분을 강조하기 위한 태그이며 노란새으로 표시. 의미를 가지고 있지 않으며 단순히 텍스트를 굵은체로 표시. 주의사항, 법적제한, 저작권 등을 정의하기 위한 태그. 아래첨자 텍스트를 정의하기 위한 태그. 위 첨자 텍스트를 정의하기 위한 태그 △ 예제 ※ 문장에서 특정 단어에 대한 '강조나 중요'의 의미가 아닌 단순히 기울임체나 굵은체로 표시하고 싶다면 태그나 태그를 사용하지 않고 CSS를 이용하여 표현 할 수 있다.

마크업 마크업 언어(Markup Language)란 문서가 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이다. 즉, 마크업(Markup)은 문서처리를 지원하기 위해 문서에 추가되는 정보로, 마크업작업을 완료하면 디자이너의 작업물이 웹에 띄울 수 있는 틀의 형태로 구조화된다. 시멘틱 마크업 - 시멘틱(SEMANTIC)의 사전적 뜻은 '의미론적인' 정도로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻이다. - 시각장애인의 경우 문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데 이런경우 시멘틱 마크업을 통해 태그의 의미를 적절하게 전달할 수 있다. △예제 첫 번째 이미지처럼 마크업 하면 스크린 리더(음성낭독 프로그램)에서는 그..

이미지출처 블록 레벨 요소(Block-level Elements) - 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. - 블록 요소는 하나의 박스라고 생각하면 됩니다. 코드 ~ - 각 섹션의 제목을 나타냅니다. - h1요소가 가장 높은 등급(크기가 가장 크게 표현)이고, h6요소가 가장 낮은 등급입니다. - 문단을 나타냅니다. - 텍스트를 단락으로 정의합니다. 예제 △ (예제1)에서 마크업 한 ,, 요소들은 블록의 성질을 가지고 있어 화면상 줄 바꿈 현상이 일어남. 인라인 요소(Inline Element) - 인라인 요소는 마크업을 할 때 가로로 정렬이 됩니다. - 인라인 요소는 텍스트라고 생각하면 됩니다. - 즉, 블록 레벨 요소처럼 행이 바뀌지 않고 한 줄로 출력됩니다. 코드 ..

parallax효과 다음 프레임 처럼 스크롤을 내릴때마다 나타나는 효과를 만들어보겠습니다. 코드블럭 Javascript parallax Effect06 패럴랙스 이펙트: 텍스트 효과 1 2 3 4 5 6 7 01 section1 결과도 중요하지만, 과정을 더 즁요하게 생각한다. 02 section2 세상 모든 일은 여러분이 무엇을 생각하느냐에 따라 일어납니다. 03 section3 웃음은 두 사람간의 가장 가까운 거리다 04 section4 지속적인 긍정적 사고는 능력을 배가시킨다. 05 section5 정의는 외부에서 오는 것이 아니라 내적 평온으로부터 온다. 06 section6 아무것도 변하지 않을지라도 내가 변하면 모든 것이 변한다 07 section7 노력을 이기는 재능은 없고 노력을 외면하는 ..

Parallax효과 만들기 코드블럭 Javascript parallax Effect01 패럴랙스 이펙트: 사이드 메뉴 1 2 3 4 5 6 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 즁요하게 생각한다. 02 section2 세상 모든 일은 여러분이 무엇을 생각하느냐에 따라 일어납니다. 03 section3 웃음은 두 사람간의 가장 가까운 거리다 04 section4 지속적인 긍정적 사고는 능력을 배가시킨다. 05 section5 정의는 외부에서 오는 것이 아니라 내적 평온으로부터 온다. 06 section6 아무것도 변하지 않을지라도 내가 변하면 모든 것이 변한다 07 section7 노력을 이기는 재능은 없고 노력을 외면하는 결과..

애니메이션 예제1 코드블럭 LeeEunJi's PORTFOLIO work about let's inrtroduce frontend developer's all works ofportfolio lee3ll.tistory.com 보충설명 ✨ 이 코드는 GreenSock Animation Platform (GSAP) 라이브러리를 웹페이지에 추가하는 코드입니다. GSAP은 HTML, CSS, SVG 및 JavaScript 기반 웹 애니메이션을 만들기 위해 사용되는 강력하고 유연한 JavaScript 애니메이션 라이브러리입니다. 외부 라이브러리인 GSAP을 가져와서 사용하기 위해, 라이브러리 파일이 위치한 경로를 지정하여 웹 페이지에 추가합니다. //글씨 분리하기 ✨ 문서 내의 모든 split 클래스를 가진 요소..

parallax 효과 만들기 메뉴 코드블럭 Javascript parallax Effect01 패럴랙스 이펙트: 메뉴 효과 1 2 3 4 5 6 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 즁요하게 생각한다. 02 section2 세상 모든 일은 여러분이 무엇을 생각하느냐에 따라 일어납니다. 03 section3 웃음은 두 사람간의 가장 가까운 거리다 04 section4 지속적인 긍정적 사고는 능력을 배가시킨다. 05 section5 정의는 외부에서 오는 것이 아니라 내적 평온으로부터 온다. 06 section6 아무것도 변하지 않을지라도 내가 변하면 모든 것이 변한다 07 section7 노력을 이기는 재능은 없고 노력을 외면하는..

5초마다 바뀌는 명언예제에서 랜덤배경추가 코드블럭 보충설명 무작위로 선택된 자연 사진을 HTML 문서의 배경 이미지로 설정하고, 일정한 시간 간격으로 배경 이미지를 변경하는 기능을 구현하고 있습니다. BgImage 함수는 https://source.unsplash.com/random/?nature URL을 사용하여 무작위로 선택된 자연 사진을 가져온 뒤, 이를 backgroundImageUrl 변수에 저장합니다. new Date().getTime() 함수를 사용하여 *캐싱을 방지하기 위해 URL에 시간 정보를 추가합니다. document.body.style.backgroundImage 속성을 사용하여 HTML 문서의 배경 이미지를 backgroundImageUrl 변수의 값으로 설정합니다. BgImage..

로또 번호 랜덤뽑기 코드블럭 로또 번호뽑기 뽑기 보충설명 ✨HTML에서 button 요소와 result 요소를 querySelector 메소드로 가져와서 변수 button과 result에 할당합니다. lottoNumber 함수는 새로운 Set 객체를 생성하고, 1부터 45까지의 숫자 중 랜덤으로 6개를 선택해서 Set에 추가합니다. 이 때, 중복된 숫자가 나오지 않도록 Set 객체를 사용합니다. button 요소에 click 이벤트 리스너를 추가하고, 이벤트 발생 시 lottoNumber 함수를 호출합니다. 그리고 result 요소의 innerText를 ...randomLotto로 설정합니다. ...randomLotto는 Set 객체를 배열로 변환한 것으로, 쉼표로 구분된 6개의 로또 번호가 result..

명언 랜덤 슬라이드 코드블럭 보충설명 5초마다 JSON 파일에서 명언을 가져와서 화면에 출력해줍니다. wise 변수를 0으로 설정하여주고 dataQuestion 함수를 정의합니다. dataQuestion 함수 안에서는 0부터 29까지의 랜덤한 수를 wise 변수에 저장하고, fetch를 이용하여 json/dummy01.json 파일을 가져옵니다. 가져온 파일을 items 변수에 저장하고, items.quotes[wise]를 이용하여 wise 변수에 저장된 인덱스에 해당하는 명언을 추출합니다. 추출한 명언을 document.querySelector로 해당 클래스를 가진 요소에 출력합니다. dataQuestion() 함수를 실행하고 setInterval을 이용하여 5초(5000)마다 dataQuestion(..

Slider Effect만들기 이전버튼과 다음버튼을 이용하여 이미지를 바꿀수 있으며 썸네일을 눌렀을때 해당 이미지로 이동시켜주도록 만들어 보겠습니다. 코드블럭 Javascript Slider sliderEffect07 슬라이드 이펙트: 좌로 움직이기 1 2 3 4 5 6 7 prev next lee3ll@naver.com 보충설명 썸네일 이미지 클릭하는 for문 forEach로 바꾸기 thumnailNodes.forEach((e, i) => { e.addEventListener("click", () => { slider.thumnails.querySelector("img.active").classList.remove("active"); thumnailNodes[i].classList.add("active..

sliderEffect6만들기 이번에는 사진을 움직이는 버튼과 아래 이미지 갯수만큼 닷을 만들어 닷마다 이미지로 이동할 수 있도록 만들어 보겠습니다. 코드블럭 Javascript Slider Effect06 슬라이드 이펙트: 좌로 움직이기(연속적으로) 1 2 3 4 5 6 7 prev next 보충설명 ✨ init()는 일반적으로 초기화를 위한 함수입니다. 이 함수는 보통 애플리케이션의 시작 시점에서 실행되며, 필요한 초기 작업을 수행합니다. 아래는 init()함수가 할 수 있는 일입니다. -애플리케이션의 설정을 읽고 파싱하여 내부 변수에 저장합니다. -애플리케이션에서 사용할 전역 변수를 설정합니다. -애플리케이션에서 사용할 리소스를 불러오거나 초기화합니다. -애플리케이션에서 필요한 라이브러리를 불러옵니..

Slider Effect만들기 이번 슬라이드 이펙트에서는 4번효과와 같이 연속적으로 움직이지만 y축(세로)을 기준으로 움직이도록 만들어보겠습니다. 코드블럭 Javascript Slider Effect05 슬라이드 이펙트: 좌로 움직이기(연속적으로) 1 2 3 4 5 6 lee3ll@naver.com 보충설명 ✨ HTML 문서 내 ".slider__wrap" 클래스를 가진 요소를 선택하여 sliderWrap 변수에 할당하고, 이하 동일한 방식으로 필요한 요소들을 선택하여 변수에 할당합니다. currentIndex, sliderCount, sliderWidth, sliderHeight, sliderClone, sliderInterval 등의 변수를 초기화합니다. ✨ 두 번째 script 태그에서는 slide..

Slider Effect4 이번에는 슬라이드 효과가 연속적으로 부드럽게 넘겨지도록 만들어보겠습니다. 코드블럭 Javascript Slider Effect04 슬라이드 이펙트: 좌로 움직이기(연속적으로) 1 2 3 4 5 6 lee3ll@naver.com 보충설명 ✨ HTML 문서 내 ".slider__wrap" 클래스를 가진 요소를 선택하여 sliderWrap 변수에 할당하고, 이하 동일한 방식으로 필요한 요소들을 선택하여 변수에 할당합니다. ✨ 슬라이더의 동작을 제어하는 함수인 sliderEffect() 함수를 선언합니다. 이 함수는 현재 이미지 인덱스currentIndex를 1 증가시키고, 선택된 이미지의 영역sliderInner에 대해 translateX() 속성을 이용하여 이동합니다. ✨ 조건문에..

Slider Effect만들기3 이번엔 Slider Effect2와 다르게 세로로 슬라이드효과를 주도록 만들어 보겠습니다. 코드블럭 Javascript Slider Effect02 슬라이드 이펙트: 좌로 움직이기 1 2 3 4 5 6 lee3ll@naver.com 보충설명 ✨ sliderInner 요소에 transition 속성을 설정하여 슬라이더가 움직일 때 애니메이션 효과가 부드럽게 적용되도록 합니다. 이 속성을 이용하여 슬라이더 이미지가 이동할 때 전환 효과가 적용되며, 0.6s 시간 동안 애니메이션 효과가 지속됩니다. ✨ setInterval() 함수를 사용하여 일정한 시간 간격으로 이미지를 변경하도록 합니다. ✨ 이미지를 변경하기 위해서는 currentIndex 값을 업데이트하고, 이를 이용하여..

Slider Effect 만들기2 Slider Effect1 페이지와 다르게 2페이지에서는 다음 프레임과 같이 옆으로 슬라이드 됩니다. 또한 효과를 주어 보다더 부드러움 넘김을 보여주도록 만들어 보겠습니다. 코드블럭 Javascript Slider Effect02 슬라이드 이펙트: 좌로 움직이기 1 2 3 4 5 6 lee3ll@naver.com 보충설명 ✨ 선택자를 사용하여 변수에 요소를 할당해 줍니다. ✨ sliderInner라는 변수를 사용하여 HTML 문서 내에서 이미지 슬라이드쇼의 이미지를 감싸고 있는 요소를 찾아 할당합니다. 그리고, transition 속성을 이용하여 이미지 전환 시간을 0.6초로 설정합니다. ✨ slidereffect1과 같이 setInterval 함수를 사용하여 일정한 시..

sliderEffect 만들기 다음 프레임과 같이 이미지가 슬라이드되어 다음이미지를 나타내는 효과를 만들어 보겠습니다. 코드블럭 Javascript Slider Effect01 슬라이드 이펙트 1 2 3 4 5 6 lee3ll@naver.com 보충설명 ✨ querySelector 메서드를 사용하여 sliderWrap, sliderImg 변수에 요소를 할당하여 선택자를 만들어 줍니다. ✨ 또한, querySelectorAll 메서드를 사용하여 HTML 문서 내에서 클래스 이름이 slider인 모든 요소를 slider 변수에 할당합니다. ✨ 현재 보이는 이미지를 나타내기 위해 currentIndex 변수를 0으로 설정하여줍니다. ✨ 이미지 갯수를 나타내기 위해 sliderCount 변수에 slider.le..

01. 결괏값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 📝정답 0 🖋 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(){ let a = []; for(i=1; i23 은 거짓이기 때문에 else return 값으로 ..

문자 관련 스타일 ✨01. font-family 문자의 글골을 지정하는 속성이다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있다. font-famliy: '돋음', Dotum, Arial, Helvetica, sans-serif; ✨02. font-size ▲px 해상도에 따라 상대적으로 달라지는 기본 단위 font-size; 12px; ▲ % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위 font-size:150%; 특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px가 된다. 만약 부모 요소가 10px이었다면 150%는 15px가 될것이다. ▲vw, vh vw는 뷰포트 너비값..

grid layout grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요하다. 이미지출처 ✨네개 짜리 박스를 마크업한다 header sidemenu content footer ✨이 박스에 grid layout을 사용한다고 선언 .wrap{ display: grid; } ✨가로로 2칸 세로로는 3칸이므로 grid-template-columns에 두 개의 가로 크기를 차례로 지정하고 grid-template-rows에는 위부터 아래까지 세 개의 세로 크기를 지정한다. .wrap{ display: grid; grid-template-colums: 30% 70%; grid-template-rows: 50px 150px 50px } ✨다음으로 각 칼럼의 경계선 번호를 알아야 한다. 칼..

flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것이다. display: flex; display: -webkit- flex; display: -ms-flexbox; 위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻. flex-grow 자식 요소가 적거나 그 크기가 작아 공간이 암을 때 항목의 크기를 늘려 채워주는 방법을 정의. 속성 값 속성 설명 0 (기본 값) 1 항목들이 모두 1이면 같은 크기 양수 값을 높게 줄수록 더 늘어남 공간이 부족할 때는 어떤 값도 무의미 flex-shrink 속성 값 속성 설명 0 공간이 부족해도 항목의 크기를 줄일 수 없음 1 (기본..

[ type 선택자 ] html 문서의 태그 이름을 선택자로 사용할 수 있다. ex) p { color: blue; } [ id 선택자 ] id 선택자는 HTML 요소 중에서 특정 요소를 선택하여 스타일을 적용할 때 사용된다. id 선택자는 요소의 고유한 식별자를 이용하여 선택한다. 즉, ID가 ID 이름과 같은 태그에 대해서 적용한다. ex) #아이디명 { 속성: 값; } [ class 선택자 ] 클래스 선택자는 .클래스이름 을 사용하여 나타낸다. 클래스가 클래스이름과 같은 태그들에 대하여 적용한다. ex) .ClassName { width: 100px; } [ 전체 선택자 ] 전체 선택자는 * 을 사용하여 나타낸다. html 의 모든 태그에 대하여 적용한다. ex)* { margin: 0 auto; ..

float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다. 태그를 float 속성 및 width, height 속성 등을 이용하여 레이아웃을 배치하는 방식입니다. float - block 요소는 원래 세로로만 나열되지만 float을 이용하여 가로로 배치할 수 있다. - float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성인데, 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려할 때 유용하다. - float한 박스에 가로 사이즈를 지정해 주어야 크로스브라우징 된다. 그러나 heading요소나 인라인 요소들은 가로 사이즈 없이 float해도 레이아웃이 흐트러지지 않는다. 속성 값 속성 설명 left 요소를 왼쪽에 배치..

내부 스타일시트 - CSS를 HTML문서안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태이다. 예제 p{ color:red; }의 의미는 p태그 안의 글자 색상을 red로 설정하라는 뜻이다. 외부 스타일시트 - 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있다. -이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고 HTML에서는 태그를 이용하여 선언한다. -내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부스타일시트는 그 스타일을 선언한 모든 HTML페이지에 적용 된다. @ import - @import는 CSS 안으로 다른 CSS 파일을 불러들일 경우 사용한다. CSS의 맨 윗줄에 기술한다. - @import는 어떤 CSS파..

See the Pen Tail Animation by lee3ll (@lee3ll) on CodePen.

뮤직플레이어 리스트만들기 추가 코드블럭 //뮤직 리스트를 클릭하면 재생 function playListMusic(){ const musicListAll = musicListUl.querySelectorAll("li"); //뮤직 리스트 목록 for(let i=0; i{ loadMusic(musicIndex); playListMusic(); }); 보충설명 //뮤직 리스트를 클릭하면 재생 음악 리스트를 관리하는 함수인 playListMusic()입니다. 먼저 querySelectorAll() 함수를 사용하여 musicListUl 요소 내부의 li 태그 목록을 가져옵니다. 그리고 for 루프를 사용하여 모든 음악 리스트 아이템에 대해 아래의 작업을 수행합니다. 1. querySelector() 함수를 사용하..

뮤직플레이어기능 만들기 코드블럭 const allMusic = [ { name : "1.Dangerously", artist : "Charlie Puth", img : "music_view01.png", audio : "music_audio01" }, { name : "2.낭만교향곡", artist : "빅나티", img : "music_view02.png", audio : "music_audio02" }, { name : "3.첫사랑", artist : "백아", img : "music_view03.png", audio : "music_audio03" }, { name : "4.INDUSTRY BABY", artist : "Lil Nas X Jack Harlow", img : "music_view04...

게임이팩트 만들기 다음 프레임과 같이 아이콘을 움직일 수 있으며 아이콘 색깔별 커서와 헤더색 변환, 시간입력, os크기 구현을 해보겠습니다. 코드블럭 EUNJI'S GAME WORLD 2023년 4월 24일 09시 30분 15초 뮤직듣기 뮤직듣기 뮤직듣기 뮤직듣기 현재 맥을 사용하고 있으면, 화면 크기는 1920 X 760 입니다. jQuery, jQueryUI, GSAP ✨이 코드는 jQuery, jQueryUI, GSAP의 JavaScript 라이브러리를 가져와 웹 페이지에 포함시키는 코드입니다. 이러한 라이브러리는 웹 개발에서 자주 사용되는 기능을 쉽게 구현할 수 있도록 도와줍니다. ✨jQuery는 DOM(Document Object Model)을 효율적으로 조작하고 AJAX 기능을 제공하는 자바스..

퀴즈사이트 만들기 cbt유형 이번에는 시작화면에서 여러회차의 시험지를 풀어볼 수 있도록 (깃허브링크 연결)하며 이름을 입력해 수험자 이름이 표시되게 해줍니다. 또 타이머를 설정하여 남은시간을 표시해 줍니다. 코드블럭 선택자와 변수선언 const cbt = document.querySelectorAll(".cbt"); const cbtQuiz = document.querySelector(".cbt__quiz"); const cbtOmr = document.querySelector(".cbt__omr"); const cbtSubmit = document.querySelector(".cbt__submit"); const cbtRest = document.querySelector(".cbt__rest"); co..

퀴즈 사이트 만들기 이번에는 문제 체크시 사이드의 오엠알 답안지도 함께 체크되며 문제 한개가 체크 될 때마다 전체 문항수의 남은 문항수가 하나씩 줄어들게 만들어 보겠습니다. 코드블럭 Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 정보처리기능사 2009년 5회 2020년 1회 정보처리기능사 기출문제 제출하기 59분 10초 수험자 : 이은지 전체 문제수 : 0문항 남은 문제수 : 0문항 보충설명 👉 answerSelect2라는 이름의 함수가 정의되었습니다. 이 함수는 elem이라는 하나의 매개변수를 받습니다. 👉 answer라는 변수에 elem.value 값이 할당됩니다. 👉 select라는 변수에 ".cbt__omr .omr" CSS 선택자를 이용하여 문서 내에서 해당하는 모든 엘리먼트들의 목록이..

퀴즈 사이트 만들기 이번에는 CBT(컴퓨터 따위로 작성된 훈련 프로그램에 따라 교육하는 작업)유형과 사이드에 OMR카드 효과를 준 퀴즈 사이트를 만들어 보겠습니다. 코드블럭 Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 수험자 : 이은지 전체 문제수 : 60문항 남은 문제수 : 59문항 제출하기 59분 10초 보충설명 🎈 HTML 문서 내에 있는 .cbt, .cbt__quiz, .cbt__omr, .cbt__submit, .cbt__title em 클래스에 대한 참조를 생성한 다음, questionAll 배열을 선언합니다. dataQuestion 함수는 fetch() 메소드를 사용하여 JSON 파일에서 데이터를 가져오고, 각 항목을 새로운 객체로 변환합..

SITE 만들기 헤더유형, 슬라이드유형, 이미지유형, 이미지/텍스트 유형, 카드유형, 배너유형, 텍스트유형, 푸터유형 지금까지 배운 여러 타입들의 페이지를 합쳐 하나의 사이트를 만들어줍니다. 코드블럭 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 슬라이드 영역 EVENT 오사카 여행 휴식과 낭만 그리고 즐거움을 찾으러 오사카로 떠나는 이들을 위한 여행가이드 페이지 관광지, 맛집, 카페등 오사카여행지와 관련된 정보를 공유합니다. 자세히보기 상담신청 이전 이미지 다음 ..

퀴즈사이트 만들기 다음 프레임 처럼 다중 문제를 다음문제버튼을 통해 다음문제로 넘어가는 형태로 만들어 보겠습니다. 코드블럭 Quiz 객관식 확인하기(여러문제) 유형: 슬라이드 1 2 3 4 5 6 . 정답입니다! 틀렸습니다! 다음 문제 ??점 ?개 lee3ll@naver.com 보충설명 ✨ ☞ div 박스에 quiz__answer 라는 class 이름을 붙여 다음문제 버튼을 만들어줍니다. ☞ 점수를 표시하는 박스와 점수를 확인하기 위한 체크버튼을 div 박스로 만들어줍니다. ✨ ☞ const quizInfo = [ {} ] : quizInfo 배열안에 문제정보를 나열합니다. ☞ 전역변수 선택자를 만들어 줍니다. ☞ let quizCount=0와 let quizScore=0 으로 변수를 0으로 지정해줍니다..

Quiz 사이트 만들기 다음 프레임처럼 객관식 유형의 여러문제를 올리면서 정답확인버튼을 만들어 점수가 나오도록 코딩을 짜보겠습니다. 코드블럭 Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 lee3ll@naver.com 보충설명 ☞ const exam = []; 상수 exam을 선언하고 빈배열 ([])을 할당합니다. 이제 exam 상수는 배열 형태의 데이터를 담을 수 있는 변수가 되었습니다. 이 배열에 요소를 추가하거나 제거하여 데이터를 관리할 수 있습니다. ☞ .push 메서드를 사용하여 배열의 끝에 하나 이상의 요소를 추가해줍니다. 위의 코딩에서는 exam 배열에 강아지 애니메이션과 문제의 객관식 보기, 정답확인 버튼을 넣어주었습니다. ☞ exam.join("")는 배열 exam의 모든 요..

FooterType page 만들기 많은 사이트에서 footer영역을 확인해 보면 다음 프레임과 같은 모습을 종종 볼 수있습니다. 이런 페이지를 만드는 방법을 알아보겠습니다. 코드블럭 푸터 오사카 관광지 소개 오사카 여행 오사카 관광지 소개 관광지 코스 추천 관광지 교통편 오사카 먹거리 소개 오사카 먹거리 소개 오사카 먹거리 체험 한국인에게 인기있는 먹거리 오사카 길거리 음식 오사카 맛집 추천 오사카 음식 종류별 맛집추천 유명 관광지별 맛집 위치안내 디저트가 맛있는 카페 소개 분위기 좋은 카페 소개 전통찻집 소개 포장마차 거리 소개 오사카 쇼핑 오사카 쇼핑리스트 100 오사카 인기 스토어 오사카 패션스토어 오사카 기념품샵 오사카 사진 오사카 길거리 사진 오사카 관광지 사진 오사카 계절별 꽃 사진 오사카 ..

Text Type page 만들기 텍스트 유형 페이지란, 주로 텍스트로 구성된 웹 페이지를 의미합니다. 텍스트 페이지는 텍스트와 함께 이미지, 동영상, 그래프, 표 등 다양한 요소를 포함할 수 있으며, 정보를 제공하거나, 커뮤니케이션을 위한 목적으로 사용됩니다. 또한, 텍스트 페이지는 다른 매체에 비해 작성과 유지보수 비용이 낮아 비용 효율적입니다. 다음과 같은 텍스트 페이지를 만들어보겠습니다. 코드블럭 notice 오사카 먹거리 오꼬노미야끼 오사카를 대표하는 음식 중 하나로, 얇은 밀가루 반죽에 돼지고기, 새우, 오징어, 양배추, 파 등을 넣고 구워 만든 팬케이크 형태의 음식입니다. 더보기 타코야끼 오코노미야키와 함께 오사카의 대표적인 음식으로, 반구 모양의 고기빵에 새우, 오징어, 양배추 등을 넣고 ..

퀴즈 사이트만들기 이번에는 다음과 같이 객관식 문제유형의 퀴즈사이트를 만들어 보겠습니다. 코드블럭 Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 . 정답입니다! 틀렸습니다! 정답 확인하기 lee3ll@naver.com 보충설명 ☞객관식 체크박스를 만들어주기 위해 div박스에 quiz__choice라는 class이름을주어 생성 후 4지선다형 보기를 만들어주기 때문에 자식박스로 4개의 label박스를 만들어줍니다. label박스에는 각각 input박슬를 생성합니다. ☞ input 태그를 사용하여 라디오 버튼을 생성합니다. type="radio" 속성은 라디오 버튼임을 나타내며, id 속성은 라디오 버튼을 식별하기 위한 고유한 값입니다. name 속성은 라디오 버튼 그룹을 식별하기 위한 값입니다...

sliderType page 만들기 이미지나 컨텐츠를 슬라이드 형태로 보여주는 슬라이드 타입의 웹페이지 틀을 만들어 보겠습니다. 코드블럭 메인 슬라이드 영역 EVENT 오사카 여행 휴식과 낭만 그리고 즐거움을 찾으러 오사카로 떠나는 이들을 위한 여행가이드 페이지 관광지, 맛집, 카페등 오사카여행지와 관련된 정보를 공유합니다. 자세히보기 상담신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 보충설명 .blind 웹페이지에서 시각 장애인을 위한 웹 접근성을 높이기 위해 사용되는 CSS 클래스명 중 하나. 일반적으로, 시각 장애인들은 스크린 리더(Screen Reader)라는 도구를 사용하여 웹페이지를 이용한다. 스크린 리더는 웹페이지에서 텍스트 정보를 읽어주는 도구인데, ..

ImgTextType page 코드블럭 notice 오사카 먹거리의 종류 오사카에는 타코야키, 가츠동, 오꼬노미야키, 교자, 라멘 등등 여러가지 먹거리가 있습니다. 타코야키(Takoyaki) 가츠동(カツ丼) 오꼬노미야키(Okonomiyakki) 교자(交子) 라멘(Ramen) 유카쿠(Yakitori) 꼬치야키(Kushikatsu) 보충설명 ▶ 전체 section 태그안에 container태그를 주고 article박스 3개를 만들어 주어 텍스트박스하나와 이미지 박스 두개를 만들어 구조를 잡아줍니다. ▶css를 주기위해 article박스별 class명을 지어줍니다. ▶p태그 안에 간단한 설명입력후 ul>li 태그를 만들어 리스트를 만들어 줍니다. ▶이미지는 img src 태그속 경로를 입력하여 넣어줍니다. ▶..

퀴즈사이트 만들기 이번에는 다음 이미지처럼 다중 게시물로 여러문제를 동시에 올리며 다음 프레임처럼 정답일때는 정답아이콘 모션과 틀렸을때는 틀림아이콘 모션을 만들어보겠습니다 코드블럭 Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 lee3ll@naver.com ☞ quizInfo에 여러 문제를 입력하였고 querySelector에 All을 붙여 일치하는 모든요소를 한번에 불러냈다. ☞ for문을 사용한 문제종류와 시간출력 방법 for(let i=0; i

MySQL이란 ✨MySQL은 관계형 데이터베이스 관리 시스템(RDBMS)의 하나로, 오픈소스이며 가장 널리 사용되는 데이터베이스 중 하나입니다. MySQL은 다양한 운영체제에서 동작할 수 있으며, 많은 프로그래밍 언어와 호환되어 사용됩니다. ✨MySQL은 대규모 데이터 집합을 효율적으로 관리할 수 있도록 설계되었으며, 다중 사용자 환경에서 안정적인 성능을 제공합니다. 이를 위해 인덱싱, 트랜잭션, 보안 등의 기능을 제공하며, 데이터의 안정성과 일관성을 보장하기 위해 ACID(원자성, 일관성, 격리성, 지속성) 규칙을 따릅니다. ✨MySQL은 오픈소스이기 때문에 무료로 다운로드 및 사용이 가능합니다. 많은 웹 사이트, 애플리케이션 및 기업에서 MySQL을 사용하고 있으며, 이를 통해 데이터의 효율적인 관리..

PHP란 ✨ PHP는 서버 측 웹 개발을 위한 스크립트 언어로, "PHP: Hypertext Preprocessor"의 약자입니다. Rasmus Lerdorf가 처음 개발하였으며, 이후 PHP 개발자들이 지속적으로 발전시켜 왔습니다. PHP는 HTML 코드 내부에 삽입하여 웹 서버에서 실행되며, 동적으로 웹 페이지를 생성할 수 있습니다. 이를 위해 다양한 기능을 제공합니다. 예를 들어, 데이터베이스 연결, 파일 업로드, 세션 관리, 쿠키 관리, 이메일 발송 등이 가능합니다. 또한, 다양한 확장성을 제공하여, 이미지 처리, PDF 생성 등 다양한 작업을 수행할 수 있습니다. PHP는 무료이며, 오픈 소스이기 때문에 누구나 자유롭게 사용할 수 있습니다. 또한, 대부분의 운영 체제와 웹 서버에서 실행될 수 있..

게시판 만들기(검색기능 구현하기) php를 이용하여 게시판목록에서 제목, 내용, 등록자를 이용하여 게시글을 검색하고 갯수를 계산하는 기능을 만들어 보겠습니다. 코드블럭

게시판만들기(메인보드 목록 번호눌러 페이지이동 및 게시판 수정하기) 코드블럭 어떤 일이라도 노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다. 신입의 열정과 도전정신을 깊숙히 새기며 배움에 있어 겸손함을 유지하며 세부적인 곳까지 파고드는 개발자가 되겠습니다. *총1111건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수

php 게시판 만들기 php게시판 코드블럭 게시판 웹디자이너, 웹퍼블리셔, 프론트엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요. *총 1111 건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수

php 회원가입&로그인 페이지 회원가입php 회원가입 영역 이메일 이름 비밀번호 비밀번호 확인 연락처 회원가입 완료 보충설명 회원가입 양식을 만드는 코드입니다. 태그: HTML에서 입력 양식(form)을 만들기 위해 사용되는 태그입니다. 이 태그의 action 속성은 회원가입 양식이 제출되었을 때 데이터가 전송될 서버 측 스크립트 파일의 경로를 지정합니다. method 속성은 데이터를 전송하는 방식을 지정합니다. 태그: 입력 양식 요소들을 묶어서 관련 요소들끼리 그룹화하고, 각 그룹에 대한 설명 등을 제공할 수 있도록 하는 태그입니다. 태그: 태그로 묶인 입력 양식 그룹에 대한 제목을 지정합니다. 태그: 사용자 인터페이스(UI) 요소와 연결되는 레이블을 정의합니다. 태그: 사용자가 데이터를 입력할 수 있..

웹디자인기능사 오답노트 가시광선에 대한 설명으로 틀린 것은? ① 빛의 파장 중 380nm에서 780nm 사이의 범위로 눈으로 지각되는 영역을 말한다. ② 라디오나 텔레비전, 휴대폰의 파장범위를 포함 한다. ❸ 백색광이 프리즘을 통해 나타나는 색띠를 말한다. ④ 전자기파 스펙트럼이라고도 한다. ✨라디오, 텔레비전, 휴대폰의 파장범위는 가시광선이 아니라 적외선이다. 자연에서 쉽게 찾을 수 있고, 온화함이 있지만 때로는 단조로움을 주는 디자인 원리는? ❶ 유사조화 ② 균일조화 ③ 방사조화 ④ 대비조화 ✨ 유사조화 : 같은 성질의 조화, 친근감과 부드러움을 가지고 있으나 이로 인해 단조로울 수 있다. 파도나 잎사귀, 잔디 등 자연에서 쉽게 볼 수 있다. 18. 2차원적 제품 디자인 분야에 속하지 않는 것은? ❶..

웹디자인 기능사 자주나오는 시험예제 부분과 부분 또는 부분과 전체 사이 안정된 관련성을 지니며, 서로 함께 속해있는 것처럼 보이는 디자인의 원리는? 1.비례 2.조화 3.균형 4.강조 더보기 2. 조화 디자인을 할 때 목적에 합당한 수단을 썼는지에 대한 디자인의 조건은? 1.합목적성 2.독창성 3.심미성 4.경제성 더보기 1. 합목적성 합목적성:디자인은 합리적이고 목적에 부합해야한다.디자인 요소들이 기능적으로 효과적이며, 사용자의 요구와 목적에 부합하는 디자인을 만들어야한다. 독창성:디자인은 창의적이어야한다.다른 제품이나 서비스와 구별되는 독창적인 디자인을 만들어야 한다. 심미성:디자인은 시각적으로 매력적이어야 한다. 사용자의 눈을 사로잡는 디자인이어야하며, 디자인 요소들이 조화롭게 조합되어야한다. 경제..

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); } 📝정답 1 3 true 02. 다음의 결괏값을 보고 빈칸을 채우시오. { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document.write("함수1가 실행되었습니다."); _______(); } callback(func); //함수1가 실행되었습니다..

자바스크립트 예제 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 📝정답 함수가 실행되었습니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 📝정답 함수가 실행되었습니다. 03.결괏값을 작성하시오. { let sum = 0; for(var i=1; i num2)10은 23보다 크지 않기 때문에 false 는 else return 값인 num2가 나오기 때문에 23이 됩니다. 다음 + func(40, 50)값에서 num2 40>50식도 같은이유로 num2가 실행되기 때문에 50이 출력됩니다. 그래서 23 + 50은 73이 ..

자바스크립트 테스트 예제 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 📝정답 false 🖍조건문에서 0, null, undefined, false, ""(빈문자열) 은 false로 작동합니다. 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } 📝정답 1, 2, 4, 5, 6 🖍num의 변수 0을 넣었을때 num++식이 먼저 실행되어 결과값 1부터 시작됩니다. cotinue 속성으로 인해 3의 값은 건너뛰고 break속성으로 6에서 멈춰줍니다. 07. 결괏값을 작성하시오. { for(let i=1; i { co..

오답노트 문제) 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100; let y = 200; let z = "javascript"; x ___ 300; y ___ 400; z ___ "jquery"; console.log(x); console.log(y); console.log(z); //400 //-200 //javascriptjquery } += , -=, += ▲기존 값에서 더해줍니다. 문제) 다음의 출력값을 보고 빈칸을 채우시오! { const arr = ________(); arr[0] = 100; arr[1] = 200; arr[2] = "javascript"; console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); //10..