Youna

푸터 유형 페이지에서 푸터 유형은 맨 밑 하단에 위치해 있으며 정보 및 연락처가 나와 있거나 사이트 링크 섹션, 소셜미디어 섹션,구독섹션,저작권섹션,이전/다음페이지 링크 섹션,페이지 맨위로 링크등이 제공됩니다. 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 페스티벌 종류 세계 음악 역사 페스티벌 역..

애니메이션 오늘은 3D 느낌을 살려서 애니메이션을 만들어 보았습니다. 코드

마우스 이펙트 03 저번 효과를 이어서 이번에는 이미지가 보이지 않지만 마우스 이펙트 효과를 통해 이미지가 보여지는 조명 효과를 입혀봤습니다! 이번 마우스 이펙트 세번째 효과에서 사용될 속성들 입니다. 데이터 저장하기 : 배열, 객체 데이터 실행하기 : 함수, 화살표 함수 이벤트 객체 : mousemove 요소 객체 : querySelector,clientWidth, clientHeight, offsetWidth, offsetHeight, getBoundingClientRect() CSS : backgruound-attachment: fixed HTML Javascript mouseEffect03 마우스 이펙트 -마우스 따라다니기 1 2 3 4 5 6 Life is a journey to be exper..

마우스 이펙트 효과 두번째 이번 시간에는 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개를 만들었던 코드는 지워줍니다. 여러 객관식 답을 적기 ..

자바스크립트 오답노트 20230317자바스크립트 시험 오답노트 01. 결괏값을 작성하시오 { (function(){ console.log("함수가 실행되었습니다."); })(); } 오답노트 즉시 실행 함수이므로 함수가 실행되었습니다 라는 값이 뜹니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 정답노트 함수가 실행되었습니다. 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i80보다 크면 best는 ++로 출력이 됩니다. 출력되는 숫자를 보면 90이 있으므로 best는 ++가 되어서 0이 1이 되어 출력됩니다. 또 그런데 조건문 if가 있으므로 값이 끝나지 않..

코딩공부기록 오늘은 코딩공부를 한 내용을 적어보도록 하겠습니다. 함수유형에 대해서 적어보도록 하겠습니다. 먼저 함수유형에는 선언적함수,익명함수,매개변수함수,리턴값 함수가 존재합니다. 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..

슬라이드 유형 오늘은 홈페이지 슬라이드 유형을 제작해 봤습니다! 전체적인 슬라이드 유형을 작업하는 과정과 옆으로 넘길 수 있는 아이콘을 만드는 방법을 알아보도록 하겠습니다! HTML 메인 슬라이드 영역 event FESTIVAL LABLE F.LAB F.LAB은 세계적으로 열리는 페스티벌 음악들을 공유하며 함께 페스티벌을 즐기고 있습니다. 페스티벌에서 함께 즐긴 공연의 음원과 아티스트의 정보를 공유하고 있습니다. 자세히 보기 F.LAB 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 만드는 방법 slider wrap을 만들어 준 후 글씨 nexon을 넣어줍니다. 태그를 이용해서 blind로 숨겨준 후 제목을 써줍니다. div박스를 만들고 class로 slider__inne..

페이지 제작시 이미지텍스트 유형을 피그마로 예제를 만든 후 코딩을 이용해서 그대로 만들어 보았습니다. FIgma사용하기 만드는 방법 저번 이미지유형과 똑같이 width값 1920과 heigth값 800을 줍니다. layout도 columns로 변경후 12줄 margin값을 380을 줍니다. 위에 줄 간격을 120준 후 20간격으로 notice를 저번에 카드 유형에서 가져와줍니다. 16간격을 주고 나서 50px로 제목을 써줍니다. 25간격을 준 후 16px로 2줄 내용을 적어줍니다. 15간격을 주고 16px과 lineheigth 155% 로 내용들을 적어줍니다. 아래 간격은 위에 간격과 똑같이 120을 줍니다. HTML&CSS사용방법 이미지/텍스트 영역 NOTICE 세계 각국 음악 페스티벌 세계각국에서 열..

