Youna

메인페이지 피그마 제작 헤더 부분에 로고와 로그인과 메뉴 페이지가 있는데 아이콘을 넣었는데 함께 저장이 안돼서 대략 이런 아이콘을 쓸 예정입니다. 카테고리 아이콘 로그인 아이콘 그리고 메인 부분에는 베너 이미지로 이미지 슬라이드 효과로 오른쪽으로 넘어가면서 여러장의 이미지와 함께 유통기한 확인하러 가는 버튼과 피부타입테스트를 할 수 있는 버튼이 있을 예정입니다. 또한 큰 섹션을 잡아서 그 안에 전체적인 광고 느낌으로 배경이 있으면 마우스 이펙트 효과처럼 전체 배경은 고정되어있고 마우스를 내리면서 하나씩 광고같이 보이는 효과를 주며 푸터에서는 로고와 함께 바로 갈 수 있는 페이지를 연결하고 이메일을 적어둘 예정입니다. https://vinne.co.kr/?gclid=Cj0KCQjwi46iBhDyARIsA..

문자열 객체 자바스크립트에서 문자열은 문자들의 집합을 나타내는 데이터 타입입니다. 이러한 문자열 데이터를 다루기 위해 자바스크립트는 String객체를 제공합니다. String객체는 문자열을 생성하고 다양한 문자열 조작 기능을 제공합니다. at() at()메서드는 인덱스를 전달받아 해당 위치의 문자를 반환합니다. 만약 인데스 문자열 길이를 넘어선 경우 undefined를 반환합니다. let str = "hello"; console.log(str.at(1)); //e console.log(str.at(10)); //undefined at(1)은 문장열 hello 에서 인덱스 1의 위치에 있는 문자 e 를 반환합니다. at(10)은 문자열의 길이가 5이므로 해당 인덱스가 유효하지 않기 때문에 undefined..

정보처리 기능사 오답노트 01. SQL문의 빈칸을 완성하시오. [학생] 테이블에서 전화번호가 NULL 값이 아닌 학생명을 모두 검색하기 위한 SQL문의 작성하시오. SELECT 학생명 FROM 학생 WHERE 전화번호 _____; 정리 SELECT 테이블 FROM 테이블명 WHERE 조건문 형식입니다. NULL의 값이 아닌 문제를 불러올 때 IS NOT NULL을 사용합니다. 02. SQL문의 빈칸을 완성하시오. 사용자 "HWANG"에게 테이블을 생성할 수 있는 권한을 부여하기 위한 SQL문을 작성하시오. _____ CREATE TABLE _____ HWANG 정리 권한을 부여하는 SQL은GRANT FROM을 사용해줍니다. 03. SQL문의 빈칸을 완성하시오. [성적] 테이블에서 점수가 90점 이상 95..

페럴랙스 이펙트 오늘은 페럴랙스 이펙트로 인트로효과를 만들어 보았습니다. HTML

PHP 사이트 만들기 php를 사용해서 사이트를 만들어 보도록 하겠습니다. html과 php를 사용해서 사이트를 만들어볼 예정입니다. 먼저 피그마로 전체적인 사이트의 툴을 만들어 주었습니다. 그 후 MAMP를 켜서 php에 접속해서 들어갈 수 있도록 합니다. vscode를 열어서 html폴더를 열어서 assets폴더를 만들어 준 후 그 안에 css,img,js폴더를 만들어 줍니다. 그 안에 join,joinEnd,login,main html를 만들어 줍니다. 그리고 css폴더 안에 commons.css,fonts.css,intro.css,join.css,layout.css,login.css, resets.css,style.css,vars.css를 만들 어 줍니다. CSS 폴더 commons : 전체적인 ..

패럴랙스 이펙트 01 이미지가 부드럽게 움직이는 패럴랙스 효과를 이용해서 메뉴효과를 만들어 보았습니다. HTML Javascript parallaxEffect01 패럴렉스 이펙트 : 메뉴효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 용기를 가지되 허세는 부리지 말라. 02 Section2 세상은 변하지 않는다 우리가 변한다. 03 Section3 타인의 자존감을 높여주면 나의 인생이 반짝이게 된다. 04 Section4 내 기분은 나만 정할 수 있어. 오늘 나는 '행복'으로 정할래. 05 Section5 네 안을 들여다 보아라 넌 네가 생각하는 것보다 더 큰 존재다. 06 Section6 사랑이란 다른 사람이 원하는 것을 네가 원하는 ..

