아라의 WWW

오늘은 재생바와 컨트롤 버튼을 활성화 하였습니다. 재생버튼, 일시정지 버튼 이전곡 버튼 다음곡버튼으로 곡재생을 하였고 기본적으로 전체 재생을 주었으므로 마지막 곡이 재생되면 다시 돌아가 곡이 재생됩니다. 마지막으로 뮤직 재생바라 활성화 되면서 재생바의 위치에 따라 곡의 위치와 곡의 진행도를 알 수 있습니다. // 재생 버튼 const playMusic = () =>{ musicWrap.classList.add("paused"); musicPlay.setAttribute("title","정지"); musicPlay.setAttribute("class","stop"); musicAudio.play(); } // 일시정지 버튼 const pauseMusic = () =>{ musicWrap.classList...

오늘은 게시판에 페이지에 숫자를 눌러서 움직이는 것을 구현하였습니다. 전체 게시판 웹디자이너, 웹퍼블리셔, 프론트앤드 개발자를 위한 게시판입니다. 관련된 문의 사항을 여기서 확인하세요! * 총 111 건의 게시물이 등록 되었습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수

오늘은 제가 한 미션을 정리하여 올리려고 합니다. 1. boardVeiw.php을 바로 들어갈때 생기는 오류 수정

html ARARA GAME WORLD 2023년 04월 24이 09시 30분 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 roading... : 마우스 커서를 나타내는 요소입니다. img 태그를 포함하고 있어 이미지를 표시하고 있습니다. : 웹 페이지의 헤더를 나타내는 요소입니다. h1 태그를 포함하고 있어 제목을 표시하고 있습니다. 또한 현재 시간을 나타내는 div 요소도 포함하고 있습니다. : 웹 페이지의 주요 콘텐츠를 나타내는 요소입니다. icon_box 클래스를 가진 div 요소를 포함하고 있습니다. : 아이콘 박스를 나타내는 요소입니다. icon1~icon4 클래스를 가진 div 요소를 포함하고 있으며, 각각의 아이콘과 텍스트를 표시하고 있습니다. : 웹 페이지의 푸터를 나타내는 요소입니다. d..

Planty는 반려 식물을 선택하고 가까이하고 오래 키울수 있도록 돕는 사이트 입니다. 식물과 관련된 사이트인 만큼 초록색과 식물들이 주를 이룹니다 디자인 시안 레퍼런스 선택 참고사이트 https://www.behance.net/gallery/166622889/GIZMO-furniture-store https://www.behance.net/gallery/104928597/ALEXACHUNG https://www.behance.net/gallery/104660787/Rijksmuseum https://www.behance.net/gallery/97410083/Miravel https://www.behance.net/gallery/168885305/Landing-page-dlja-studii-manikju..

at() ()안에 숫자를 index로 받아 문자열에 해당 되는 인덱스의 요소를 반환합니다. 배열에도 사용가능하며 정수값을 받아 utf-16코드 단위로 구성된 새 string을 반환 "Live positive".at("3"); // e "Live positive".at("6"); // o(띄여쓰기 무시) "Live positive".at("10"); // i "Live positive".at("20"); // undefined "Live positive".at("-3"); // i "Live positive".at("-6"); // s "Live positive".at("-10"); // e(띄여쓰기 무시) "Live positive".at("-20"); // undefined "Live positive"..

MY SQL 03. SQL문의 빈칸을 완성하시오. [성적] 테이블에서 점수가 90점 이상 95점 이하인 '컴퓨터공학과' 학생의 정보를 검색한 SQL문을 작성하시오. SELECT * FROM 성적 WHERE (점수 _____ 90 _____ 95) AND 학과 = '컴퓨터공학과'; 답 : Between And 06. SQL문의 빈칸을 완성하시오. [학생] 테이블에서 '주소' 속성을 추가하는 SQL문을 작성하시오. _____ TABLE 학생 _____ 주소 VARCHAR(20) 답 : Alter add 기능사 주관식 01. 다음 빈칸의 내용을 작성하시오. ( ① ) : 물리(Physics) 계층에서 데이터 전송을 하기 위해 사용하는 데이터 단위 ( ② ) : 네트워크(Network) 계층에서 데이터 전송을 ..

