Youna

자바스크립트-마무리문제 자바스크립트 마무리 문제 중에 명언들이 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..

자바스크립트 문제 풀이 자바스크립트를 사용해서 사진에서 마우스를 움직이면 사진이 바뀌는 효과와 버튼을 누르면 메뉴가 뜨는 문제를 풀이했습니다. 마무리문제 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 객체..

퀴즈 이펙트 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/..

푸터 유형 페이지에서 푸터 유형은 맨 밑 하단에 위치해 있으며 정보 및 연락처가 나와 있거나 사이트 링크 섹션, 소셜미디어 섹션,구독섹션,저작권섹션,이전/다음페이지 링크 섹션,페이지 맨위로 링크등이 제공됩니다. pigma pigma 피그마를 사용하여 그리드를 이용해서 전체적인 틀을 잡아줍니다. HTML 푸터 Festival Ticket 티켓예매 티켓예약 티켓 유의사항 현장 발권 Festival News DJ 인터뷰 NEW MUSIC 메거진 DJ V LIVE Festival Music 음원 예약하기 음원 구매하기 음악 듣기 음원 및 저작권 Festival F.lab F.lab 소개 페스티벌 즐기는 법 F.lab 신청하기 F.lab 사람들 Festival world 페스티벌 종류 세계 음악 역사 페스티벌 역..

마우스 이펙트 효과 두번째 이번 시간에는 GSAP를 사용해서 마우스가 부드럽게 따라다니는 효과를 주도록 하겠습니다. 첫번째 효과에서 마우스의 움직임이 부드럽지 못했는데 이번 효과 에서는 더욱 부드럽게 사용하기 위해서 라이브러리 효과 GSAP를 사용해보도록 하겠습니다. 두번째 효과에서 사용해보자! 데이터저장하기 : 변수 데이터 실행하기 : 함수, 화살표 함수 데이터 불러오기 : for(), forEach() 이벤트 객체 : mousemove,mouseenter,mouseleave 요소 객체 : querySelector 라이브러리 : GSAP: to() HTML Javascript mouseEffect02 마우스 이펙트 -마우스 따라다니기 1 2 3 4 5 6 love what you have. 가진것을 사..