자바스크립트-마무리문제 자바스크립트 마무리 문제 중에 명언들이 10초마다 바뀌는데 이미지도 10초동안 함께 바뀔 수 있도로 꾸며 보았습니다! https://younajeong.tistory.com/72 스쳐가는 명언들 속에 내 명언을 찾아보자 자바스크립트 - 마무리문제 10초동안 스쳐가는 명언들을 스크립트를 사용해서 풀어보는 마무리 문제입니다. 마무리문제 먼저 새로운 폴더 안에 js파일과 html파일을 만들어 주었습니다. html파일 younajeong.tistory.com 이번에 역시 저번에 했던 형식과 비슷하게 코딩을 해 줄 예정입니다. HTML&CSS HTML&CSS 저번 형식과 똑같은 형식으로 result안에 img 태그를 추가하고 id에 image를 부여해줍니다. 10초동아 바뀌는 이미지 링크를..

로또 번호 생성하기 로또가 당첨될때 나오는 무작위한 번호들을 자바스크립트를 사용해서 번호들을 추출해보도록 하겠습니다. HTML & CSS 로또 당첨번호 행운이 당신에게 찾아오기를 추첨 HTML&CSS 먼저 HTML에서 contanier를 설정해서 그 안에 제목과 내용 그리고 button을 추가한 다음에 결과 값이 나올 수 있는 result도 만들어 줍니다. 전체적으로 CSS에서는 전체적인 글자 배치와 버튼 배치 폰트와 배경 그리고 글씨색상들을 부여해주었습니다. Javascript javascript 1개의 버튼 결과를 출력할 요소들을 선택자로 button과 #result를 선택하였습니다. 함수를 이용해서 lottoNumber 함수가 실행하도록 하였는데 set자료 구조를 이용해서 생성하게 하였습니다. fo..

자바스크립트 - 마무리문제 10초동안 스쳐가는 명언들을 스크립트를 사용해서 풀어보는 마무리 문제입니다. 마무리문제 먼저 새로운 폴더 안에 js파일과 html파일을 만들어 주었습니다. html파일에 선택자 Result,Quote,Author을 querySelector로 선택자를 만들어 주었습니다. fetch를 사용해서 js파일을 불러온 후 items라고 지정 후 json데이터를 파싱했습니다. Math()메서드를 사용해서 json데이터에 무작위 인용구를 선택하였습니다. 마지막으로 선택된 인용구와 저자를 textContent로 업데이트 하고 dataresult()를 호출해서 페이지가 로드될 때 무작위 인용구를 선택하도록 하였고 setInterval(dataresult, 10000)를 사용해서 10초마다 새 인..

슬라이드이펙트 07 - 버튼과 썸네일 만들어보기 슬라이드 이펙트 저번 시간에 이어서 버튼과 썸네일을 만들어서 움직일 수 있는 슬라이드 이펙트를 만들어 보았습니다. 버튼과 썸네일을 누를때마다 변하는 슬라이드 효과를 만들었습니다! HTML & CSS Javascript sliderEffect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next jeongyouna_@naver.com HTML&CSS HTML의 구조에서는 전체 main안ㅇ세 slider__wrap을 만들어 준 후 그 안에 img 와 thumb를 만들어 줍니다. 그리고 btn을 만들어서 그 안에 넘어갈 수 있는 버튼이 생길 수 있도록 이전버튼 prev와 다음버튼 next를 만들어 준 후 footer에..

슬라이드 이펙트06 -버튼과 닷메뉴를 사용해서 슬라이드를 움직여보기! 이번 슬라이드 이펙트는 버튼과 닷메뉴를 사용해서 슬라이드 왼쪽으로 움직여 볼 수 있도록 하겠습니다. HTML&CSS Javascript sliderEffect06 슬라이드 이펙트 : 좌로 움직이기(버튼, 닷메뉴) 1 2 3 4 5 6 7 HTML& CSS HTML구조에서 slider__btn 과 slider__dot을 추가해 줍니다. slider__btn안에 prev이전이미지와 next다음이미지로 넘어갈 수 있도록 구조를 만들어 줍니다. CSS로 넘어와서 btn과 dot에 필요한 속성들을 부여해서 btn은 양 사이드 가운데로 올 수 있으며 클릭할 때 바뀔 수 있도록 설정해 줍니다. dot은 동그랗게 만들어 준 후 가운데로 올 수 있도록..

