choijming21 님의 블로그

오늘은 배열메서드 총 5가지에 대해서 배워보았다..push().pop().forEach().map().filter()    1. push 메서드: 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열을 반환 2. pop 메서드: 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환 하거나 변경된 배열을 반환const fruits = [30, 1, 2, 5, 40];fruits.push(100); // 100을 끝에 넣기 -> [30, 1, 2, 5, 40, 100]const pop = fruits.pop(); // 100을 빼내서(pop) 변수에 할당하기console.log(pop); // 할당한 100을 console.log();에 찍어보기 -> 100      3. forEach 메서드- 배열의 메..

오늘은 어제 걷기반 수업에서 들었던 함수, 조건문, 반복문에 대해 문제를 풀어보겠다.    문제1. 함수호출하기해당 함수를 실행시켜 "제가 좋아하는 과일은 사과, 오렌지입니다."를 출력하는 코드를 작성해보세요.function printFruits(a, b) { return "제가 좋아하는 과일은 " + a + "," + b + "입니다.";}console.log(printFruits(...)); printFruits 함수가 사과, 오렌지를 매개 변수로 받아 “제가 좋아하는 과일은 사과, 오렌지입니다.”의 문장을 콘솔에 출력할 수 있도록 해주세요.  나의 답function printFruits(a, b) { return "제가 좋아하는 과일은 " + a + "," + b + "입니다.";}console..

기본형태if (표현식1){ 실행문1;}else if (표현식2){ 실행문2;}else{ 실행문3;} 표현식1이 참이면 -> 실행문1 실행표현식1이 거짓이면 -> 표현식2로 넘어감 -> 표현식2가 참이면 -> 실행문2 실행표현식1, 2가 모두 거짓이면 -> 실행문3 실행이때 else if 는 여러번 써도 무관하다!   문제1. 나이를 매개변수로 받아, 나이가 18이상이면 "Access granted"를, 그렇지 않으면 "Access denied"를 콘솔에 출력하는 함수 checkAge를 작성해 보세요. function checkAge(age) { if (age >= 18) { console.log("Access granted"); } else { console.log("Acces..

총 4문제를 풀어보겠습니다. 목차는 다음과 같습니다 :) 1. 문자열 합치기2. 객체 만들기3. 문자열 조작하기4. 함수 사용하기       문제 1. 문자열 합치기문자열  'Hello World' 를 출력하는 코드를 작성해보세요.const greeting = "Hello";const name = "World";console.log( ... ) // "Hello World" 출럭  1. 문자열 변수 greeting 과 name 을 합쳐 ‘Hello World’를 출력해보세요.2. 중간에 공백(띄어쓰기)도 구현을 해보세요!   내가 푼 답const greeting = "Hello";const name = "World";const no = " "; // 단어 사이에 띄어쓰기를 포함하기 위해 추가함const ..

문자열 길이를 구하는 방법은  문자열변수.length 를 해주면 된다. Q. 문자열 길이에 1을 더한 값을 알려주는 함수를 만들어보세요.function getStringLengthPlusOne(str) {// 여기에 코드를 작성하세요}// 예시 출력console. log(getStringLengthPlusOne("hello")); // 출력: 6console.log(getStringLengthPlusOne("JavaScript")); // 출력: 11  내가 풀은 방식이다.function getStringLengthPlusOne(str) { return str.length + 1;}// 예시 출력console.log(getStringLengthPlusOne("hello")); // 출력: 6cons..

1. 문자열 연습하기  문제대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.  제한 사항- 문자열 s의 길이 : 50 이하의 자연수- 문자열 s는 알파벳으로만 이루어져 있습니다.  입출력 예sanswer"pPoooyY"true"Pyy"false   풀이function solution(s) { var answer = true; // 1...

내가 맡은 부분상세페이지(subPage)개인소개부분 레이아웃 및 수정개인소개부분 화살표 그림 클릭시 페이지 연결디자인 래퍼런스 참고하여 전체적인 방명록 CSS   # 개인소개부분  레이아웃 및 수정 (문제점과 해결방안)창 크기를 조절하면 개인소개부분의 위치가 바뀌는 문제점display: flex;            ->   부모 안에 있는 자식요소들의 정렬을 위해 사용Flex-direction: row;                ->  자식요소 수평정렬Justify-content: center;         -> 주축에서 가운데 정렬Align-items: center;                -> 교차점에서 가운데 정렬 이 네가지 코드를 사용하였더니 창크기가 달라져도 개인소개부분 위치가 정가운데..

Flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 레이아웃을 만들 때 훨씬 강력하고 편리한 기능들이 많다.  flex는 부모 요소에서 display: flex; 를 적용하는게 시작이다. display: flex;: 가로방향으로 자식요소의 너비만큼 차지 display: block;: 세로방향으로 줄바꿈이 들어가 자식요소들이 한줄씩 차지 display: inline-flex;display: inline-block;: inline이 추가되면 자식요소들 크기만큼만 차지   flex-direction: row;: 자식요소를 가로 방향으로 배치 flex-direction: row-reverse;: 자식요소를 역순으로 가로 방향으로 배치 flex-direction: column;:자식요소를 세로 방향으로 배..

내부링크란?동일한 웹사이트나 도메인에 있는 이미지나 문서와 같은 다른 페이지나 리소스에 대한 웹 페이지의 하이퍼링크 유형이다.한마디로 말해서, 동일한 도메인에 있는 두 페이지를 연결하는 링크이다.     그럼, 내부링크를 태그를 사용해서 걸어보겠다!  먼저, 태그란? 태그는 현재 사이트에서 다른 웹 문서나 사이트를 연결하는 태그이다.링크가 있는 부분에 마우스 커서를 올려놓으면, 손가락 모양의 커서로 바뀌어서 표시된다.    태그 형태네이버로 이동 href에는 연결할 웹 문서의 경로나 사이트 링크를 걸어주면 된다.화면에 표시되는 "네이버 이동"을 클릭하면 href 속성값에 입력한 사이트로 이동하게 된다.   링크 태그 에 적용되는 속성속성속성값내용href웹 문서의 경로, 사이트 주소 값연결할 웹 문서 ..

CSS를 HTML에적용시키는 총 3가지 방법ⓐ linking style sheet    - 별도의 css파일을 생성한 다음 html문서에 연결하는 방식 ⓑ inline style sheet     - Html태그의 style 속성에 CSS 코드를 삽입하는 방식​ⓒ internal style sheet    - Html문서 내에서 태그 사이에 CSS코드를 삽입하는 방식​  1. linking style sheetlink를 사용하는 방식html 파일에 css링크를 달아주면 된다. (href="파일 경로") 2. inline style sheetLorem ipusm dolor.html 태그의 style 속성에 css 코드를 삽입하는 방식꾸미는 것에 한계가 있고, html 파일이 없으면 수저이 어렵다는 점 등..