Lumpy Space Princess - Adventure Time

분류 전체보기 88

일기

오늘도 피곤한 하루였다. 피로가 풀리면 좋겠다. 날씨가 좋아서 기분이 조금 나아졌다. 추운 건 너무 싫다. 낮에 밖에서 시간을 보내지는 못했지만 잠깐씩 만끽한 날씨가 따뜻해서 마음에 들었다. 수업 시간에 여러 가지를 배우다보니 자꾸 헷갈린다. 그래서 배웠던 것임에도 불구하고 내가 배운 적이 정말 있는 것인지 의심이 간다. 그 와중에 기억하는 것들이 있다는 게 신기할 정도이다. 이런식으로 기억을 잘 못 하는 내 모습을 마주할 때면, 답답해서 짜증이 난다. 그래도 반복하다보면 정보가 쌓여서 기억에 남을 것도 같다. 조별 작업을 했다. 이번에는 피그마로 만들었던 디자인 시안들을 html 로 만들어서 구현해봤다. 제작 과정에 참여했기 때문인지 만들어가면서도 신기하다. 이게 정말로 웹 사이트라는 결과물로 이어지는..

CODING 2023.05.02

슬라이드 유형 만들기

설명: 해당 페이지의 탭 메뉴를 만든 script 에 대해서 설명하겠습니다. script const navItems = document.querySelectorAll(".nav > ul > li"); navItems.forEach((item) => { item.addEventListener("mouseover", () => { const subMenu = item.querySelector(".submenu"); const allSubMenus = document.querySelectorAll(".submenu"); // 모든 서브메뉴를 보이게 하기 allSubMenus.forEach((menu) => { menu.style.display = "block"; }); // 현재 아이템의 서브메뉴만 숨기지 않..

JAVASCRIPT 2023.04.30

Web design 연습 - layout 만들기

설명: 위와 같이 website 를 만들기 위한 layout 연습을 했습니다. style sheet 를 어떻게 썼는지 설명하겠습니다. style sheet * { margin: 0; padding: 0; } a { text-decoration: none; color: black; } li { list-style: none; } #wrap { width: 1200px; height: 700px; margin: 0 auto; text-align: center; flex-wrap: wrap; } #header { background-color: #f6d6d6; display: flex; } #header h1 { width: 30%; height: 100px; border-right: 1px dashed #0..

CSS 2023.04.29

Javascript Test 09 오답 정리

Javascript Test 틀린 문제 위주로 풀이를 쓰겠습니다. 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) } 답: 129 🗒️풀이: i 의 값이 0, sum 의 값이 0으로 정해져 있습니다. 두 변수를 이용해서 while 조건문과 if 문을 사용해서 sum 의 값을 구하는 식입니다. i 의 값이 0 부터 9의 정수로 조건식이 걸려있는데, 이 때 i 는 1씩 증가시킵니다. 결과적으로 i sms 1 부터 10의 정수를 조건식으로 가집니다. 이 값들을 if..

CODING 2023.04.28

Game Effect 01 - music player설정에 대해 알아보자

설명: 지난 번 게임효과 게시글에서는 화면 구현에 대한 설명을 했습니다. 이번에는 구현한 화면이 정말로 실행이 되어, 음악을 재생할 수 있드록 설정했습니다. html 파일이 아닌, js 파일에 설정했습니다. 설명은 이 js 파일을 토대로 하겠습니다. music.js const allMusic = [ { name : "1. Rain on me", artist : "Lady Gaga(ft Ariana Grande)", img : "music_view01", audio: "music_audio01" }, { name : "2. Juicy", artist : "Doja Cat", img : "music_view02", audio: "music_audio02" }, { name : "3. My hair", art..

JAVASCRIPT 2023.04.27

Game Effect 01 - 게임 효과에 대해서 알아보자

설명: 보이는 것처럼 게임 효과를 활용해서 페이지를 만들어 봤습니다. css 는 따로 설명하지 않고, body 의 footer 와 script 를 나누어서 설명하겠습니다. body 의 footer 현재 맥을 사용하고 있으면, 화면 크기는 1920 x 760 입니다. footer 에는 별다른 설정을 하지 않았습니다. script 에서 함수식을 활용해서 화면 크기를 구현하는 설정을 했습니다. script jquery 와 gsap 를 이용했습니다. jQuery는 HTML의 클라이언트 사이드 스크립팅을 간편하게 만드는 인기 있는 JavaScript 라이브러리입니다. 다양한 기능과 유용한 메서드를 제공하여 웹 개발을 더욱 효율적이고 쉽게 할 수 있도록 도와줍니다. GSAP (GreenSock Animation P..

JAVASCRIPT 2023.04.24

Website 만들기 개인 디자인 시안

Figma 로 구현한 사이트 디자인 설명: figma 로 팀프로젝트 웹사이트의 디자인을 만들어봤습다. 스크롤을 내리면서 고정되어 있는 헤더나 설명이 쓰여있는 부분은 구현해내지 못했습니다. 그 외에도 다른 페이지에 나오는 모습은 여기에 담겨있지 않지만 비슷한 디자인에 기능을 추가할 생각입니다. 참고한 사이트 목록 https://www.adidas.co.kr/ adidas Official Website | adidas KR Shop for adidas shoes, clothing and collections, adidas Originals, Running, Football, Training and more on the official adidas KR website. www.adidas.co.kr https..

CODING 2023.04.23

문자열 객체에 대해서 알아보자

문자열 객체 문자열 객체(String Object)는 문자열 데이터를 나타내는 객체입니다. 문자열은 일련의 문자를 포함하며, 문자열 객체는 이러한 문자열 데이터를 생성, 저장 및 조작하는 데 사용됩니다. 자바스크립트에서는 문자열 객체가 내장된 String 클래스의 인스턴스입니다. 이러한 객체를 만들려면 따옴표나 쌍따옴표로 둘러싸인 문자열 리터럴을 사용하거나, String 클래스의 생성자를 사용하여 새로운 문자열 객체를 만들 수 있습니다. 문자열 객체는 문자열 데이터를 다루는 다양한 기능을 제공합니다. 예를 들어, 문자열 객체의 메서드를 사용하여 문자열을 자르거나 붙이거나 대문자로 바꾸는 등의 작업을 수행할 수 있습니다. 🐇at() const str = '👨‍👩‍👦'; console.log(str.at(0..

JAVASCRIPT 2023.04.22

JS 와 SQL test 08

JS 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) 02. 다음의 결괏값을 작성하시오. let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; } console.log(max, min); 03. 다음의 결괏값을 작성하시오. function func(begin, diff, n){ cnt =..

CODING 2023.04.21

Parallax Effect 를 적용한 사이트 만들기

설명: 패럴랙스 효과를 이용해서 사이트를 간단하게 만들어 봤습니다. 스크롤을 내리면 효과가 적용이 되는 것을 알 수 있습니다. 왼쪽 상단에는 스크롤의 값이 숫자로 나오게 설정했습니다. 설명은 style, body 그리고 script 로 나눠서 하겠습니다. style @font-face { font-family: 'ReciaSerifDisplay'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/recia/ReciaSerifDisplay.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/recia/ReciaSerifDisplay.eot?..

JAVASCRIPT 2023.04.20

회원가입과 로그인 창에 대해서 알아보자

설명: php 를 이용해서 사이트를 만들어 봤습니다. PHP는 서버 측에서 실행되는 스크립트 언어로, 동적 웹 사이트 및 웹 애플리케이션 개발에 사용됩니다. PHP는 HTML에 내장되어 있을 수 있으며, 데이터베이스와 상호 작용하고, 사용자 입력 처리 및 파일 업로드와 같은 작업을 수행할 수 있습니다. PHP는 오픈 소스이며, 많은 개발자들이 커뮤니티를 통해 개발에 참여하고 있습니다. PHP는 다양한 운영 체제에서 사용할 수 있으며, 웹 서버에서 지원되는 대부분의 프로그래밍 언어와 함께 사용됩니다. PHP는 다양한 웹 프로그래밍 기술을 지원합니다. 예를 들어, PHP는 데이터베이스와의 상호 작용에 사용되는 MySQL, PostgreSQL 및 Oracle과 같은 데이터베이스를 지원합니다. 또한, PHP는 ..

PHP 2023.04.19

Parallax Effect 01 - 메뉴 효과에 대해서 알아보자

설명: Parallax effect(피럴랙스 효과)는 물체의 움직임에 따라 시차가 발생하여, 같은 물체를 보는 관찰자들이 서로 다른 시각적인 경험을 하는 현상을 말합니다. 쉽게 말해, 우리 눈 앞에 있는 두 개의 물체가 서로 다른 거리에 위치해 있을 때, 더 가까이 있는 물체는 더 빨리 움직이는 것처럼 보이고, 더 멀리 있는 물체는 더 느리게 움직이는 것처럼 보입니다. 이 효과를 적용해보겠습니다. body 의 main 과 좌측 하단에 있는 aside 그리고 script 로 나눠서 설명하겠습니다. body 의 main 01 Section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 Section2 산을 움직이려 하는 이는 작은 돌을 들어내는 일로 시작한다. 03 Section3 높은 목표를 세..

JAVASCRIPT 2023.04.18

JS Assignment Quiz background image

설명: quiz 1 번의 배경화면을 사진을 넣어서 10초마다 명언과 함께 바뀌도록 설정했습니다. body 의 구조는 동일하기 때문에 따로 설명하지 않겠습니다. style 과 script 를 나눠서 설명하겠습니다. style @font-face { font-family: 'UhBeemysen'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeemysen.woff') format('woff'); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; } body { background-repeat: no-repeat; background-size: c..

CODING 2023.04.17

JS Assignment Quiz 2

설명: 자동으로 복권 번호를 생성해 주는 코드를 짜려고 하는데, 번호가 중복되면 안되므로 set 을 이용하고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출하는 코드를 짜봤습니다. code 로또 번호 생성기 click 🥖style font-family 로 가져온 글씨체를 적용하고, 글씨의 크기와 위치를 설정했습니다. 배경색과 글씨색도 설정하고, 클릭 버튼의 크기와 위치도 설정했습니다. 박스 안에 들어있는 글자의 세로 위치를 정하고 싶을 때에는 몇 가지의 방법이 있습니다. 1줄 텍스트 : 박스 높이와 line-height 의 줄 높이를 같게 설정하기 3줄 텍스트 : padding-top 을 설정하고 그 값만큼 박스의 높이를 빼서 재설정하기 3줄 텍스트 : box-sizing 를..

CODING 2023.04.16

Slider Effect 07 - 썸네일 슬라이드의 버튼과 닷메뉴에 대해서 알아보자

설명: 이미지 위에 썸네일을 띄웠습니다. 왼쪽과 오른쪽에는 preview 버튼과 next 버튼을 만들어서 각자 클릭했을 때 해당하는 이미지가 순서대로 나오도록 설정했습니다. body 의 main 와 script 로 나눠서 설명하겠습니다. body 의 main prev next body 의 구조는 간단합니다. 이미지 전체가 나오는 영역을 slider__img 로 정하고, 썸네일과 버튼의 영역도 각각 slider__thumb, slider__btn 로 정했습니다. 이미지의 왼쪽과 오른쪽에 위치한 preview 와 next 버튼도 각각의 class를 정했습니다. script //선택자 let images = [ "./img/sliderEffect06-min.jpg", "./img/sliderEffect07-m..

JAVASCRIPT 2023.04.14

Slider Effect 06 - 이미지 슬라이드의 버튼과 닷메뉴에 대해서 알아보자

설명: 버튼은 페이지의 왼쪽과 오른쪽에 있는 preview 와 next 버튼을 말하고, 닷메뉴는 페이지의 하단에 위치한 다섯 개의 동그란 메뉴를 말합니다. 각각의 버튼과 닷메뉴를 누르면, 이미지가 이동하면서 누른 순서와 방향대로 보여집니다. body 의 main 과 script 로 나눠서 보여드리겠습니다. body 의 main prev next 각 이미지에 class 를 부여해서 해당하는 순서의 닷메뉴를 누르면, 그 이미지가 보일 수 있도록 했습니다. script //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 ..

JAVASCRIPT 2023.04.13

Slider Effect 05 - 연속으로 위로 움직이기에 대해서 알아보자

설명: 이번에는 연속으로 위로 움직이는 슬라이드 효과를 만들어 봤습니다. 왼쪽으로 움직이는 슬라이드 효과와 다른 점이 몇 가지 없습니다. 간략하게 설명하면, 움직이는 축을 가로 즉, x 축에서 세로인 y 축으로 바꾸면 됩니다. 그렇게 바꾼 축을 실행하려면, 스타일 시트에서 한 display : flex; 설정을 해제하고, 선택자 중에서 이미의 가로 값을 세로 값으로 바꿔서 쓰면 됩니다. 스타일 시트, 선택자, javascript, gsap 그리고 jquery 를 순서대로 설명하겠습니다. style /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: c..

JAVASCRIPT 2023.04.12

Slider Effect 04 - 왼쪽으로 연속적으로 움직이기에 대해서 알아보자

javascript sliderInner.appendChild(sliderClone); function sliderEffect(){ currentIndex++; sliderInner.style.transition = "all 0.6s"; sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)"; //마지막 이미지에 위치했을 때 if(currentIndex == sliderCount){ setTimeout(() => { sliderInner.style.transition = "0s"; sliderInner.style.transform = "translateX(0px)"; }, 700); currentIndex = 0; }..

JAVASCRIPT 2023.04.11

Slider Effect 03 - 위쪽으로 움직이기에 대해 알아보자

이번에는 위로 움직이는 슬라이드를 만들어 봤습니다. 왼쪽으로 움직이는 슬라이드는 X축을 중심으로 움직였습니다. 따라서 이번 슬라이드 효과는 Y축을 중심으로 움직인다는 것을 우츄할 수 있습니다. 그렇기 때문에 지난 번과 별로 다른 것이 없습니다. 공통된 style 부분과 선택자 부분은 생략하겠습니다. script - javascript sliderInner.style.transition = "all 0.6s"; setInterval(() => { currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 0 ... sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)"..

JAVASCRIPT 2023.04.10

Slider Effect 02 - 왼쪽으로 움직이기에 대해 알아보자

이미지가 옆으로 움직이는 슬라이드 효과를 만들어 봤습니다. style 부분과 body 의 main 부분이 동일하니, 이번에는 생략하겠습니다. javascript 와 gsap 그리고 jquery 의 세 가지 방식으로 써봤습니다. 선택자는 동일하게 적용되었기 때문에 따로 쓰자면, //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역 const slider = sliderWrap.querySe..

JAVASCRIPT 2023.04.10

Slider Effect 01 - 슬라이드 효과에 대해 알아보자

기본적인 슬라이드 트랜지션 효과에 대해서 알아보겠습니다. body 의 main main 은 보이는 것처럼 간단합니다. 슬라이드에 들어갈 이미지를 slider__wrap 과 slider__img 라는 div 박스에 넣어서 묶었습니다. style 이미지를 가운데로 옮겨주고, 크기를 800 * 450 으로 정했습니다. 이미지가 바뀔 때 0.3 초가 걸리도록 했습니다. ::before 가상 요소를 설정해서 이미지마다 '이미지+번호'를 적었습니다. script - javascript //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); cons..

JAVASCRIPT 2023.04.10

정보처리기능사 기출문제 오답정리

2011년 10월 9일 필기 기출문제입니다. 1. 입출력 조작의 시간과 중앙처리장치의 처리시간과의 불균형 을 보완하는 것은? ❶ 채널장치 ② 제어장치 ③ 터미널장치 ④ 콘솔장치 해설: 채중입 : 채널은 중앙처리장치와 입출력장치 사이에 존재하며 서로의 속도 차이를 보완합니다. 2. 명령어 형식(instruction format)에서 첫 번째 바이트에 기억 되는 것은? ① operand ② length ③ question mark ❹ opcode 해설: 명령어의 구성명령어 코드부 + 주소부 (한글), OP-code + Operand (영문) 3. 반가산기(Half-Adder)의 논리회로도에서 자리올림이 발생하 는 회로는? ① OR ② NOT ③ ExclusiveOR ❹ AND 해설: 반가산기 구성: S = ..

CODING 2023.04.09

웹디자인기능사 기출문제 오답정리

2015년 7월 19일 필기 기출문제입니다. 1. 색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? ❶ 명도대비 ② 색상대비 ③ 보색대비 ④ 채도대비 해설: 명도대비:명도가 다른 두 색의 영향에 의해 명도차가 다르게 지각되는 현상. 주위 색에 따라 더욱 밝게 느껴지거나 더욱 어둡게 느껴짐. ex) 흰바탕에 회색 점/검은바탕에 회색 점동시대비 중 가장 예민하게 작용함. 2. 색의 주목성에 대한 설명으로 옳지 않은 것은? ① 명시도가 높으면 색의 주목성이 높다. ② 채도 차이가 클수록 주목성이 높다. ③ 빨강은 초록보다 주목성이 높다. ❹ 명도와 채도가 낮은 색이 주목성이 높다. 해설: 명도와 채도가 낮으면 주목성도 함께 낮아진다. 3. 디자인의 원리 중 비례에 대한 설명이 잘못된 것은? ..

CODING 2023.04.09

정보처리기능사 기출문제 오답정리

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

CODING 2023.04.09

Illustrator 로 그림 따라서 그려보기

일러스트레이터를 처음으로 사용해봤다. 익숙해지려면 많이 연습해보는 수 밖에 없는 것 같다. 라인을 따라서 그려보는데 엉성한 라인이 나온 결과물을 보니, 웃음이 절로 나왔다. 어렸을 때 그림판에서 그려보던 것과 비슷한 모양이 웃겨서 웃었다. 일러스트레이터에 원하는 이미지를 넣고서 새로운 파일을 A4 용지 사이즈로 열어서 작업을 했다. pen tool 로 라인을 따고, live paint 로 색을 입히고, 명암을 넣었다. 토끼 따라 그리기 아빠 토끼와 애기 토끼인 것 같은 그림이다. 라인도 엉성하고 굵기도 엉성하다. 애기 토끼의 얼굴이 찌그러져서 덜 귀여워졌다. 색과 명암을 입혀봤는데, 애기 토끼는 하다가 도중에 실수를 해서 명암이 제대로 들어가지 않았다. 아쉬웠지만 다시 생각해보니 라인부터 엉성했기에 결과..

CODING 2023.04.06

Quiz Effect 07 - 객관식 확인하기 CBT 카드 유형에 대해 알아보자 3

지난 번에 이어서 추가한 내용들을 위주로 보여드리겠습니다. 점수 결과 표시 //정답 확인 const answerQuiz = () => { const cbtSelects = document.querySelectorAll(".cbt__selects"); let correctCount = 0; // 맞힌 문제 수를 저장할 변수 questionAll.forEach((question, number) => { const quizSelectsWrap = cbtSelects[number]; const userSelector = `input[name=select${number}]:checked`; const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}..

JAVASCRIPT 2023.04.05