슬라이드 이펙트 05 - 아래에서 위로 연속적으로 움직이는 효과! 저번 시간에 이어서 슬라이드가 아래에서 위로 연속적으로 움직일 수 있는 효과를 만들어 보았습니다! 저번에 만들었던 3번 효과를 참고하여서 함께 만들어 보도록 하겠습니다! https://younajeong.tistory.com/67 슬라이드 이펙트 03 - 아래에서 위로 올라오는 슬라이드 효과! 슬라이드 이펙트 03 아래에서 위로 올라오는 슬라이드 효과! 1,2번을 토대로 이번에는 아래에서 위로 올라는 슬라이드 효과를 주겠습니다! 이펙트 03번 같은 경우에는 02번의 HTML그대로 가져와서 C younajeong.tistory.com HTML& CSS Javascript sliderEffect05 슬라이드 이펙트 : 아래에서 위로 움직이기(..

슬라이드 이펙트 04 "왼쪽으로 연속적으로 움직이는 이미지 슬라이드 만들기" 슬라이드 이펙트 04번은 왼쪽으로 연속적으로 움지이는 이미지 슬라이드를 만들어 보았습니다. 저번에 만들었던 왼쪽으로 움직이는 슬라이드 이펙트 02번을 참고해서 이번에는 연속적으로 움직일 수 있는 슬라이드 이펙트를 사용해 보았습니다. 슬라이드 이펙트 02 참고하기 https://younajeong.tistory.com/66 슬라이드 이펙트02 - 좌에서 우로 넘어가는 이미지 슬라이드효과! 슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이 younajeong.tistory.com HTML & CSS ..

슬라이드 이펙트 03 아래에서 위로 올라오는 슬라이드 효과! 1,2번을 토대로 이번에는 아래에서 위로 올라는 슬라이드 효과를 주겠습니다! 이펙트 03번 같은 경우에는 02번의 HTML그대로 가져와서 CSS부분과 JAVASCRIT 부분을 조금씩 수정해주면 완성이 됩니다! 슬라이드 이펙트 02 보러가기 https://younajeong.tistory.com/66 슬라이드 이펙트02 - 좌에서 우로 넘어가는 이미지 슬라이드효과! 슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이 younajeong.tistory.com HTML & CSS Javascript sliderEffec..

슬라이드 이펙트 02 - 왼쪽에서 오른쪽으로 넘어가는 슬라이드효과 슬라이드 이펙트 01번과 다른느낌으로 이번에는 왼쪽에서 오른쪽으로 넘어가는 슬라이드 효과를 만들어 보았습니다! 슬라이드 이펙트01 참고하기 https://younajeong.tistory.com/65 슬라이드 이펙트 01 - 이미지를 하나씩 보이는 트렌지션 효과를 줬어요! 슬라이드 이펙트 01 : 트렌지션 효과 이미지 여러장을 하나씩 보일 수 있는 트렌지션 효과를 만들어 봤습니다! reset /* reset */ @import url('https://webfontworld.github.io/hallym/Hallym.css'); @import url('https://webfon younajeong.tistory.com HTML & CSS J..

