프로그래밍/HTML, CSS, JavaScript 30

[JavaScript] 원하는 조건의 배열값 가져오기(map, filter, find)

1. map() map은 array의 안의 배열들을 호출하고 제공된 조건의 새로운 배열로 할당된다. 이때 기존 array와 같은 길이를 가진다. -예시 const numbers = [1,2,3,4] const a = numbers.map(number => number 2) console.log(a) number이 [1, 2, 3, 4]인 배열에서 2 이상인 값 중 첫 번째인 값을 리턴한다. 따라서 변수 a에는 3이 리턴된다. *findIndex() findIndex()는 조건..

[JavaScript] 형 변환, 문자형을 숫자형으로 변경하는 법(parseInt, parseFloat)

1. 예시 const str = '1.234' console.log(str) console.log(typeof str) // typeof 를 통해 변수의 형을 알아 낼 수 있다. const str = '1.234'는 ' '안에 들어간 문자형 변수이다. 이를 숫자형 변수로 바꿔주기 위하여 parseInt와 parseFlot을 사용할 수 있다. 2. parseInt( ) const str = '1.234' console.log(str) console.log(typeof str) const inter = parseInt(str) console.log(inter) console.log(typeof inter) parseInt(str)를 사용하여 해당 문자를 정수형으로 표현 할 수 있다. '1.234' -> 1로..

[JavaScript] 프로그래머스_가운데 글자 가져오기(substr() 사용하기)

1. 내가 푼 풀이 function solution(s) { let answer = ''; let a = 0; s = s.split(""); if (s.length % 2 === 0) { a = s.length/2-1; answer = s[a]+s[a+1]; } else { a = Math.round(s.length/2-1); answer = s[a]; } return answer; } 1) 입력받는 문자를 1개씩 쪼개 준다 -> s = s.split(") 2) if문의 조건으로 배열의 개수의 홀수 짝수를 나눠준다. -> 3) 가운데 글자 출력하기 짝수 -> 가운데 글자를 출력하기 위하여 s배열을 2로 나눠주고 1을 뺀 배열 값과 그다음 배열 값을 출력한다. 홀수 -> s배열의 길이에서 2를 나눠주고 반..

[HTML,CSS,JavaScript] jQuery 섹션 이동 버튼 만들기, 원하는 태그로 이동 하는법

1. jQuery cdn을 입력하여 jQuery 라이브러리 가져오기 head 사이에 cdn을 입력하여 라이브러리를 가져온다. 2. 섹션 이동 함수 코드 작성 body 태그 사이에 위의 script 코드를 작성해준다. 3. 예제 html 섹션1 섹션2 섹션3 섹션4 section1 section2 section3 section4 css #section1 { background-color: skyblue; height:500px; margin:20px; } #section2 { background-color: yellow; width: 100%; height:500px; margin:20px; } #section3 { background-color: pink; width: 100%; height:500px;..

[JavaScript] 프로그래머스 level1 모의고사 풀이

1. 문제 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 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 하도록 solution 함수를 작..

프로그래머스 Level1 두수의 합 구하기(JavaScript)

1. 문제 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 출처: programmers.co.kr/learn/courses/30/lessons/68644?language=javascript 코딩테스트 연습 - 두 개 뽑아서 더하기 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한 programmers.co.kr 2. 코드 function solution(numbers) ..

HTML, CSS 수평배치와 줄넘김하는 방법, flex와 flax-wrap 사용법

1. 수직적인 기본구조 html, css의 기본적인 레이아웃 구조는 수직으로 쌓인다.(위에서 아래로) 하지만 flex를 쓰면 레이아웃이 쌓이는 것을 수평으로 쌓을 수 있다. 2. flex 예제 1) 기본적인 구조 (수직) 위 그림과 같이 기본적으로 박스들이 수직으로 쌓인다. - HTML 코드 BOX1 BOX2 BOX1 BOX2 container라는 속성 값을 가진 div 안에 firstbox와 secondbox라는 속성 값을 가진 div들을 입력 div는 기본적으로 block 요소이기 떄문에 수직으로 쌓인다. - CSS 코드 .container { background-color: darkgray; } .container .firstbox { width: 100px; height: 100px; backgr..

스파르타 코딩클럽 웹 종합반 온라인 강의 회고 및 후기!

1. 수강 목적 평소에 학교에서 코딩 수업을 하고 이를 통해 코딩에 관심이 생겨서 코딩 학원을 다니고 싶었지만 제주도에서 거주하고 있어 코딩 학원을 다닐 여력이 되지 않아 온라인 강의를 찾아보던 도중 스파르타 코딩 클럽을 알게 됐고, 다른 곳의 온라인 강의와 달리 즉문즉답을 통해 모르는건 물어볼 수 있는 것과 실습 위주의 수업이 너무 마음에 들어서 웹 종합반 과정을 신청하게 되었다. 2. 배운 점/ 잘한점 일단 대학 수업에서 코딩을 접할 때는 이론 위주로 다루기 때문에 재미가 없고 이를 활용하지 못했는데 스파르타 코딩 클럽 강의를 통해 실무에도 적용할 수 있는 기술들을 배우고 bootstrap, mongoDB, flask 등 유용한 오픈소스들을 다루는 것을 배울 수 있어서 너무 좋았고 꾸준히 강의를 들어..

부트스트랩 사용법, CSS 디자인 가져오기

부트스트랩이란? 부트스트랩은 트위터에서 만들었으며, 웹개발을 좀더 편하고 빠르게 하기위하여 웹프로그래밍에 필요한 다양한 레이아웃,버튼 등의 디자인을 CSS와 Javascript로 만들어 놓고 모아놓은 프레임워크이다. 반응형 웹을 지원하고 확장이 가능한 기반코드로 이루어진다. jquery라이브러리를 사용할 수 있다는 특징이 있다. 부트스트랩의 사용법은 1. 부트스트랩 다운로드 2. CDN을 통해 불러오기 *CDN이란 웹사이트 서버가아닌 다른 공유공간에서 여러 웹사이트가 참조할 수 있게 하는 서비스를 의미한다. 따라서 별도의 다운로드가 필요 없다. 나는 보다 간단한 방법인 CDN방식을 통해 부트스트랩에 있는 CSS디자인 하나를 가져와 보겠다.(부트스트랩 4.3사용) 1. 부트스트랩을 프로젝트와 연결시키기 위..

CSS, border로 테두리 만들기 및 테두리 종류 모음

border는 CSS에서 테두리를 만들어줍니다! 1. HTML 코딩 for it study! border로 테두리 만들기~ border로 테두리 만들기~ border로 테두리 만들기~ border로 테두리 만들기~ border로 테두리 만들기~ 2. CSS 코딩 div { margin: 10px; text-align: center; } .title { font-weight: bold; font-size: 30px; } .border1{ border: 4px solid #f44336; } .border2{ border: 4px dotted #009688; } .border3{ border: 4px dashed #0000FF; } .border4{ border: 4px double #006400; } .bo..