SEOLHEE

HTML CSS * { margin: 0; padding: 0; } .back { position: fixed; width: 100%; height: 100%; background: #fff; animation: back 1s infinite; } .heart { position: absolute; top: 50%; left: 50%; background: red; width: 50px; height: 50px; transform: rotate(-45deg); animation: beat 1s infinite; } .heart::after { content: ''; position: absolute; top: 0; left: 25px; background: red; width: 50px; height: ..

정보처리기능사 정보처리기능사 필기 시험은 대한상공회의소에서 주관하는 국가기술자격증 시험으로, 전산 개론, 데이터베이스, 운영체제, 네트워크, 프로그래밍 언어 등의 IT 분야에 대한 기본 지식을 문제로 출제됩니다. 01. 컴퓨터의 특징 대용량성 많은 양의 데이터를 처리 및 보관 범용성 컴퓨터를 여러 가지 용도로 사용 호환성 하나의 하드웨어나 소프트웨어를 컴퓨터의 기종에 관계없이 여러 컴퓨터에서 사용 가능 정확성 사용자의 요구 기능을 충족시키는 정도 신뢰성 주어진 환경에서 고장 없이 담당 기능을 원활하게 수행하는 정도 02. 중앙처리장치(CPU) 중앙처리장치는 사람의 두뇌와 같이 컴퓨터 시스템에 부착된 모든 장치의 동작을 제어하고 명령을 실행하는 장치로, 제어장치, 연산장치, 레지스터로 구성된다. 1. 제어..

웹디자인 기능사 실기 웹디자인 기능사 실기는 웹디자인 분야에서 실무 능력을 검증하는 시험으로, HTML/CSS를 이용한 웹 페이지 제작, 이미지 및 동영상 처리, 웹 접근성 및 검색 엔진 최적화 등의 기술을 평가합니다. 완성된 사이트 align-items Flexbox 레이아웃에서 사용되는 CSS 속성 중 하나로, Flex 컨테이너 내부의 Flex 아이템들을 수직 축을 기준으로 정렬하는 역할을 합니다. "align-items" 속성은 다음과 같이 사용할 수 있습니다. .flex-container { display: flex; align-items: [값]; } "align-items" 속성은 Flex 컨테이너인 ".flex-container"의 수직 축을 기준으로 내부 Flex 아이템들을 정렬하는데 사용..

자바스크립트 테스트 자바스크립트 테스트 문제와 정답을 정리하고 틀린 문제는 풀이를 해보자 01. 다음의 결괏값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(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; i

자바스크립트 마무리 문제 (1) 이미지에 마우스 포인터를 올려 놓았을 때, 다른 이미지로 바뀌었다가 마우스 포인터를 다른 곳으로 이동하면 다시 원래 이미지로 바뀌는 소스를 작성해 보세요. 길라잡이 img 태그에는 id나 class가 없습니다. 태그 이름을 사용하거나 2개 이상의 선택지를 연결한 후 이미지를 가져와서 변수에 저장합니다. 마우스 포인터를 이미지의 위에 올려놓을 때는 mouseover 이벤트가, 마우스 포인터를 다른 곳으로 이동할 때는 mouseout 이벤트가 발생합니다. 이벤트가 발생했을 때 이미지의 src 속성값을 바꿉니다. 코드 우리집 강아지 귀여워 ocument.querySelector(".container .img")를 사용하여 HTML 문서의 이미지 요소를 선택합니다. 이 요소는 클..

자바스크립트 문자열 자바스크립트에서는 간단한 테스트를 처리하기 위해 문자열 유형을 자주 사용합니다. 이번 글에서는 자바스크립트에서 문자열을 다루는 방법에 대해 살펴보겠습니다. 원시 유형과 객체 단순히 값만 가지고 있을 경우에는 '원시 유형'이고 프로퍼티와 메서드를 가지고 있을 때는 '객체'라고 합니다. 그런데 사실 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 문자열을 만들 때 다음의 소스처럼 간단히 변수에 문자열을 할당한 후 length라는 프로퍼티를 사용하면, str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length라는 프로퍼티를 사용할 수 있습니다. let str = "hello" str.length // 5 자바스크립트에서는 number와 boolean..

사이트 만들기 1. 헤더(header) 영역 웹 사이트의 맨 위쪽에 위치하는 영역으로, 일반적으로 로고, 메뉴, 검색창 등이 포함됩니다. 보통 헤더 영역은 모든 페이지에서 고정되어 있으며, 사용자가 사이트를 이용하는 동안 어디에 있더라도 항상 쉽게 접근할 수 있도록 디자인됩니다. 2. 슬라이드(slider) 영역 (https://seolheeone.tistory.com/42) 웹 사이트에서 대개 이미지나 동영상 등을 보여주는 컨텐츠를 표시하는 영역입니다. 슬라이드 영역은 웹 사이트의 주요 내용을 시각적으로 강조하기 위해 자주 사용됩니다. 3. 이미지(image) 영역 (https://seolheeone.tistory.com/36) 웹 페이지에서 이미지를 보여주는 영역입니다. 이미지는 웹 페이지에서 중요한..

자바스크립트 퀴즈(Quiz) 사이트 만들기 이번에 만들어 본 퀴즈 사이트는 객관식(슬라이드) 확인하기(여러문제) 유형입니다. 한번 풀어보세요! 마지막 문제까지 풀면 하단에 점수와 맞힌 개수가 나옵니다! 퀴즈 사이트 코드 Quiz 객관식(슬라이드) 확인하기(여러문제) 유형 1 2 3 4 5 5-1 6 😇정답입니다! 😈틀렸습니다! 다음 문제 ??점 💛 총 ❔개 💛 이번에 만든 사이트는 전에 만들어 본 퀴즈 사이트들과 다르게 남은 문제의 수를 보여주게 만들었습니다. 그리고 점수와 다 풀고 맞힌 개수도 보여주게 만들었습니다. script 코드 quizInfo quizInfo는 시험 문제들의 정보를 담은 배열입니다. 각 문제는 문제 유형(infoType), 시험 시기(infoTime), 문제 번호(infoNumb..

HTML CSS *, *::before, *::after { box-sizing: bolder-box; } html,body { height: 100%; } body { display: grid; align-items: center; justify-content: center; margin: 0; background-color: #000; } div { width: 300px; height: 300px; border-radius: 50%; box-shadow: 0 0 20px #fff, -20px 0 80px #f0f, 20px 0 80px #0ff, inset 0 0 50px #f0f, inset -50px 0 80px #0ff, inset 50px 0 300px #f0f, inset -50px 0 3..

자바스크립트 테스트 자바스크립트 테스트 문제와 정답을 정리하고 틀린 문제는 풀이를 해보자 01. 다음의 결괏값을 작성하시오. { const str = "javascript refercence"; str.indexOf("javascript"); str.indexOf("javascripts"); str.indexOf("j"); str.indexOf("J"); str.indexOf("a"); str.indexOf("ja"); str.indexOf("jv"); str.indexOf("refercence"); str.indexOf("r"); str.indexOf("re"); str.indexOf("javascript", 0); str.indexOf("javascript", 1); str.indexOf("refer..