슬라이드 이펙트 01 : 트렌지션 효과 이미지 여러장을 하나씩 보일 수 있는 트렌지션 효과를 만들어 봤습니다! reset /* reset */ @import url('https://webfontworld.github.io/hallym/Hallym.css'); @import url('https://webfontworld.github.io/suncheon/Suncheon.css'); @import url('https://webfontworld.github.io/Poppins/Poppins.css'); @import url('https://webfontworld.github.io/kt/YUniverse.css'); @import url('https://webfontworld.github.io/TheJamsil..

웹디자인 기능사 오답노트 2015년 7월 19일 웹디자인 기능사 오답노트 입니다. 01.색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? 1.명도대비 2.색상대비 3.보색대비 4.채도대비 정답:1 오답노트 명도대비:명도가 다른 두 색의 영향에 의해 명도차가 다르게 지각되는 현상. 주위 색에 따라 더욱 밝게 느껴지거나 더욱 어둡게 느껴짐. ex) 흰바탕에 회색 점/검은바탕에 회색 점동시대비 중 가장 예민하게 작용함. 색상대비: 어떤색이 다른색의 영향으로 인하여 실제 색과 다른색으로 보이는 대비 보색대비:색상환에서 서로 반대되는 색상끼리 배색되었을 때 얻어지는 대비 채도대비:주변에 놓여진 색의 정도에 따라 더 맑게, 탁하게 보여지는 대비 07.먼셀의 색체계에서 색상의 기본색을 10가지로 ..

정보처리 기능사 문제 오답노트 2011년 4월 17일 정보처리기능사 문제 오답노트 입니다. 01.현재 수행 중에 있는 명렁어 코드(Code)를 저장하고 있는 임시 저장 장치는? 1.인덱스 레지스터 2.명령 레지스터 3.누산기 4.메모리 레지스터 정답: 2 오답노트 인덱스 레지스터 : 주소의 변경, 서브루틴 연결 및 프로그램에서의 반복 연산의 횟수르 세는 레지스터 누산기 : 연산된 결과를 일시적으로 지정하는 레지스터로 연산의 중심이 됨 메모리 레지스터: 기억장치를 출입하는 데이터의 버지를 기억하는 레지스터 04.다음에 실행할 명령어의 번지를 기억하는 레지스터는? 1.Program Counter 2.Memory Address Register 3.Instrction Register 4.Processor Reg..

7번째 유형 보충설명 저번시간과 더불어 부족했던 부분들을 보충해서 퀴즈유형을 만들어 보았습니다. HTML 제출하기 59분 10초 수험자 : ooo 전체 문제수 : 23문항 남은 문제수 : 59문항 기능사 시험 기출문제 정보처리기능사 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회 정보처리..

퀴즈게임 CBT유형 여러개의 문제를 CBT유형으로 만들어 보았습니다. HTML Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 수험자 : 정유나 전체 문제수 : 60문항 남은 문제수 : 59문항 제출하기 59분 10초 HTML 지난 퀴즈들과 비슷하게 quiz__wrap을 만든 후 headr와 omr을 만들어 줍니다. header안에 cbt_cots와 quiz를 만들어 줍니다. 옆에 aside에 cbt__info 안에 title과 score을 만들어 줍니다. omr을 옆에 두기 위해 cbt_omr도 만들어 준 후 sumbit와 time을 만들어 줍니다. 주석으로 표시해준 부분은 스크립트를 사용해서 출력시켜주기 위해 주석으로 표시해 주었습니다. 자바스크립트 ..

자바스크립트 문제 풀이 자바스크립트를 사용해서 사진에서 마우스를 움직이면 사진이 바뀌는 효과와 버튼을 누르면 메뉴가 뜨는 문제를 풀이했습니다. 마무리문제 1 풀이 div 에 class로 wrap을 주고 난 후에 이미지 파일을 올려 두었습니다. const로 변수를 선언해서 선택자로 .wrap img를 선택했습니다. addEventListener를 사용해서 mouseover 효과를 준 후 선택자에서 mouse를 선택해서 img안에 src를 불러오고 이미지를 넣어두었습니다. mouseout도 mouseover와 동일하게 코드 진행을 하였습니다. 마무리문제 2 🦋 Javascript Typerscript Node.js 풀이 body에 button과 nav안에 ul,li태그를 사용해서 버튼과 메뉴안에 들어갈 리스..

자바스크립트 문자열 자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열을 유형을 자주 사용합니다. 원시 유형과 객체 단순히 값만 가지고 있을 경우를 '원시 유형'이라고 하고 프로퍼티와 메서드를 가지고 있을 때는 '객체'라고 했습니다. 자바스크립트 에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 예를들어 문자열을 만들 때 간단한 변수에 length라는 프로퍼티를 사용하게 되면 str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다. let str = "hello" str.length //5 또한 Number와 boolena, string 유형은 별도로 프로토차입 객체가 만들어져 있습니다. 즉 숫자는 Number, 문자열은 String 객체..

