티스토리

치즈도넛 블로그

검색하기

블로그 홈

치즈도넛 블로그

cheese-donut.tistory.com/m

치즈도넛 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

[Javascript / Html / CSS] Typing Text (타이핑 텍스트 효과) 1. Html + CSS 꾸미기 타이핑 효과를 주기 전에 먼저 원하는 폰트와 원하는 text를 화면에 배치합니다. I'm Coding *{ box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } .container{ height: 100%; height: 100vh; background: #32a89b; color: #fff; display: flex; justify-content: center; align-items: center; } .container h1{ font-size: 80px; } 이렇게 나오면 성공! 2. Typed JS를 설치 https://github.com/mattboldt/typed.j.. 공감수 0 댓글수 0 2022. 10. 26.
CSS 공부할 수 있는 게임 2개 추천! css를 공부하고 난 뒤 어느정도 알고 있는지 확인할 수 있는 게임들을 추천해드리겠습니다~! 1. Flexbox Froggy 개구리가 연잎에 올라갈 수 있도록 코드를 짜주면 됩니다! 첨엔 간단하지만 레벨이 올라갈 수록 난이도가 올라갑니다 https://flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. CSS Dinner 움직이고 있는 아이템의 선택자를 알맞게 적어주면 됩니다. https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 두가지 게임을 수월하게 .. 공감수 2 댓글수 0 2022. 9. 30.
[CSS] Animation 1. keyframes를 잡아준다 @keyframes loading-title{ from{ opacity: 100%; } to{ opacity: 0; } } 2. animation이 필요한 곳에 넣어준다. .loading-title{ font-size: 18px; line-height: 1.333; font-weight: 400; color: #151B26; margin-bottom: 20px; text-align: center; animation-name: loading-title; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction.. 공감수 0 댓글수 0 2022. 9. 30.
[CSS] Centering trick / 아이템, 글자를 가운데 정렬하는 방법 아이템을 가운데 정렬하는 방법 margin : auto 기본값으로 항상 오른쪽에 마진이 들어가 있어서 auto로 바꾸게 되면 양 옆으로 자연스럽게 margin값이 들어간다! text-align : center 블럭요소 안에서 그안의 컨텐츠들(텍스트 뿐만 아니라 버튼과 같은 인라인요소)들을 정렬할때 쓸 수 있다 transform : translate(50%, 50%) 자기 자신의 %만큼 움직인다 글자를 가운데 정렬하는 방법 text-align : center; line-height : 박스 높이 // 한줄의 높이를 지정함 공감수 0 댓글수 0 2022. 9. 30.
[CSS] Flexbox Flexbox란? 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형 된다. display : flex; flex-direction flex 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 기본축이 X축 방향 //왼쪽 → 오른쪽 flex-direction : row; //오른쪽 → 왼쪽 flex-direction : row-reverse; 기본축이 Y축 방향 //왼쪽 → 오른쪽 flex-direction : row; //오른쪽 → 왼쪽 flex-direction : row-reverse; flex-wrap ‘flex-item’ 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역.. 공감수 6 댓글수 1 2022. 9. 30.
[CSS] Selectors Universal (전부) * type Tag ID #id Class .class State : Attribute [] State : (의사 클래스) 선택자에서 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다. button:hover { color: red; background : yellow } Attrivute[] 주어진 특성을 가진 모든 요소를 선택 (^, $) a[href = "naver"] // naver가 들어간 것을 찾음 a[href^ = "naver"] // naver로 시작하는 것을 찾음 a[href$ = ".com"] // .com으로 끝나는 것을 찾음 자세한 내용은 아래 링크로! https://developer.mozilla.org/ko/docs/Web/CSS/CSS.. 공감수 1 댓글수 1 2022. 9. 30.
알고리즘 공부하기 (javascript) 7가지 문제 처음 스터디에서 알고리즘 문제를 받았을 때 너무 어렵고 당황스러웠는데 그 뒤, 프로그래머스 스쿨 코딩 테스트를 풀기 시작하고 알고리즘에 익숙해지면서 다시한번 문제를 풀어보았습니다! 모두 결괏값을 구하는 문제입니다 1번 문제 function func(){ for(i=1; i 공감수 0 댓글수 0 2022. 9. 30.
[코딩 테스트 연습] 문자열을 정수로 바꾸기 (javascript) 문제 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 풀이 function solution(s) { return Number(s); } Number https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number Number - JavaScript | MDN Number is a primitive wrapper object used to represent and manipulate numbers like 37 or -9.25. developer.mozilla.org Number("123"); // returns the number 123 Number("123") === 123; /.. 공감수 0 댓글수 0 2022. 9. 29.
[코딩 테스트 연습] 제일 작은 수 제거하기 (javascript) 문제 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 풀이 function solution(arr) { if(arr.length > 1){ let min = Math.min(...arr); let answer = arr.filter(el => el !== min); return answer; }else{ return [-1]; } } Math.min을 이용하여 배열의 가장 작은 수를 구하고, filter를 이용하여 가장 작은 수를 제외한 나머지를 return한다.. 공감수 0 댓글수 0 2022. 9. 29.
[코딩 테스트 연습] 가운데 글자 가져오기 (javascript) 문제 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 풀이 function solution(s) { let answer = ''; const num = s.length; //문자열 총 길이 계산 sliceNum = num/2; //문자열의 중간 계산 if(num % 2 == 0){ answer = s.slice(sliceNum-1, sliceNum+1); return answer; }else{ answer = s.slice(sliceNum, sliceNum+1); return answer; } } 만약 문자열의 길이가 짝수라면 문자 두개를 반환하고, 아니라면 중간에 있는 문자 하나만 반환하도록 작성해보았습니다. Strin.. 공감수 0 댓글수 0 2022. 9. 29.
[코딩 테스트 연습] 두 정수 사이의 합 (javascript) 문제 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 풀이 function solution(a, b) { let answer = 0; const max = Math.max(a,b); const min= Math.min(a,b); for(i = min; i 공감수 2 댓글수 0 2022. 9. 29.
Github에 Terminal로 파일 업로드하기 (git, terminal, visual studio) 항상 깃헙 데스크탑을 이용하다 터미널로 깃헙에 올리는 방법을 알아보았습니다. 다양한 영상과 글들이 있었지만 왜인지 저는 항상 오류가 나더라고요 그래서 제가 성공했던 방법을 자세하게 기록하려고 합니다! 1. git 설치 https://git-scm.com/ Git git-scm.com 2. Github 가입하기 https://github.com/ GitHub: Where the world builds software GitHub is where over 83 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review cod.. 공감수 3 댓글수 1 2022. 9. 29.
[코딩 테스트 연습] 수박수박수박수박수박수? (javascript) 문제 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를 들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 풀이 function solution(n) { let answer = ""; for(i=0; i < n; i++){ if(i % 2==0){ answer += "수"; }else{ answer += "박"; } } return answer; } for문을 돌려 n의 수만큼 자릿수를 만들고, if(i % 2==0) : 만약 자릿수가 짝수라면 "수"를 추가하고 아니라면 "박"을 추가한다 * index값은 0부터 시작이기 때문에 위와 같은 방법으로 해야 한다! 공감수 2 댓글수 0 2022. 9. 28.
[코딩 테스트 연습] 정수 내림차순으로 배치하기 (javascript) 문제 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰 것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를 들어 n이 118372면 873211을 리턴하면 됩니다. 풀이 function solution(n) { answer = Number(n.toString().split("").sort().reverse().join("")); return answer; } Array.prototype.sort() 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환 const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // expected output: Array ["Dec", "Fe.. 공감수 1 댓글수 0 2022. 9. 28.
레퍼런스 찾기 좋은 사이트 / 웹사이트 추천 / 웹사이트 모음 웹사이트를 디자인하거나 구현을 할 때 다양한 레퍼런스들을 참고하고 보면서 보는 눈을 키워야 한다고 생각합니다 그래서 오늘은 웹사이트 레퍼런스를 찾기 좋은 해외 사이트를 알려드리겠습니다 1. awwwards 가장 유명한 해외사이트! 전 세계 모바일 & 웹사이트를 공유합니다. 그리고 어워드에서 수상한 사이트도 홈페이지에 달아놓으니 참고가 많이 되더라고요! https://www.awwwards.com/ Awwwards - Website Awards - Best Web Design Trends Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web .. 공감수 1 댓글수 0 2022. 9. 27.
[CSS] display, position 확실하게 알고가기 display display : block; display : inline; display : inline-block; display : flex; block inline inline-block div span div(+span) 꽉차게 들어가는 상자 물건 상자 한 줄에 하나씩 한 줄에 전부 상자지만 한 줄에 여러 상자를 놓을 수 있음 width, height을 지정 가능 content 자체만 꾸며줌 (width, height를 무시함) width, height을 지정 가능 position 기준 static 기본값 top, left 등을 사용해도 아무런 영향을 미치지 않는다 relative 아이템의 위치 값 그 자리에서 상대적으로 지정한 만큼 이동된다 absolute 아이템이 담겨있는 box static.. 공감수 0 댓글수 0 2022. 9. 27.
[코딩 테스트 연습] 문자열 내 p와 y의 개수 (javascript) 문제 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 풀이 function solution(s){ const pCount = s.toLowerCase().split("p").length; const yCount = s.toLowerCase().split("y").length; return pCount === yCount; } split을 원하는 단어 기준으로 분할하도록 하면, s = "pPoooyY"; const pCount = s.toLowe.. 공감수 0 댓글수 0 2022. 9. 27.
[코딩 테스트 연습] 자연수 뒤집어 배열로 만들기 (javascript) 문제 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 풀이 function solution(n) { numToString = n.toString(); let answer = []; for(i=0; i< numToString.length; i++){ answer[i] = Number(numToString.charAt(i)); } answer = answer.reverse(); return answer; } 이 문제는 자릿수 더하기를 응용하여 구현했다. https://cheese-donut.tistory.com/41?category=1045432 [코딩 테스트 연습] 자릿수 더하기 문제 자연수 N이 주어지면, N의 .. 공감수 1 댓글수 0 2022. 9. 27.
[Javascript] checkbox is checked / 체크 여부 확인 / 스크롤 막기 메뉴 버튼을 만들 때 checkbox의 체크 여부를 통해 메뉴가 열리고 닫히는 애니메이션을 만들었다. 문제는 메뉴가 열리고 나서도 스크롤이 계속 진행되었는데 이 부분은 스크립트로 처리하였다. 메뉴는 따로 스크롤이 필요 없을 만큼 짧기 때문에 body에서 스크롤을 막아주었다. .hidden { height:100%; min-height:100%; overflow:hidden !important; touch-action:none; } 이 css가 body에 적절하게 들어갈 수 있도록 스크립을 짜면 끝! 문제는 체크 여부 스크립을 어떻게 짜야하는지 감이 오지 않아 서치 해보았다. https://stackoverflow.com/questions/9887360/how-can-i-check-if-a-checkbox.. 공감수 1 댓글수 0 2022. 9. 27.
[코딩 테스트 연습] 자릿수 더하기 (javascript) 문제 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를 들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 풀이 function solution(n) { const numToString = n.toString(); const numsArr = []; for(let i =0; i(sum += value)); return answer; } for문으로 numsArr의 배열의 값을 string 값에서 num값으로 바꾸어 추가시켰다 num.toString() : 숫자를 string으로 변환 Number() : string을 숫자로 변환 CharAt(index) : 문자열에서 특정 인덱스에 위치하는 단일 문자를 반환한다 r.. 공감수 0 댓글수 0 2022. 9. 26.
[코딩 테스트 연습] 약수의 합 (javascript) 문제 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 풀이 function solution(n) { let answer = 0; for(i=0; i 공감수 0 댓글수 0 2022. 9. 26.
[코딩 테스트 연습] 평균 구하기 (javascript) 문제 - 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 풀이 function solution(arr) { let sum = arr.reduce( (prev, curr) => prev + curr); let answer = sum / arr.length; return answer; } - Array.prototype.reduce()를 이용하여 풀었다. Array.prototype.reduce() - 배열의 요소들을 접어서 하나의 값으로 만든다! arr.reduce((previousValue, currentValue, currentIndex, array) => (previousValue += currentValue), initialValue ); //init.. 공감수 0 댓글수 0 2022. 9. 26.
[코딩 테스트 연습] 짝수와 홀수 (javascript) 문제 - 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 풀이 function solution(num) { const answer = num % 2 === 0 ? "Even" : "Odd"; return answer; } - 삼항 연산자를 이용하여 풀었다. 삼항 연산자 조건문 ? 조건문이 참일 때 실행 : 조건문이 거짓일 때 실행; 해당 연산자는 if...else문의 대체재로 간단하게 표현할 수 있다. 더 자세한 내용은 아래 링크를 통해서! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator Conditiona.. 공감수 0 댓글수 0 2022. 9. 26.
[React] React Tools 1. git 설치 https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp git-scm.com git --version // 깃 버전 확인 2. node & npm 설치 - 노드를 설치하면 npm도 저절로 설치 된다 - 너무 .. 공감수 1 댓글수 1 2022. 9. 23.
[Html] 유용한 tag abbr : 축약어 : 속성 값으로 title이 반드시 들어가야 함 PLZ...한번만 봐줘요 address : (물리적인)주소, url, 이메일, 전화번호, sns 치즈도넛 블로그 https://cheese-donut.tistory.com pre & code : 둘이 같이 사용하지 않아도 됨 : pre - html에서 적은 그대로 화면에 나타남 : code - code를 적을 때 사용 console.log('hello world!'); let a = 2; pre를 사용하면 띄어진 부분까지 전부 화면에 나타남 공감수 0 댓글수 0 2022. 6. 2.
[Html] Media Audio // 컨트롤러가 생김 // 자동으로 재생 // 자동으로 재생 + 무한 재생 ↑ 사용자들이 어떤 브라우저를 사용할 지 모르기 때문에 최대한 지원할 수 있도록 함 https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio - HTML: Hypertext Markup Language | MDN HTML 요소는 문서에 소리 콘텐츠를 포함할 때 사용합니다. developer.mozilla.org 참고 자료 Video Sorry, your browser doesn't support embedded videos. 공감수 0 댓글수 0 2022. 6. 2.
[Html] Table 이름 나이 전화번호 김철수 12 01012345678 박지희 16 01012345678 thead : table header tbody : table body tr : table row th : table header td : table data ** th과 td의 개수는 무조건 똑같아야 함 표를 합칠 땐? rowspan="숫자" colspan="숫자" 제목1 제목2 제목3 rowspan="2" colspan="2" ** span을 사용하면 다음줄에서 skip 해도 된다! 월 화 수 목 금 1교시 왕초보 HTML & CSS 모각코 왕초보 HTML & CSS 모각코 왕초보 HTML & CSS 2교시 JavaScript 스킬업 JavaScript 스킬업 3교시 JavaScript 시작반 JavaScript .. 공감수 0 댓글수 0 2022. 6. 2.
[Html] Form - Input / Label / Radio & Checkbox / Select / Textarea / Button From Input input에는 무조건 type이라는 속성 값이 들어가야 함 placeholder : hintText minlength : 입력해야하는 단어의 최소 값 maxlength : 입력해야하는 단어의 최대 값 required : 필수로 입력해야 하는 input disable : 특정 input 값을 사용하지 못하게 함 value="치즈 도넛" : 기본으로 들어가는 값 (복사도 가능!) ** number의 최솟값과 최댓값을 적고 싶으면 min과 max를 사용해야 함 Enter your phone number: ** 확장자명을 정하고 싶다면 accept를 사용 Label : 폼 양식에 이름을 붙이는 태그 라벨 ** for은 '누구'를 위한 라벨인지 명시해줘야 함 -> for="input id" 이.. 공감수 0 댓글수 0 2022. 6. 2.
[Html]인용 Quotations blockquote : 인용구 cite : 인용을 어디서 했는지 알려줌, 출처 q : 문장에 인용구가 있을 때 사용 (ex 두번째 코드에 예시가 있음) : ""를 쓰지 않아도 저절로 생성됨 우리가 겪을 수 있는 가장 아름다운 체험은 신비다. 신비는 모든 참 예술과 과학의 근원이다. 알버트 아인슈타인 **출처하는 사이트가 있다면 blockquote에 cite를 넣어준다 The study is the first to project the long-term outlook for Antarctica's largest penguins, which can grow 1.2 meters (four ft) tall, seeking to fill a gap in understanding climate change and .. 공감수 0 댓글수 0 2022. 6. 1.
[Html] 목록 list List ol -- ordered list : 순서가 중요한 목록 (ex 요리법, 실시간 검색어 등등) ul -- unordered list : 순서가 중요하지 않은 목록 li -- list item : 리스트 아이템 **ol과 ul의 자식은 li만 올 수 있다 Description List -> 정의(서술) 리스트 dl -- description list dt -- description term : 서술된 용어 dd -- description data : 기술 자료 치즈 블로그 코딩을 공부하는 블로그 입니다 치즈 블로그 cheese-donut tistory 코딩을 공부하는 블로그 입니다 사과 사과에 대한 설명 바나나 바나나에 대한 설명 **dl의 자식 요소는 오직 div, dt, dd만 가능하다 공감수 0 댓글수 0 2022. 6. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.