숨만쉬어도 귀여운타입:D

오늘은 CSS속성 검색 사이트를 만들어볼게요 오늘은 css 속성이 많아서 소스가 길어지기 때문에 소스 보기로 소스를 새창에서 띄워주세요 ! 소스보기 ! CSS 부분의 오늘의 POINT ! 이번엔 반응형웹으로 사이트를 만들어 볼꺼야 지금까지 사이트를 만들땐 요소의 크기를 width : 10px or 10%로 설정하는 경우가 많었어 이렇게 줄경우 화면을 줄일경우 문제가 생기더라구 ! 이럴땐 vw와 vh가 써서 해결할수있어 ! vw와 vh는 뷰포트 크기(주로 브라우저창의 크기)의 100분의 1에 해당하는 단위야 예를 들어 브라우저 창의 높이가 500px일때 1vh는 5px이고 마찬가지로 브라우저 창의 넓이가 500px이라면 1vw는 5px이야 그래서 주로 반응형 브라우져에서 사용하구 이를통해서 이번엔 css ..

figma처럼 site를 만들어봤어요 ! css와 body소스를 보면 어려운점은 없어보여요 아래는 body소스에요 ! 푸터 별헤는밤 별헤는밤 시인 윤동주 발매 못한 마지막 시 별 알퐁스 도데가 1885년에 발표한 단편소설이다. 별을 세면 잠을 잘수있어 누워서 별을 세자 Countingstar Counting Star 별을 보며 별만큼돈벌자 별 차가울지 따뜻할지 다정할지 무서울지 이별 생각해봐도 어렵네요 세상이 무너졌어요 2023 getgrovy 별과 사람 사랑 portfolio & Power All Right Reserved 아래는 소스설명보다 오늘은 footer유형에 대해 알아볼게요 footer 사용법 ! footer는 시멘틱 테그 와 를 사용해요 에는 사이트를 제작자 & 제작자email & 만든시기등..

three.js란? three.js는 컴퓨터내의 그래픽카드 리소스를 사용해서 좀더 부드럽게 동작이 가능해요 웹 브라우저에서 3차원 컴퓨터 그래픽스 애니메이션 응용을 만들고 표현하기 위해 사용되는 JS 라이브러리입니다 어떻게 그게 가능하죠 ? ? Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리에요 WebGL 기술을 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용하게끔 만들어줘요 ! 소스를 보면서 같이 작업해 볼게요 ! 소스보기 ! 1 . Importing 저같은경우 주소를 임포트했어요 . 임포트하던 직접 다운받던 선택해서 우선적으로 작업하셔야 해요 ! 2. Three.js는 크게 Scene, Camera, Render..