페이지 제작하기 페이지 제작할 때 만들었던 슬라이드 영역, 이미지 영역, 이미지/텍스트 영역, 카드영역, 배너영역, 텍스트 영역, 푸터영역을 가지고 미디어 쿼리를 적용시켜서 페이지를 제작해 보았습니다. 완성된 사이트 만들기 전에 준비할 폴더 & 파일 site1 (합쳐줄 사이트) assets, ico, img, js 폴더 만들어 준 후 index파일 만들기 HTML head 만들어 주기 index파일을 열어서 전체적인 구조를 잡아줍니다. 메타 태그를 사용해서 첫번재 메타 태그는 문자와 인코딩을 정의하고 두번째 태그는 internet Explorer의호환성 모드를 방지합니다. 세번째 태그는 뷰포트의 너비와 초기 배율을 정의할 수 있습니다. 메타 태그를 사용해서 검색엔진에 노출 될 수 있는 SEO를 설정해 줍..

See the Pen Untitled by younajeong (@younajeong) on CodePen. 코드펜을 사용해서 LED조명과 같은 효과를 만들어 보았습니다🌈

퀴즈 이펙트 06 이번 퀴즈 이펙트 효과에서는 저번 퀴즈 효과에서 객관식으로 모든 문제들이 나타나서 하나하나 클릭해서 정답을 확인했다면 이번에는 슬라이드 형식으로 답을 선택하고 다음으로 넘겨서 한 칸 안에서 여러 문제를 넘겨서 풀고 나면 점수와 맞힌 갯수를 확인 할 수 있는 유형입니다. HTML Quiz 객관식 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음문제 ??점 ?개 jeongyouna_@naver.com HTML구조 저번에 퀴즈 이펙트 5에서 사용한 코드를 javascript부분을 비워두고 그대로 HTML을 가져옵니다. 구조를 살펴보면 quiz__main안에 quiz__wrap을 두고 class= quiz를 만들어 준 후 header안에 title을..

자바스크립트 재시험 문제풀이 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("refercence", 0); str.indexOf("refercen..

퀴즈 이펙트 05 저번 문제에 이어서 여러 문제를 풀어볼 수 있는 퀴즈 이펙트 효과를 만들어 봤습니다. header의 내용들을 전체적으로 주석 처리를 해 준 후 자바스크립트를 사용해서 정답을 풀 수 있도록 하겠습니다. HTML Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 jeongyouna_@naver.com HTML 저번 퀴즈 4번에서 했던 코드를 그대로 가져옵니다. 하지만 스크립트로 내용을 출력해주기 위해서 div class__quiz부분을 주석 표시 해줍니다. CSS-reset @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/..

애니메이션 효과 코드펜을 사용해서 봄에 어울리는 벚꽃을 만들어 보았습니다. See the Pen Untitled by younajeong (@younajeong) on CodePen.

오답노트 자바스크립트 20문제 중 틀린문제를 오답노트로 정리했습니다. 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); } 오답노트 indexOf는 포함되어 있으면 1 포함이 되어있지 않으면 -1로 표시 됩니다. lastInexOf는 뒤에서 부터 인덱스 값을 불러 오는데 a가 인덱스 위치 3번째에 있으므로 3이라는 숫자를 불러옵니다. includes는 포함하고 있으면 ture 포함되어 있지 않으면..

검색 이펙트 검색 이펙트는 검색 결과가 노출되는 것 자체가 인지적 영향을 미치는 현상입니다. 검색 이펙트는 검색 엔진 결과 페이지에서 웹사이트가 노출되는 위치,타이틀,설명 등의 정보에 영향을 받습니다. 검색 이펙트는 사용자들이 검색을 할 때, 검색 결과 페이지에서 웹사이트가 노출되는 위치에 따라 사용자의 인지적인 영향을 받기 때문에 중요합니다. 상위 검색 결과에 노출될수록, 해당 웹사이트를 방문하는 사용자 수가 늘어나고,검색어에 대한 신뢰도가 높아집니다. HTML 자바스크립트 💛 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계..