01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } i i % 3 == 0(-) i % 3 == 1(+) i % 3 == 2(*) sum 1 +1 1 2 *2 2 3 -3 -1 4 +4 3 5 *5 15 6 -6 9 7 +7 16 8 *8 128 9 -9 119 10 +10 129 답 : 129 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; fo..

오늘은 플러그인을 사용하여 스크롤을 내릴수록 애니메이션이 진행되는 효과를 주었습니다. 미리 말씀드리지만 소스가 길어요😂 css *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'ReciaSerifDisplay'; } body { height: 20000px; background-color: #E0E4DD; } .scrollTop { position: fixed; left: 10px; top: 10px; z-index: 1000; width: 40px; height: 40px; color: #fff; text-align: center; font-size: 14px; line-height: 40px; background-color: rgba(0..

오늘은 php을 통해 실시간으로 홈페이지를 만들고 수정합니다. 이때 데이터 베이스에 값을 저장하여 진짜 회원가입하고 로그인까지 하는 것을 구현하였습니다. join.php 회원가입을 해주시면 다양한 정보를 자유롭게 볼수 있습니다. 회원가입 회원가입 영역 이메일 이름 비밀번호 비밀번호확인 연락처 회원가입 완료 이 HTML 코드는 회원가입 페이지를 만드는 코드입니다. 페이지에는 회원가입을 유도하는 이미지와 메시지, 이메일, 이름, 비밀번호, 비밀번호 확인, 연락처 등 회원가입에 필요한 정보를 입력할 수 있는 폼이 포함되어 있습니다. 폼은 "joinsave.php" 라는 PHP 스크립트를 통해 전송됩니다. 또한, 이 코드는 웹사이트의 공통적인 요소들을 포함하는 다른 PHP 파일을 include하여 사용합니다. ..

HTML Javascript parallax Effect01 페럴랙스 이펙트 : 메뉴효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 sectin1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 sectin2 미래는 두려움의 존재가 아니라 우리가 개척해나아가야 할 존재이다. 03 sectin 모든 것이 현재에 달려 있다. 04 sectin4 과거는 과거일 뿐 더 이상 돌아갈 수 없다. 05 sectin5 현재에 느끼는 어떠한 감정도 과거에 존재했던 어느 한 시점에 영향을 미치지 못한다. 06 sectin6 사람은 태어날 때 부터 꿈을 안고 태어난다. 07 sectin7 현실에 잠시 묻혀있을 뿐이다. 08 sectin8 아무 생각 없이 사는 인생은..

이번은 명언이 10초에 한번씩 랜덤으로 바뀌는 스크립트를 짰던것을 이번엔 unsplish api을 활용하여 랜덤으로 배경이미지 변경되는 스크립트를 추가하였습니다. 그에 맞게 css도 수정하였습니다. CSS * { margin: 0; padding: 0; /* background-color: #000; */ } body { background-size: cover; background-repeat: no-repeat; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } body::before { content: ''; position: absolute; left: 0;top: 0; width: 1..

이번 마무리 문제는 로또번호처럼 6개의 숫자를 중복없이 랜덤으로 받아오는 코드를 짜는 것입니다. CSS * { margin: 0; padding: 0; } input { border-style: none; } body { width: 100%; height: 100vh; } .numgen__wrap { position: relative; top: 250px; display: flex; justify-content: center; } .numgen { width: 800px; /* height: 500px; */ background-color: #fff; display: block; box-shadow: 0 0 20px rgba(95, 120, 161, 0.4); border-radius: 10px; } ..

이번 마무리 문제는 명언이 10초에 한번씩 랜덤으로 바뀌는 스크립트를 짜는 것입니다. CSS * { margin: 0; padding: 0; /* background-color: #000; */ } body { background-image: url(https://images.unsplash.com/photo-1496264057429-6a331647b69e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80); background-size: cover; background-repeat: no-repeat; } body::before { content: ''; position: abs..

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3,4,5번과 다르게 자바스크립트만 적습니다. HTML Javascript slider Effect06 슬라이드 이펙트06 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next jo0132@naver.com : 헤더 요소로 제목과 설명을 포함하고 있습니다. : 제목을 나타내는 제목 요소입니다. : 설명을 나타내는 단락 요소입니다. : 순서 없는 목록 요소로, 다른 페이지로 이동할 수 있는 링크들을 포함하고 있습니다. : 각각의 목록 항목을 나타내는 리스트 요소입니다. : 링크를 나타내는 앵커 요소입니다. : 메인 컨텐츠를 감싸는 메인 요소입니다. : 슬..

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3,4,5번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 모두 올리니 차이점을 확인해 보시길 바랍니다 HTML Javascript slider Effect06 슬라이드 이펙트06 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next jo0132@naver.com 헤더 부분에는 제목과 설명이 포함된 h1, p, 그리고 ul 태그가 있습니다. ul 태그 안에는 이미지 슬라이드의 다른 페이지로 연결되는 링크가 포함되어 있습니다. 메인 부분에는 이미지 슬라이드가 표시되는 영역이 구성되어 있습니다. slider__img와 sli..

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 모두 올리니 차이점을 확인해 보시길 바랍니다 HTML Javascript slider Effect05 슬라이드 이펙트05 : 아래에서 위로로 움직이기(연속적으로) 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { wi..

이미지를 여러개 배치하여 움직이게 하며 연속으로 옆으로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 모두 올리니 차이점을 확인해 보시길 바랍니다 HTML Javascript slider Effect04 슬라이드 이펙트04 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { width: 100%..

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다. HTML Javascript slider Effect02 슬라이드 이펙트02 : 좌로 움직이기 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 ..

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다. HTML Javascript slider Effect02 슬라이드 이펙트02 : 좌로 움직이기 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 ..

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다. HTML Javascript slider Effect01 슬라이드 이펙트01 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 이미지를 단독으로 사용하지 않고 .slider의 div를 사용하여 효과를 부여합니다. CSS .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; ..

10. ASCII 코드에 대한 설명으로 잘못된 것은? ① 3개의 Zone비트를 가지고 있다. ② 16비트 코드로 미국 표준협회에서 개발하였다. ③ 통신 제어용으로 사용한다. ④ 128가지의 문자를 표현한다. 답 : ② 16비트 코드로 미국 표준협회에서 개발하였다. 해설 ASCII 코드는 7비트로 구성되어 있어서 총 128가지의 문자를 표현할수 있습니다. 대표적인 16비트 코드는 유니코드입니다 13. 제어장치의 기능에 대한 설명으로 틀린 것은? ① 산술 및 논리연산을 실행하는 장치이다. ② 입·출력장치를 제어한다. ③ 주기억장치에 기억된 명령을 꺼내어 해독한다. ④ 프로그램카운터와 명령레지스터를 이용하여 명령어 처리순서를 제어한다. 답 : ① 산술 및 논리연산을 실행하는 장치이다. 해설 산술 및 논리연산을..

1. 현재 수행 중에 있는 명령어 코드(Code)를 저장하고 있는 임 시 저장 장치는? ① 인덱스 레지스터(Index Register) ② 명령 레지스터(Instruction Register) ③ 누산기(Accumulator) ④ 메모리 레지스터(Memory Register) 답 : ② 명령 레지스터(Instruction Register) 해설: 가. 인덱스 레지스터(Index Register) : 특정한 값을 주소와 계산하여 새로운 주소를 만드는 방법 나. 명령 레지스터(Instruction Register) : 현재 실행중인 명령 을 기억하는 레지스터 다..누산기(Accumulator) : 연산된 결과를 기억하는 레지스터 라. 메모리 레지스터(Memory Register) :메모리 레지스터는 실제는 ..

1. 입/출력장치와 주기억 장치 사이에 위치하여 데이터 처리속도의 차이를 줄이는데 도움이 되는 장치는? ① 입/출력 채널 ② 명령해독기 ③ 연산장치 ④ 인덱스레지스터 답 : ① 입/출력 채널 해설 : 채중입 : 채널은 중앙처리장치와 입출력 장치 사이에서 데이 터 처리 속도 차이를 보완해 줍니다. 2. 다음과 같은 계산에 의해 주소를 지정하는 방식은? 유효번지 = 프로그램카운터(pc) + 주소부분(operand) ① 색인주소지정 ② 상대주소지정 ③ 베이스주소지정 ④ 절대주소지정 답 : ② 상대주소지정 해설 : 주소부분 + 프로그램카운터(PC) : 상대주소(Relative) 주소부분 + 인덱스 레지스터(Index) : 인덱스 주소방식 주소부분 + 베이스 레지스터(Base) : 베이스 주소방식 PC값을 더하는..

핀터레스트에서 컬러링아트 검색하다 찾았습니당😊 선생님이 주신 피일에는 토까가 있는데 토끼에 명암까지 넣어 서 한번 그러보았습니다! 토끼가 끝나면 핀터레스트에서 레퍼런스를 찾아 그립니다. 레퍼런스 찾기 라인 따라서 그리기 시간이 너무 많이 들어서 아직 다 못끝냈지만 아마 정처기 공부하다가 실증나면 그리지 않을까 싶어요!

어제와 비슷하지만 오늘 수정한 부분이 있어서 보충하고자 합니다. 점수 나오기(버튼 나오면 점수나오기) const answerQuiz = () => { const cbtHeaderScore = document.querySelector(".time_submit__score span") cbtHeaderScore.innerHTML = `총 ${Math.ceil((quizScore / questionLength)*100)}입니다!`; cbtScorebox.style.display = "block"; } 함수는 querySelector() 메서드를 사용하여 HTML 요소 중 클래스가 time_submit__score인 요소의 하위 요소인 span 요소를 선택하고, 해당 요소의 innerHTML 속성을 수정하여 퀴..

모달창 추가 html 기능사 시험 도전하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사 2009년 5회 정보처리기능사 2010년 2회 정보처리기능사 2010년 5회 정보처리기능사 2011년 1회 정보처리기능사 2011년 2회 정보처리기능사 2011년 4회 정보처리기능사 2011년 5회 ..

HTML 2020년 1회 정보처리기능사 기출문제 수험자 : 노지영 전체 문제수 : 문항 남은 문제수 : 문항 제출하기 59분 10초 태그를 사용하여, 퀴즈의 틀을 만드는데 사용됩니다. 여기서 퀴즈의 제목, 문제, 보기, OMR 카드 등이 들어갑니다. 태그를 사용하여, 객관식 문제의 보기를 만듭니다. type="radio" 속성을 사용하여, 라디오 버튼 형태로 만듭니다. 객관식 문제에서는 보기 중 하나만 선택할 수 있기 때문에, 라디오 버튼이 사용됩니다. 그리고 마지막으로 제출하기 버튼과 시간을 나타내는 부분이 들어갑니다. SCRIPT 우선const 를 사용하여 변수 cbt, cbtQuiz, cbtOmr, cbtSubmit를 선언합니다. 이 변수들은 이후 DOM 요소를 참조하는 데 사용됩니다. let 키워..

오늘은 웹디자인기능사 실기시험 연습을 해 보았습니다. html 즐길거리 요금/우대 혜택 판여프로그램 이용가이드 소통서비스 롯데 월드 소식 그럴씨진관 미라클2022.09.03 드림스테이지'히내 소중한 너'2022.09.03 '히내 소중한 너'음원 발매2022.09.03 이용요금 조정안내2022.09.03 더보기 특별한 경험 연간회원안내 프리미엄투어 공연참여프로그램 단체프로그램 서울 송파구 올림픽로 240 호텔롯데 롯데월드 | 대표자 : 박동기 사업자 등록 번호 : 2129-85-00014 | 통신판매업신고번호 | 송파 | 전화 : 1661-2000 COPYRIGHT 2018 LOTTEWORLD.ALL RIGHTSRESERVED 우선 header안에 로고와 네비게이션이 속해 있고 첫번째 section은 베너..

월요일부터 금요일까지 열심히 공부하고 나면 토요일은 매주 남자친구 만나는 날입니다! 원래 그냥 집에서 넷플릭스나 보려고 했는데 다음주에 비가 온다고 하니 비오기 전에 가야죠...ㅠ 안산 호수공원에 매년 가서 벚꽃을 보러 가는거 같아요 가보면 매년 사람이 많았는데 올해도 많더라구요 그래서 사진을찍다보면 사람이 계속나와서 여러번 찍은거같아요 저녁쯤 되니 사람들이 집으로 가서 한산해 지더라구요 그래도 저녁까지 넷플릭스보면서 노는 사람들도 있는데 저희는 그냥 밥먹으러 갔어요! 저녁먹고 하루에 10km걷기로 한게 있어서 남은거 걸으러 화랑유원직를 갔더니 벚꽃밑에 조명을 해놓았더라구요! 그래서 어떤 조명은 이쁜데 어떤 조명은 무서웠던거 같아요;; 파닥파닥ㅎ 산책로을 걷다보면 산책로에 벚꽃길이 되어서 이뻐서 찍엇는데..