마우스 이펙트 01 오늘은 마우스에 이펙트 효과를 입혀봤습니다. 마우스 이펙트 효과(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다. 예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다. 마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다. HTML코드 Javascript mouseEffect01 마우스 이펙트 -마우..

텍스트 유형 저번 슬라이드 유형을 만들어 보고 텍스트 유형을 만들어 보았습니다. 홈페이지를 제작할 때 텍스트 유형은 다양하게 존재 하고 있습니다. 제품이나 서비스를 소개할 때 회사에 대해 소개할 때 채용정보,블로그,이벤트 및 프로모션 소개, 고객지원, 연락처 정보등을 기재할 때 많이 사용하고 있는 유형중에 하나입니다. 완선본 피그마를 사용해서 전체적인 툴 잡아주기 피그마에서 아이콘 만드는 방법 home으로 들어가서 icon을 검색 한후 맘에 드는 아이콘을 get a copy를 누르고 가져오면 됩니다. 색상 조절은 카피 후 조절이 가능 합니다. HTML notice 2023 DJ Festival 음원 리스트 이번 페스티벌을 통해 발표한 음원 리스트입니다. EDM, 하우스, 트렌스 장르로 구성되어 있으며 생..

퀴즈 이펙트 -04 저번 시간에 이어서 퀴즈이펙트 4번째 유형을 만들어 보았습니다. 이번 유형은 정답을 확인할 때 여러 객관식이 있어서 정답을 하나 선택하는 유형을 만들어 보았습니다. 이번 퀴즈 이펙트 04번째에서는 데이터를 저장할 때는 배열과 객체를 이용하고 데이터를 불러 올 때 배열,객체,for문과 forEach()문 그리고 실행은 함수를 활용한 뒤 제어문은 if,다중 if문을 사용해 보도록 하겠습니다. 퀴즈 이펙트 완성본 HTML코드 Quiz 객관식 확인하기 유형 1 2 3 4 5 정답입니다! 틀렸습니다! 정답확인하기 jeongyouna_@naver.com 코드는 저번에 했던 퀴즈 3번과 동일한 코드를 가져오는데 quiz를 하나만 선택하고 2개를 만들었던 코드는 지워줍니다. 여러 객관식 답을 적기 ..

코딩공부기록 오늘은 코딩공부를 한 내용을 적어보도록 하겠습니다. 함수유형에 대해서 적어보도록 하겠습니다. 먼저 함수유형에는 선언적함수,익명함수,매개변수함수,리턴값 함수가 존재합니다. funtion func (){ document.write ("실행되었습니다."); } func(); const func = function(){ document.write("실행 되었습니다."); } func(); function func(str){ document.write(str); } func("실행 되었습니다."); function c(str1,str2,str3){ document.write(str1,str2,str3); } c("실행3","실행4","실행5"); //매개 변수는 2개,3개 쓸 수 있습니다. funct..

이미지 유형 페이지 제작시 이미지로 나타낼 부분을 피그마를 이용해 예제를 만들고 코딩을 하여 피그마에 만든 이미지 그대로 만들어 보았습니다. Figma사용하기 만드는 방법 저번에 카드유형과 동일하게 width 값 1920 height값을 800정도 설정해줍니다. layout설정 또한 카드 유형과 동일하게 잡아줍니다. 프레임을 20*20으로 만든후 눈금을 끌어와서 카드유형과 동일하게 양쪽 끝에 넓이를 준 후 눈금을 맞춰줍니다. 이제 정확한 위치를 위해 제목을 가운데 정렬해주기 저네 120height값으로 높이를 맞춰주줍니다. 제목 높이는 50으로 맞춰주고 폰트 크기도 50으로 지정해 줍니다. 내용을 써주기 위해 높이 30으로 사이를 떨어트려준 후 내용을 적어줍니다. 이미지를 첨부 한 후 버튼 제작을 위해 ..

오답 노트 자바스크립트 20문제 중 틀린 문제 오답노트를 작성했습니다. 01. 결과값을 작성하세요 { if( null ){ console.log("true"); } else { console.log("false"); } } 정답 노트 false (0,null,undefined,false)는 flase의 값이 나옵니다. 02. 결과값을 작성하세요 { let num = 0; while( num 6 ){ break; } console.log(num); } } 오답 노트 while은 반복문 입니다. 반복문이 ture일 때 실행이 됩니다. num ++ 로 num이 1이 되면 조건문에 만족하지 않아서 1이 출력되고 다시 반복문으로 돌아가서 num++로 num의 값이 2가 되는데 조건문에 만족하는 조건이 아니므로 그..

퀴즈 이펙트 저번 시간에 강아지가 등장해서 정답을 클릭하면 알려주는 사이트를 만들어 보았습니다. 오늘은 정답을 직접 입력해서 정답이면 강아지가 웃는표정을 오답이면 실망하는 표정을 나타내보도록 하겠습니다. HTML 코드 Quiz 주관식 확인하기 유형 1 2 . 정답확인하기 설명 jeongyouna_@naver.com HTML 들여다보기 저번 시간에 썼던 HTML코드를 복사 붙이기로 가져왔습니다. Script를 사용해서 내용을 출력해 줍니다. 문제 정보에 대해 작성해 준 후 선택자를 묶어준 태그들을 저번시간과 같이 queryselector를 주고 괄호로 . 을 써서 class명을 써줍니다. 저번 시간에는 innerText를 썼지만 오늘은 textContent를 사용해 줍니다. textContent는 HTMl..