퀴즈 이펙트 저번 퀴즈에 이어서 3번째 이번에는 여러 문제가 포함되어있는 퀴즈 사이트를 만들어 봤습니다! HTML코드 Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답확인하기 . 정답입니다! 틀렸습니다! 정답확인하기 . 정답입니다! 틀렸습니다! 정답확인하기 jeongyouna_@naver.com HTML들여다보기 퀴즈 사이트 2번과 똑같이 복사해서 붙여주는데 여러가지 퀴즈를 만들 예정이라 class="quize"부분을 2개 더 추가 해줍니다. CSS코드 .quiz__desc { border-top: 6px ridge #cacaca; padding: 20px; font-family: 'suncheon'; background-color: #fffae4; } .quiz_..

MySQL "MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다." MySQL은 다중 사용자, 다중 스레드 RDBMS로서, 데이터의 안정성과 보안성을 제공합니다. MySQL은 대부분의 운영 체제에서 작동하며, 웹 애플리케이션 개발, 데이터 분석, 빅 데이터, 클라우드 기반 애플리케이션 등에 많이 사용됩니다. MySQL은 SQL(Structured Query Language)을 사용하여 데이터를 관리합니다. SQL은 데이터베이스에 저장된 데이터를 조작하기 위한 표준적인 언어로서, 데이터를 검색, 삽입, 업데이트, 삭제하는데 사용됩니다. MySQL은 이러한 SQL 문을 이용하여 데이터를 쿼리하고, 데이터의 무결성을 유지하며, 데이터베이스를 관리합니다. MySQL은 사용이 간편하며, 대용..

애니메이션 효과 코드펜을 이용해서 애니메이션 효과를 html과 css를 이용해서 만들어 봤습니다! 01.움직이는 두 원 HTMl 만드는 방법 div를 만들어 준 후 span을 만들어 준 후 class요소를 이용해서 loding과 circle1,2를 만들어 주면 html은 끝입니다. CSS body { height : 100vh; background-color : #111; } .loding { left : 50%; top : 50%; position : absolute; animation : loding 1s ease 1000; } .circle1 { display : block; height : 20px; width : 20px; background-color: #fff; border-radius : ..

이미지 유형 페이지 제작시 이미지로 나타낼 부분을 피그마를 이용해 예제를 만들고 코딩을 하여 피그마에 만든 이미지 그대로 만들어 보았습니다. 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 =..

✏️자바스크립트 오답 노트 자바스크립트 시험에서 틀린 문제들을 오답노트로 정리했습니다. 01.다음의 출력값을 보고 빈칸을 채우시오 { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 정답 x, y , x+y 02.다음의 출력값을 보고 빈칸을 채우시오 { let x = 100; let y = 200; let z = "javascript"; x = ___; y = ___; z = ___; console.log(x); console.log(y); console.log(z); //300 //400 //jquery } 오답풀이 x=200; y=400;..

어느덧 학원을 나온지 한달이 다 되어가고 있다. 2월부터 시작해서 일상에 많은 변화들이 있었는데 그 변화들을 감당하기에 조금 벅참도 있었다. 항상 무언가를 할 때 욕심과 마음이 많이 앞서 많은 일들을 다그치곤 했는데 이번 공부를 통해 다시 한번 나만의 스텝으로 가야 한다는 생각을 하게 되었다. 처음 음악을 했을 때도 연습실에서 답답했던 시간이 있었다. 왜 안되는지 왜 늘지 않는지에 대한 고민들을 많이 하는 시간이었는데 생각해 보면 노래는 늘어나는 결과물이 눈에 쉽게 보이지는 않지만 코딩 공부는 그래도 알아가면 알아갈수록 조금씩 익숙해지고 또 늘어가고 있다는 생각을 들게 해 주었다. 또 새로운 사람들과 함께 삶을 공유하고 새로운 공부를 배워간다는 게 한편으로는 즐거운 마음도 드는 요즘이다. 어쩌면 아직도 ..

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

Grid layout grid 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조 관점에서 html 기본 요소로 작성된 요소 입니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 그리고 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 쉽게 말해 저번 시간에 정리했던 flex는 한 방향 레이아웃 시스템이고 grid는 두 방향 (가로,세로)레이이아웃 시스템입니다. 01. grid를 활용한 레이아웃 grid 레이아웃 만드는 방법 flex와 비슷한 형태로 시멘틱 태그를 만들어 줍니다. 시멘틱 태그로 만들어진 태그에 배경색과 grid area에 각 시멘틱 태그 이름을 붙혀줍니다. 태그들을 총 감싸고 있는 wrap태그 안에 wi..

레이아웃 Flex 요소들이 포함된 크느 박스에 flex를 선언하고, 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 박스 안에 구문은 해당 요소에 flex로 레이아웃을 계한다고 선언하는 뜻입니다. 01. flex layout flex를 이용해 레이아웃을 만든다 이렇게 코드진행을 할 수 있습니다. 가운데 부분은 class container를 이용해서 만들어 줍니다. 박스가 3개 나열 된다고 생각하고 처음에는 큰 메인 박스를 만들어 준 후 그 아래로 차례로 section1,2,3에 가로와 세로 값 배경색을 부여한 후 display: flex를 main부터 sectio..

문제 01. 숫자를 함수로 넘겨주고, 숫자에서 양수,음수,0 판단하기 사용자가 프롬포트 창에 숫자를 입렸했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지,음수인지, 또는 0인지 판단해서 알림창에 보여주는 프로그램을 작성하는 문제입니다. 숫자를 받아서 양수,음수,0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parselnt()함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. 프롬포트 창에 입력한 내용이 숫자가 아니면 parselnt() 함수는 NaN로 변환합니다. 반환 값이 숫자일 경우에만 함수를 실행 합니다. function isPositive(n) { if (n > 0) { alert(`${n}은 양수입니다.`); //매개 변수 함수를 이용해서 if문을 실행함 } el..

제어문 제어문이란 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 제어하거나 반복시키는 문장을 말합니다. 제어문은 크게 조건문,반복문,중지,건너뛰기의 분류로 나눌 수 있습니다. 저번에 살펴 보았던 제어문과 더불어 새롭게 추가된 제어문에 대해서 함께 알아보도록 해요! 분류 제어문 조건문 if, swich 반복문 while, do while, for 중지,건너뛰기 break,continue 01. 조건문 if문 가장 기본적인 사용하는 조건문으로 주어진 조건이 참일 경우에만 코드 블록이 실행할 수 있습니다. if(조건식){ document.write("실행되었습니다.(ture)"); //조건식을 쓴 후 실행문을 써줘야 합니다. } if문 생략 기본 if 문을 생략해서 쓸 수 있습니다. //기본 i..

함수란? 자바스크립트 프로그램은 단순히 하나의 동작이 아닌 여러가지 동작이 연결되어 실행을 합니다. 동작해야 할 목적대로 여러 개의 명령을 묶는 것을 '함수'라고 합니다. 소스를 함수로 분리해 놓으면 필요할 때마다 원하는 기능만 따로 실행 할 수 있고, 같은 기능이 필요한 다른곳에서 다시 사용 할 수 있습니다. 그러므로 복잡하게 처리할 기능이 많다면 기능별로 나누기 좋은 아주 효과적인 방법입니다. 처음에는 어색할 수 있는 단어겠지만 잘 외워 두신다면 자바스크립트를 할 때 유용하게 사용하실 수 있습니다! 그러면 함수의 종류를 살펴 보도록 하겠습니다. 01. 선언적 함수 function func (){ //function이라는 예약어를 사용하고 함수 이름을 적고 소괄호와 중괄호를 적습니다. document...