Parallax Scroll(패럴랙스 스크롤링)효과를 응용해서 구현해봤어요 ! 패럴랙스 스크롤링 효과는? background-attachment: fixed; 로 백그라운드를 고정 그 위에 텍스트나 이미지 등을 올림 하단의 백그라운드가 올림 시각적으로 패럴랙스 스크롤링 효과를 준다 ! 팰럴랙스 효과를 응용해서 마우스 커서주변만 밝혀주는 효과를 구현 ! 위 효과의 CSS소스를 볼게요 ! .mouse__wrap { cursor: none; } header, footer { z-index: 2; } .mouse__text { width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: cente..

마우스 이펙트 효과를 GSAP를 적용해봤어요 ! body를 먼저 볼게요 ! Javascript Mouse Effect02 마우스 이펙트 - 2 1 2 3 4 5 6 Fix you course on a star and you'll navigate any storm 당신의 별을 보고 방향을 정해라. 그러면 폭풍 속에서도 항해를 계속 해 나갈 수 있을것이다 getgrovy@gmail.com mouse_cursor 가 2개있네요? ? 왜 ? why ? 2개의 마우스 커서가 마우스포인터를 따라다니게 할거니까요 각각의 커서가 2가지 이펙트를 보여줄거고 영역 영역, 태그 부분에 효과를 부여할거에요 안을 살펴 볼게요 ! //선택자 const cursor = document.querySelector(".mouse__cu..

바탕화면 정리 문제 같이 풀어보아요 ! 문제 설명 코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작성했던 코드는 그 문제에 가서 다시 볼 수 있기 때문에 저장해 둔 파일들을 전부 삭제하기로 했습니다. 컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 wallpaper가 주어집니다. 파일들은 바탕화면의 격자칸에 위치하고 바탕화면의 격자점들은 바탕화면의 가장 왼쪽 위를 (0, 0)으로 시작해 (세로 좌표, 가로 좌표)로 표현합니다. 빈칸은 ..

마우스 이펙트 효과를 오늘은 배웠어요 ! body를 먼저 볼게요 ! Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 You until have the courage You can nevercross the ocean , to lose sight of the shore. 용기가 없어 한번도 바다를 건너지 않았다면, 바다에서 보는 육지의 경치를 놓치는 것이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px getgrovy@gmail.com ul 테그 안에 있는 것들 처음보네요 정리해 볼게요 ! 기능 공통사항 ClientX 브라우저..

문제 설명 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다. 명함 번호 가로 세로 1 60 50 2 30 70 3 60 30 4 80 40 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑 크..

figma처럼 텍스트유형의 site를 만들어봤어요 ! 소스 전문 보기 6개의 섹션으로 구성되어 있으며 아이콘은svg를 이용해서 만들었어요! SVG(Scalable Vector Graphics)가 뭔지 알아보고 갈게요 ! 웹 친화적인 벡터 파일 포맷입니다. JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장합니다. 따라서 SVG와 같은 벡터 파일은 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있으므로 로고와 복잡한 온라인 그래픽에 아주 적합합니다. SVG가 웹 디자이너에게 큰 인기인 이유는 크기 조정 기능 때문만은 아닙니다. SVG는 XML 코드로 작성되므로 모든 정보를 모양이 아닌, 텍스트로 저장합니다. 따라서 Goo..

퀴즈퀴즈 사이트 만들기 ! ( 객관식유형) 이번엔 객관식으로된 퀴즈 풀이 사이트를 만들어볼까해요 전체 소스는 요기 객관식 유형을 만들기위해 해야할일을 아래 소스로 살펴볼게요 요렇게 라벨과 radio 버튼을 넣었어요 ! const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title"); //시험종목 const quizQuestion = quizWrap.querySelector(".quiz__question"); const quizChoice = quizWrap.querySelectorAll(".quiz__choice span"); //보기 const quizSelect =..

오늘은 학원에서 시험을 봤어요 같이 풀어봐요 ! 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 즉시 실행 함수에 관한걸 물어보네요 ! function(){} 을 ()로 한번 감으면 스크립트 로딩시 즉시 실행되요 ! 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 선언적 함수를 실행시키는거에요 ! 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i in이 들어가서 key 즉 순서반환 for ( let i of num) >> in이 들어가서 of 즉 value 값 반환 답은 num였네요 13. 다..

둘만의 암호 문제 설명 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다. skip에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나머지 "ukks" ..

옹알이 (1) 문제 설명 머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ babbling의 길이 ≤ 100 1 ≤ babbling[i]의 길이 ≤ 15 babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다. 즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "ma"가 한 번씩만 등장합니다. 문자열은 ..

figma처럼 슬라이드유형의 site를 만들어봤어요 ! 아래처럼 슬라이드 첫 번째 사진을 만들었어요 ! 소스 전문 보기 포인트를 볼게요 ! event 변환해서 넣는거에요 ! .slider__arrow a { position: absolute; top: 50%; background-image: url(../asset/img/icon_main.svg); background-size: 500px; width: 30px; height: 56px; display: block; margin-top: -28px; } .slider__arrow a:first-child { left: 20px; } .slider__arrow a:last-child { right: 20px; background-position: -52p..

figma처럼 site를 만들어봤어요 ! 아래는 body소스에요 ! notice 알퐁스 도데가 발표한 단편소설 만약 당신이 아름다운 별빛 아래에서 밤을 지새운 적이 있다면, 낮은 신분의 목동이 주인집의 아가씨를 연모하다가, 자신의 일터에서 밤을 보내게 된 그녀를 욕정과는 거리가 먼 순수한 사랑으로 지켜주는 장면과 심리를 간결한 문체로 묘사했다. 당시 프랑스의 문란한 연애 문화를 비판하며, "이런 사랑도 얼마든지 있을 수 있다!!" 라고 보여주려고 쓴 소설. 구조를 ... 상단 120px 중앙정렬 text image1 image2 하단 120px 이렇게 구조 잡았어요 ! 위처럼 style을 적용했어요 횡간격을 20px;을 맞추기 위해 ... 사이즈를 조금 변경하였어요! justify-content: spa..

퀴즈퀴즈 사이트 만들기 안녕하세요 오늘은 퀴즈문제를 풀어보는 사이트를 만들어 봤어요 정답일경우엔 강아지가 웃고 오답일경우엔 강아지가 슬퍼해요 정답은 '주파수, unix, 교착상태'입니다 ! 소스는 요기 😝😝😝 위 레이아웃 만들면서 어려운 javascript 정리 innerHTML textContent, innerText 과 같은동작을 하지만 style tag를 쓸수 있어요 (quizQuestion.innerHTML= ""+quizInfo[0].infoNumber+") array.forEach (element, number =>{ }); forEach문 반환하는 값이 있는 함수에요 array순서대로 반환하며 element(array[0]번째부터 끝까지 반복) number(array[0]번째 부터 끝까지 반..

MySQL 설치 하기 ! https://www.mamp.info/en/downloads/ 사이트 접속 ! MAMP를 OS에 맞게 설치 ! MAMP란? 웹사이트를 개발할때 쓰이는 기술 스텍인 macOs, Apache, MySQL, PHP의 약어이자 솔루션 스텍이다 위 프로그램을 받아 Apache서버 & MySQL을 쓸꺼에요 나중엔 PHP까지 같이쓸꺼구요 ! database? table란.. ? 쉽게말하면 우리가 TISTORY에 글을 적는것을 보관하는 장소나 회원가입을 하여 회원가입정보를 가지고 있는 곳이라 생각한당 데이터베이스는 구조화된 정보 또는 데이터의 조직화된 모음으로서 일반적으로 컴퓨터 시스템에 전자적으로 저장됩니다. 데이터베이스는 일반적으로 데이터베이스 관리 시스템(DBMS)에 의해 제어됩니다. ..

codepen으로 만들어봤어요 ! HTML 삽입 미리보기할 수 없는 소스 bounce애니매이션을 css로 만들었어요 ! Pixmy point ! ... animation: circle 5s ease-in-out infinite; } @keyframes circle{ 0%{ } 10%{ 통통뛰기 } 20%{ 빙글빙글돌기 } 30%{ } ... 100%{ } } animation 효과에 @keyframes을 줄경우 해당 %마다 모션이 작동해요 ! animation이름이 circle인경우 xx%~xx%까지 는 0%~10% 10%~20% 통통뛰기 20%~20% 빙글빙글 돌기 ... 90%~100% 이런식으로 표현하고자 하는 애니메이션을 해당 %에 넣을경우 실행됨 !

[프로그래머스] Lv.1 포켓몬선택하기 ! 문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째..

많이는 봤지만 정확히는 몰랐던 차이 절대 길이 단위 절대 길이 단위는 다른 요소들의 크기와 상관없이 항상 동일한 값으로 간주된다. (ex. px, pt, cm, mm 등) 예를들어 10px이라는 값을 입력한다고 했을때 10px은 주변의 어떠한 요소와도 상관없이 고정된 값을 가진다. 절대 길이 단위는 예로 든 단위 외에도 단위가 더 있지만 실질적으로는 px, pt 정도만 사용된다. 사실 절대 길이 단위는 그냥 10px 찍으면 10px짜리 무언가가 되기 때문에 어떻게 보면 너무나 당연한 개념이다. 사실 우리가 정확히 의미를 잘 모르고 쓰는 단위는 상대 길이 단위일 확률이 높다. em과 rem 상대 길이 단위 em과 rem은 글꼴의 크기를 나타낼때 사용하는 단위이다. 상위요소의 글꼴 크기에 em은 비례해서 크..

css 코드입니다. Counting star lv01 계절이 지나가는 하늘에는 가을로 가득 차 있습니다. 잠이 안올땐 1 하나 둘 셋 별을 세다 보면 어느세 잠이들어요 자세히보기 잠이 안올땐 2 하나 둘 셋 별을 세다 보면 나도 모르게 눈이 아파요 자세히보기 body 테그 입니다. 중요 point 1 .image__inner .image{ position: relative; } .image__body{ position: absolute; /*기준*/ } 를 이용해서 image 안에 내용이 들어가게 설정을 해줍니다. 이 내용이 없다면 image안에 글이 들어가지 않습니다. 중요 point 2 .image__body .btn{ display: inline-block; } 해당 코드를 이용해 btn의 인라인블..

오늘은 학원에서 시험을 봤어요 같이 풀어보아요 ! 1번 { if( null ){ console.log("true"); } else { console.log("false"); } } if문안에 null 값이 들어가면 false를 반환해요 ! 2번 { let num = 0; while( num 6 ){ break; } console.log(num); } } while문 조건이 true일때의 while문은 break를 만나야 반복을 정지합니다. num++ 이 초기값 num이 0에서 증가한 상태로 if문을 만나 1 2 4 5 6 이 실행됩니다 3은 조건문 num==3일때를 만나 continue ( 초기로돌아가며 아래 코드는 실행안함!) 7번 { for(let i=1; i { const str = "함수가 실행되..

문제보러가기 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solutio..

퀴즈퀴즈 사이트 만들기 안녕하세요 오늘은 퀴즈문제를 풀어보는 사이트를 만들어 봤어요 정답일경우엔 강아지가 웃고 오답일경우엔 강아지가 슬퍼해요 정답은 '슬라이드'입니다 ! 소스는 요기 위 레이아웃 만들면서 궁금했던 css 정리 😝😝😝! font-family: 'NeoDunggeunmo' pc에서는 잘 나왔지만 선생님의 맥에서는 화면이 깨져보였다 . . 폰트는 화면별로 다르기 때문에 확인을 한번씩 해야겠음 ! ~ 😝😝😝 위 레이아웃 만들면서 어려운 javascript 정리 textContent innerText 두 태그는 동일한 동작을 합니다. 값을 넣어주는 자바스크립트 내장객체 innerText로 어제 코드작업을 했구 오늘은 textContent를 해봤어요 const useAnswer = quizAnswe..

퀴즈퀴즈 사이트 만들기 안녕하세요 오늘은 퀴즈문제를 풀어보는 사이트를 만들어 봤어요 만들면서 궁금했던거 를 정리해봤어요 소스는 요기 위 레이아웃 만들면서 궁금했던 css 정리 😝😝😝! z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수(-1, 0 , 1) 이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. position: relative; position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top:..

직사각형 별찍기 문제 설명 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 조건 n과 m은 각각 1000 이하인 자연수입니다. 예시 입력 : 5 3 출력 ***** ***** ***** process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); let stars=''; for(var i=0; i

이번엔 카드유형 사이트를 만들어 봐요 ! 코드! 스타일 입니다 Counting star lv02 계절이 지나가는 하늘에는 가을로 가득 차 있습니다 가슴 속에 하나 둘 새겨지는 별을 이제 다 못 헤는 것은쉬이 아침이 오는 까닭이요 내일 밤이 남은 까닭이요, 아직 나의 청춘이 다하지 않은 까닭입니다. 자세히 보기 별 하나에 추억과 별 하나에 쓸쓸함과 별 하나에 동경과 별 자세히 보기 나는 별 하나에 , 아름다운 말 한마디씩 불러 봅니다. 초등학교 때 책상을 같이 했던 아이들의 이름과 아름다운 말 한마디씩 불러 봅니다. 초등학교 때 책상을 같이 했던 아이들의 이름과 자세히 보기 body 입니다. 위 레이아웃 만들면서 아리송했던 css 정리 😝😝😝! font-weight normal : 보통 굵기이다. 숫자 4..

01. 변수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법 { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 100 200 javascript 02. 상수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법 { const x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 100 200 javascript 03. 배열 : 데이터 불러오기 각배열을 호출하여 배열안의 데이터를 불러오기 { const arr = [100, 200, "javascript"]; console.log(arr[0], arr[1], arr[2]); } 100 200 javascript 04...

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 } 더보기 300, 400, "jquery" 03. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100;..

Arrow function 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다. let func = function(arg1, arg2, ...argN) { return expression; }; let func = (arg1, arg2, ...argN) => expression //위함수의 화살표함수버전! let sum = function(a, b) { return a + b; }; /* let sum = (a, b) => a + b; 위 화살표 함수는 아래 함수의 축약 버전입니다. */ alert( sum(1, 2) ); // 결괏값 3 let age =..