퀴즈 이펙트 HTML과 CSS를 이용해 퀴즈를 풀 수 있는 사이트를 만들어보았습니다. 먼저 비주얼코드로 가서 javascript폴더 안에 card폴더를 만들어 줍니다. 그리고 quizEffext html 파일을 만들어줘서 실행시켜 줍니다. HTML Quiz 정답 확인하기 유형 . 정답확인하기 jeongyouna_@naver.com HTML 들여다보기 퀴즈 이펙트라는 타이틀을 만들어 준후 코드가 지저분해지지 않게 link를 사용해서 reset과 css파일을 만들어줍니다. header, main, footer로 나누어 전체적인 body를 잡아줍니다. CSS로 묶어 줄 수 있게 quize wrap, tittle, question,view,answer로 요소들로 묶어줍니다. CSS에서 각 요소들에게 효과를 준 ..

카드유형 다양한 사이트 유형 중 오늘은 카드 유형을 만들어 보았습니다! FIgma사용 만드는 방법 먼저 피그마를 열어서 프레임을 만들어 주며 width 값 1920 height값을 800정도 설정해 줍니다. layout grid 설정에서 columns로 바꿔준 후 count 12, margin 380, gutter20으로 설정해줍니다. R을 누르면 프레임 값이 만들어 지는데 height값 20으로 양쪽 끝 그리드를 빨간선으로 눈금을 잡아줍니다. 다시 프레임을 만들어서 카드 섹션이 들어갈 수 있도록 3개의 프레임을 만들어 줍니다. 제목사이의 간격을 150으로 잡아준후 30간격을 만들어 준 후 2줄 내용이 들어갈 수 있도록 65정도 간격을 줍니다. 카드 사이에 간격이 70정도 준 후 카드에 들어가는 그림을 ..

데이터 불러오는 방법 저번 시간에 데이터를 불러올 수 있는 방법으로 for문과 forEach문 그리고 for in, for of, map()을 살펴 보았습니다. 오늘은 forEach문과 map()문을 생략하여 사용해서 짧게 만드는 방법과 또 다른 배열 실행문 그리고 객체 실행문에 대해서 더 알아보도록 하겠습니다! forEach문 생략 let arr = [10,20,30,40,50,60,70,80,90]; arr.forEach(function(element){ document.write(element); }); //forEach (화살표 함수) arr.forEach((element)=>{ document.write(element); }); forEach (변수 el 괄호 생략) arr.forEach(el=..

for문을 이용한 문제를 풀어보았습니다. for문을 활용한 연습문제를 풀어보았습니다. 01. 1에서 100까지 출력하기 for(let i=1; i

변수와 상수 변수 변수(variable)란 데이터를 저장하기 위해 프로그램에 의해 이름을 할당받은 메모리 공간을 의미합니다. 즉 변수란 어떠한 값을 저장할 수 있는 저장하기 위한 이름을 가진 공간을 의미하며 변수는 변수라는 이름 그대로 가지고 있는 값에서 다른 값으로 덮어 씌워지며 변할 수 있으며 연산을 하여 값들이 추가될 수도 있습니다. 변수의 종류의 데이터 타입에는 자연수, 실수, 문자 등 각기 다른 종류의 값들 저장할 수 있는 변수의 종류들이 있으며 특수문자까지 저장할 수 있습니다. { var x = 100; var y = 200; var z = "javascript"; console.log(x); console.log(y); console.log(z); } { let x = 100; let y =..

CSS 문자 관련 스타일 우리가 사이트나 화면을 볼 때 그림과 사진도 눈에 들어오지만 절대적으로 빼먹을 수 없는 것이 있습니다. 바로 폰트! 글인데요 요즘 트랜드로도 강조형 타이포그래피 같은 글자 스타일과 크기로 강조하는 디자인이 떠오르는 만큼 글자에 대해서 잘 알고 활용하는 것이 중요하다고 생각합니다. 그러므로 오늘은 CSS 속성 중 문자 관련한 속성들을 알아보는 시간을 가지도록 하겠습니다. 01. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: "돋움", Dotum, Arial, Helvetica, sans-serif ; ..